Skip to content
Grav 2.0 is officially stable. Read the announcement →

Community guidelines

Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.

Themes & Styling

Gallery made with child pages

Solved by pamtbaau View solution

Started by kmk 7 years ago · 7 replies · 908 views
7 years ago

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:

TWIG
{% 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.

7 years ago

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

6 years ago

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

6 years ago Solution

@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:
    YAML
    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:

    TWIG
    {% for child in page.collection %}
     ...
     {% for image in child.media.images %}
        ...
     {% endfor %}
    {% endfor %}
    

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

last edited 01/02/20 by pamtbaau
6 years ago

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 years ago

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.

6 years ago

Hello,

Here is my guess:

  • You declare:

@kmk:
{% for p in page.collection %}

  • But then you use:

@kmk:
{% for image in page.media.images %}

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

6 years ago

@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
last edited 01/06/20 by pamtbaau

Suggested topics

Topic Participants Replies Views Activity
Themes & Styling · by Pedro M, 2 months ago
4 193 2 months ago
Themes & Styling · by Ian, 2 months ago
3 90 2 months ago
Themes & Styling · by Norbert, 2 years ago
11 449 3 months ago
Themes & Styling · by Lukáš Findeis, 3 months ago
0 44 3 months ago
Themes & Styling · by Sebadamus, 4 months ago
5 123 3 months ago