Nested list loop in Twig template

Hi guys,

I’m new to Grav and i’m currently struggling with a nested list.
I managed to see the list fields in the page form, but I don’t know how to get a loop of these fields into the Twig template.

For better understanding i’ve attached 2 Images: One from the Twig Template and One from the Yaml file.

Thanks for your help!

@ginofa, I think an example of the header/frontmatter of the page would be more informative then the blueprint itself. The template reads the frontmatter, not the blueprint.

Should it not be:

{% for actuelles in page.header.aktuelles %}
  ...
  {% for information in actuelles.information %} <-- looping list of information items in actuelles.information
     {{ information.additional.info }}
  {% endfor %}
  ...
{% endfor %}

Question:
What is the rationale for using field names like ‘.bild.auswahl’ and ‘.short.description’ instead of ‘.auswahl’ and ‘.description’?

I like to keep things organized. I want to have the option to use the same names for different sections on my page. So maybe I need 2 descriptions so I add the category in front of the actual field.

Unfortunately the looping didn’t work. Currently I don’t know the right name for the second loop either.

@ginofa, Thanks for the clarification.

Since the frontmatter/header is the source for Twig it might be helpful to share it in your post/reply.

Please don’t use an image, but copy and format the text between triple back-ticks (```) on a newline before and after the copied text.

No problem.

What exactly is the frontmatter or in which path I will find it?

@ginofa, That is the part at the top of the page between the lines containing the three dashes:

---
title: My Title
aktuelles:
  - 
    bild.auswahl: filename.ext
    text: Some text
    etc.
---

You might consider reading the first few chapters of the documentation to get a basic understanding of Grav.

The chapter on headers/frontmatter can be found at https://learn.getgrav.org/content/headers

Then this should be the right one

Frontmatter Code
---
title: Startseite
aktuelles:
    -
        text: 'Spielenachmittag 2020'
        short:
            description: "Für Mitglieder und Nichtmitglieder ab 50+\r\n<br>\r\nAm 19.01, 16.02 und 15.03.2020\r\n<br>"
        anmeldung:
            formular: Anmelden
        information:
            -
                additional:
                    info: 'Test Info 1'
            -
                additional:
                    info: 'Test Info 2'
        bild:
            auswahl:
                user/themes/kolping/images/termine/Spielenachmittag2020.jpg:
                    name: Spielenachmittag2020.jpg
                    type: image/jpeg
                    size: 22613
                    path: user/themes/kolping/images/termine/Spielenachmittag2020.jpg
    -
        text: Planetarium
        short:
            description: "Ab 8 Jahren\r\n<br>\r\nAnmeldung bis zum 06.01.2020"
        anmeldung:
            formular: Anmelden
            weiterleitung: 'http://google.de'
        bild:
            auswahl:
                user/themes/kolping/images/termine/planetarium.jpg:
                    name: planetarium.jpg
                    type: image/jpeg
                    size: 167484
                    path: user/themes/kolping/images/termine/planetarium.jpg
    -
        text: 'X-Mas Party'
        short:
            description: "Am 21.12.2019\r\n<br>\r\nAnmeldung bis zum 15.12.2019"
        anmeldung:
            formular: Anmelden
        bild:
            auswahl:
                user/themes/kolping/images/termine/christmas.jpg:
                    name: christmas.jpg
                    type: image/jpeg
                    size: 165371
                    path: user/themes/kolping/images/termine/christmas.jpg
termine:
    -
        text: Weihnachtsbaumaktion
        short:
            description: 'Kolpingsfamilie Wessum sammelt Weihnachtsbäume'
        description: "Kolpingsfamilie Wessum sammelt Weihnachtsbäume\r\n35 kleine und große Helfer*innen haben am Samstag in Wessum und Averesch die Weihnachtsbäume eingesammelt. Dabei waren deren Besitzer spendierfreudig, denn am Ende des Tages waren 4.118,28 € in den Sammeldosen. Die Spenden werden für die Jugendarbeit und die Ferienspiele verwendet."
        weiterleitung: Weiterlesen
        weiterlesen: weihnachtsbaumaktion
        header:
            img:
                user/themes/kolping/images/rueckblick/tannenbaumaktion.jpg:
                    name: tannenbaumaktion.jpg
                    type: image/jpeg
                    size: 286358
                    path: user/themes/kolping/images/rueckblick/tannenbaumaktion.jpg
    -
        text: 'Spende von der KFD Theatergruppe'
        short:
            description: 'Da fängt der Sonntag doch super an! 👏'
        description: "Da fängt der Sonntag doch super an! 👏\r\nHeute morgen staunten Manfred Homölle, Bruno Eing und Jan Gerling nicht schlecht als Susanne Zukunft, Heike Becker und Annetraud Terbeck von der KFD-Theatergruppe einen Scheck in Höhe 1161,40 € für die Inneneinrichtung des Dorfgemeinschaftshauses übergaben. Bei den Aufführungen des Bunten Nachmittag und Abenden ist diese stolze Summe bei einer Spendensammlung zusammengekommen. Dieses Geld und weitere 300 Euro, die schon zu einem früheren Zeitpunkt gespendet wurden, werden für die Bühnentechnik im DGH verwendet.\r\n<strong>Herzlichen Dank an die KFD und allen Spendern.</strong>"
        weiterleitung: Weiterlesen
        weiterlesen: kfd-spende
        header:
            img:
                user/themes/kolping/images/rueckblick/Spende1.jpg:
                    name: Spende1.jpg
                    type: image/jpeg
                    size: 85630
                    path: user/themes/kolping/images/rueckblick/Spende1.jpg
    -
        text: 'Rafting Tour 2019'
        short:
            description: 'Rafting, Canyoning, Mountainbike fahren,...'
        description: "Rafting, Canyoning, Mountainbike fahren, Mountaincart fahren, Klettergarten, Schwimmen, Freizeitgestaltung gepaart mit Abenteuerlichen Erlebnissen.\r\nWer da nicht dabei war, der hat am Leben noch nicht wirklich teilgenommen."
        weiterleitung: Weiterlesen
        weiterlesen: rafting
        header:
            img:
                user/themes/kolping/images/rueckblick/rafting.jpg:
                    name: rafting.jpg
                    type: image/jpeg
                    size: 126232
                    path: user/themes/kolping/images/rueckblick/rafting.jpg
body_classes: 'title-center title-h1h2'
hero:
    img:
        user/themes/kolping/images/hero/hero@2x.jpg:
            name: hero@2x.jpg
            type: image/jpeg
            size: 697059
            path: user/themes/kolping/images/hero/hero@2x.jpg
        user/themes/kolping/images/hero/hero.jpg:
            name: hero.jpg
            type: image/jpeg
            size: 274689
            path: user/themes/kolping/images/hero/hero.jpg
        user/themes/kolping/images/hero/hero_576x288.jpg:
            name: hero_576x288.jpg
            type: image/jpeg
            size: 55012
            path: user/themes/kolping/images/hero/hero_576x288.jpg
        user/themes/kolping/images/hero/hero_400x200.jpg:
            name: hero_400x200.jpg
            type: image/jpeg
            size: 29704
            path: user/themes/kolping/images/hero/hero_400x200.jpg
        user/themes/kolping/images/hero/hero_800x400@2x.jpg:
            name: hero_800x400@2x.jpg
            type: image/jpeg
            size: 92651
            path: user/themes/kolping/images/hero/hero_800x400@2x.jpg
        user/themes/kolping/images/hero/hero_1152x576@2x.jpg:
            name: hero_1152x576@2x.jpg
            type: image/jpeg
            size: 163199
            path: user/themes/kolping/images/hero/hero_1152x576@2x.jpg
img:
    text: 'TEST description'
---

@ginofa, The suggested loop works as expected… At least wrt. my expectation :slight_smile:

  • Copied your frontmatter into a page ‘default.md’
  • Copied the aforementioned loop into ‘/user/themes/quark/templates/default.html.twig’:
    {% extends 'partials/base.html.twig' %}
    
    {% block content %}
      {% for actuelles in page.header.aktuelles %}
        {% for information in actuelles.information %}
          <p>{{ information.additional.info }}</p>
        {% endfor %}
      {% endfor %}
    {% endblock %}
    
  • Output:
    <p>Test Info 1</p>
    <p>Test Info 2</p>
    

It works for me also, but the <p> tag is empty.
I will fix that :slight_smile:
Thanks for your help !