Gallery made with child pages

Support Themes & Styling
1

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 page.media.images %} 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 page.media.images %}
      <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>
       </div>
      </a>
      </div>
    {% endfor %}
{% endfor %}

{% endblock %}

Thx.

2

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

3

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

4

@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?
    E.g:

    content:
    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 child.media.images %}
      ...
   {% endfor %}
{% endfor %}

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

5

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

6

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.

7

Hello,

Here is my guess:

  • You declare:
  • But then you use:

It should be:
{% for image in p.media.images %}

9

@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?

Thanks!

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

1 Like