Gallery made with child pages

Hello I’m new to Grav and I really like it for its simplicity. Now I want to go little deeper. I would like make simple gallery consisting of child pages. I managed to make gallery on single page using {% for image in %} loop.
So my goal is to make page which is build from child pages containing only title, some description and all media images from child page folder.

I ended on this:

{% extends 'partials/base.html.twig' %}

{% block content %}
{% for p in page.collection %}

<h2>{{ p.title }}</h2>

{% for image in %}
      <div class="col-md-3 mb-0">
      <a data-fancybox="galerie" data-caption="{{ image.meta.title }}" href="{{ image.url }}"> {{ image.resize(600,500).html('foto',  'fotka', "img-fluid") }}
       <div class="card-body">
       <p class="card-text"></p>
    {% endfor %}
{% endfor %}

{% endblock %}


I’ve done this and I’m pretty sure it works too. I’m a little busy. If you can’t wait for someone else to answer, could you remind me to find it? Cheers

Still no answer from the others. So can you find it for me please @hughbris ?

@kmk, You shared your intention and code, but what I’m missing is the problem you are facing…

Here is some guesswork:

  • If gallery is totally empty:
    Did you define a collection in the page in which you want to create a gallery?

        items: '@self.children'
  • If it shows titles of children with image(s) of current page (if any):
    Your inner loop should not use ‘page’ (which references the current page), but ‘p’ which references a child page in the collection.

    It should be:

    {% for child in page.collection %}
       {% for image in %}
       {% endfor %}
    {% endfor %}

    N.B. For clarity of the code I renamed the variable.

I just noticed that error in the original template too! Please let us know if that achieves your goal. It looks like it should.

My examples are not quite the same, unfortunately. They may still be useful, but I’d like to see if @pamtbaau’s suggestion works first.


Here is my guess:

  • You declare:
  • But then you use:

It should be:
{% for image in %}

@kmk, Glad to here your original issue has been resolved.

This new questions seems unrelated and warrents for posting a new issue. Would you mind flagging your last reply for deletion (click the 3 horizontal dots and click the waste-bin) and open a new issue?


Spoiler art: Yes it can be done in one go…

1 Like