Looping through nested image gallery array in Jekyll/YAML

Question

Why can't I loop through the main: image array for this project group in Jekyll?

/_data/navigation.yml:

- project:
  -
    categ: navigation
    name: Letterman
    age: 54
    feeling: swell
    thumb: thumb-letterman.jpg
    main:
      - image: image_1.jpeg

- project:
  -
    categ: navigation
    name: Carlin
    age: 67
    feeling: nice
    thumb: thumb-carlin.jpg
    main:
      - image: image_1.jpeg
      - image: image_2.jpeg
      - image: image_3.jpeg

navigation-page.html:

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

    {% for project in navigation.project %}
        <div style="border:1px solid purple;margin:40px;">
            <p style="font-size:1em;color:purple">{{ project.name }}</p>

            {% for main in navigation.project %}
                <img src="{{ page.path }}{{ image }}" />
            {% endfor %}
        </div>
    {% endfor %}

{% endfor %}

The output for this should be two div rows, each with the name of the project, the first row would have one image, and the second row would have three images.

Answer 1

It was an issue with your looping.

{% for project in navigation.project %}

  {% for image in project.main %}

    <!-- This loop needed to loop within its parent -->

  {% endfor %}

{% endfor %}

I got this to work using the following.

HTML (with values)

{% for item in site.data.navigation %}
<ul>
  <li>
    <p style="border: solid 1px red;">Project loop {{ forloop.index }}</p>
    {% for project in item.project %}
    <ul>
      <li>
        <p style="border: solid 1px green;">Sub Loop {{ forloop.index }}</p>
        <ul>
          <li style="border: solid 1px blue;">
            <p><strong>categ:-</strong> {{project.categ}}</p>
          </li>
          <li style="border: solid 1px blue;">
            <p><strong>name:-</strong> {{project.name}}</p>
          </li>
          <li style="border: solid 1px blue;">
            <p><strong>age:-</strong> {{project.age}}</p>
          </li>
          <li style="border: solid 1px blue;">
            <p><strong>feeling:-</strong> {{project.feeling}}</p>
          </li>
          <li style="border: solid 1px blue;">
            <p><strong>thumbnail:-</strong> {{project.thumb}}</p>
          </li>
          <li>
            <ol>
              {% for image in project.main %}
                <li style="border: solid 1px purple;">
                  <p>{{ image.image }}</p>              
                </li>          
              {% endfor %}
            </ol>            
          </li>
        </ul>
      </li>
    </ul>
    {% endfor %}
  </li>
</ul>
{% endfor %}

HTML (loop index)

<div style="border: solid 4px purple; padding: 10px;">
  {% for item in site.data.navigation %}
    <div style="border: solid 3px red; padding: 10px; margin: 10px;">
      <pre>LOOP {{ forloop.index }}</pre>
      {% for project in item.project %}
        <div style="border: solid 2px green; padding: 10px; margin: 10px;">
          <pre>SUB LOOP {{ forloop.index }}</pre>
          {% for image in project.main %}
            <div style="border: solid 1px blue; padding: 10px; margin: 10px;">
              <pre>IMAGE {{ forloop.index }}</pre>
            </div>
          {% endfor %}
        </div>
      {% endfor %}
    </div>
  {% endfor %}
</div>

YAML

- project:
  -
    categ: navigation
    name: Letterman
    age: 54
    feeling: swell
    thumb: thumb-letterman.jpg
    main:
      - image: image_1.jpeg

- project:
  -
    categ: navigation
    name: Carlin
    age: 67
    feeling: nice
    thumb: thumb-carlin.jpg
    main:
      - image: image_1.jpeg
      - image: image_2.jpeg
      - image: image_3.jpeg