If then YAML loop structure in _data file for Jekyll

Question

I'm having a hard time with the precise indentation and hyphenation required for a loop in Jekyll using YAML.

For context: I'm using Fancybox, which can contain hidden images that you can scroll through once you pop open the thumbnail. Not all images in the galleries I'm building have hidden images inside, but some do, and that requires a block of HTML inserted into each

So basically I'm trying to build out a page in /_data called gallery.yml that has all of the necessary items in it (thumbnail URLs, titles, etc.) for a loop to insert into the Fancybox HTML (which is in a page inside /_includes).

I can't find definitive answers to exactly how to structure the YAML in my case. I keep getting mapping values and parsing errors. I'll try to simplify the structure as much as possible:

gallery.yml:

#gallery
- name: Saturn
  category: Planets
  thumb_url: saturn-thumb.jpg
  main_url: saturn.jpg

- name: Neptune
  category: Planets
  thumb_url: neptune-thumb.jpg
  main_url: neptune.jpg
    - set_two:
        category: Planets
        main_url: neptune-2.jpg
    - set_three:
        category: Planets
        main_url: neptune-3.jpg

- name: Mars
  category: Planets
  thumb_url: mars-thumb.jpg
  main_url: mars.jpg

page inside /_includes (let's pretend this has proper Fancybox HTML, I just want to make it as simplified as possible):

{% for gallery in site.data.gallery %}

// Main Fancybox
<p>{{ gallery.name }} - {{ gallery.category }}</p>
<img src="{{ gallery.thumb_url }}" /><img src="{{ gallery.main_url }}" />

    {% for ??? in ??? %} // This is where the hidden Fancybox data would be, if it exists
        <p>{{ gallery.main_url }} - {{ gallery.category }}</p>
    {% endfor %}

{% endfor %}

What are the indentation rules for creating these groupings in YAML? And how do I call them, if they exist, inside the loop?

This is what it does right now:

<HTML for Fancybox structure for Saturn>
   <img main image />
   <img thumbnail />
</HTML for Fancybox structure>

<HTML for Fancybox structure for Neptune>
   <img main image />
   <img thumbnail />
</HTML for Fancybox structure>

Repeat until the gallery is done.

But the desired output is: if/when a particular gallery item has multiple Fancybox images nested inside, the Jekyll code will insert them, as I list them in the YAML file.

So...

<HTML for Fancybox structure for Saturn>
   <img main image />
   <img thumbnail />
</HTML for Fancybox structure>

<HTML for Fancybox structure for Neptune - which has additional elements>
   <img main image />
   <img thumbnail />
       <img main image 2 />
       <img main image 3 />
</HTML for Fancybox structure>

I hope that makes sense. I'm just trying to figure out the Jekyll syntax for nested loops, when not every instance of that loops has nested data.

There are no nested loops in YAML, so it can take a long time figuring out the YAML syntax for them. What you are looking for is Jekyll syntax, which just happens to be constrained by the use of YAML. It is also constrained by the use of UTF-8, but you would hopefully not try to figure out nested loops in UTF-8 ;-) — Anthon

ashmaroli ashmaroli · Accepted Answer · 2017-03-15T20:22:33

Say, this is my data for the fancybox:

# gallery.yml

- name: Saturn
  category: Planets
  thumb_url: saturn-thumb.jpg
  main_url: saturn.jpg

- name: Neptune
  category: Planets
  thumb_url: neptune-thumb.jpg
  main_url: neptune.jpg
  additionals:
    - 
      category: Planets
      main_url: neptune-2.jpg
    - 
      category: Planets
      main_url: neptune-3.jpg

- name: Mars
  category: Planets
  thumb_url: mars-thumb.jpg
  main_url: mars.jpg

then the template would be:

{% for gallery in site.data.gallery %}

<!-- Main Fancybox -->
  <p>{{ gallery.name }} - {{ gallery.category }}</p>
  <img src="{{ gallery.thumb_url }}" /><img src="{{ gallery.main_url }}" />

  {% if gallery.additionals %}
    <!-- Secondary optional Fancybox -->
    {% for item in gallery.additionals %}
      <p>{{ item.main_url }} - {{ item.category }}</p>
    {% endfor %}
  {% endif %}

{% endfor%}

If then YAML loop structure in _data file for Jekyll

1 Answers