Forloops trouble jekyll

Question

I am trying to add a heading and a description to my galleries in the page galerie.html that are for looped but am having an issue with this, the link to the entire website: https://github.com/smarchitects/smarchitectsweb

How do I add a headline and description into the for loop? Thank you!

I tried adding this code snippet:

<div class="col-12 center">
<h2>{{item.headline}}</h2>
<p>{{item.about}}</p>
</div>

in various places in the for loop and loop and then added this in various places in the front data:

"- headline: XXX"
"- about: YYY"

but none of the combinations worked for me...

Welcome to SO! Please include the loop code and the gallery data in your post. Most probably a similar issue like here: https://stackoverflow.com/questions/74433817/how-to-define-jekyll-frontmatter-with-a-nested-list/74496569#74496569 — Christian, Nov 20 '22 at 03:41

score 0 · Answer 1 · answered Nov 24 '22 at 00:06

Nice website! I cannot reproduce the issue and see any problem because your code is working for me.

Using {{ section | inspect }} shows this on the page:

{"gallery"=>[{"column-size"=>"col-4_sm-12", "aspect-ratio"=>"landscape", "background_image"=>"/images/1.jpg", "description"=>"Karolína Harrachov"}, {"column-size"=>"col-4_sm-12", "aspect-ratio"=>"landscape", "background_image"=>"/images/2022Harrachovexterier/SMARCH_HARR_03_FINAL_.jpg", "description"=>"Karolína Harrachov"}, {"column-size"=>"col-4_sm-12", "aspect-ratio"=>"landscape", "background_image"=>"/images/2022Harrachovexterier/SMARCH_HARR_02B_FINAL_CORR01_.jpg", "description"=>"Karolína Harrachov"}]}

Your current code (below) seems to work fine though:

{%for section in page.galleries%}
 
<section class="padded">
    <div class="capped-width m-l-center m-r-center" id="projekt-{{forloop.index}}">
      
      <div class="gallery grid" id="lightgallery-{{forloop.index}}">
        {% for item in section.gallery %}
      
          <a class="{{item.column-size}} gallery-item" href="{{item.background_image}}">
            <div class="bg-image lazy-div relative {{item.aspect-ratio}}" data-main="{{item.background_image}}">
                <div class="galerie-overlay">
                  {{ item.description }}
                </div>
            </div>
          </a> 
      
        {% endfor %}
      </div>
  </div>
  </section>
{%endfor%}

The description text is shown as expected as an overlay when hovering over an image.

I don't see any headline or about attributes.

Forloops trouble jekyll

1 Answers1