Twig problem

Archive
1

Hi, I’m all new to this Twig thing. I’m trying to modify the features module to some sort of contact showcase. How would I go about, lining everything up, allow multiple rows of texts and swap out the icons for an user avatar instead? And how do I change the background color to the “text.html.twig” color instead? (Grayish background.)

I’ve tried playing around with the code for quite some while, but I just keep getting errors.

Screenshot_20170411_092446

2

Twig is just a way to render the HTML. The content is determined by the page.
The appearance of the HTML in the browser is determined by the CSS of the theme.

So I suggest breaking down the problems into

1 - Have the page generate the HTML you want
2 - Style that HTML with CSS

Seems you’re using the Antimatter theme, so the features module Twig is https://github.com/getgrav/grav-theme-antimatter/blob/develop/templates/modular/features.html.twig

You can see it checks in the page header for the features definition. That’s where it checks for the icon, and the rest of the content.

It looks for a FontAwesome icon, so that’s not working if you want to add an user avatar. You’d better copy this twig, rename it as contacts.html.twig and add your own HTML.

When starting out, it helps writing the HTML directly in the twig, then looking at a way to integrate it in the page header, so the content can be dynamic instead of hard-wired in the twig.

3

Okay, so this is what I’ve managed to do. Looking pretty much how I like it, I made a copy of the text.html.twig instead.

My .md file looking like this

title: Kontakt
menu: Kontakt
class: big
--*
**Name**  
Email

And my Twig file like this

<div class="modular-row callout">
    {% set image = page.media.images|first %}
    {% if image %}
        {{ image.cropResize(200,200).html('','','align-'~page.header.image_align) }}
    {% endif %}
{{ content }}
</div>

Screenshot_20170411_140312

However, I’m still stuck with the problem how to add multiple pictures/contacts next to this current, in a fairly easy way. :stuck_out_tongue: This picture, I added it thru the admin panel, might be the wrong way to do it.

4

Is the .md file even necessary? Tho it would be nice to have to quick edit names, emails and other variables. But can’t figure out how to do that. :stuck_out_tongue: I’m probably way overthinking this…

5

The .md file is used to provide the data. The Twig then just iterates on the data and prints it nicely formatted. So you could have

people:
  - 
    name: Joe
    picture: test.jpg
  - 
    name: Joe2
    picture: test2.jpg

and iterate on page.header.people in your Twig file. You can check the examples that are provided in the Skeletons, which are downloadable full Grav sites you can inspect to find out how they build the content.