Use Twig loop to output WordPress/ACF image gallery in nested structure

Question

I am using the following code to output an image gallery from WordPress and Advanced Custom Fields using the Timber plugin.

{% if story.meta( 'gallery' ) %}
  <div class="story__gallery">
    <div class="gallery__row">
    {% for image in story.meta( 'gallery' ) %}
      {% if Image(image).width > Image(image).height %}
        {% set dimension = 'gallery__item--horizontal' %}
      {% else %}
        {% set dimension = 'gallery__item--vertical' %}
      {% endif %}
      <figure class="gallery__item gallery__item--{{ Image(image).id }} {{ dimension }}">
        <img src="{{ Image(image) }}" width="{{ Image(image).width }}" height="{{ Image(image).height }}" alt="{{ Image(image).alt }}" />
      </figure>
      {% if loop.index is divisible by(3) and not loop.last %}
        </div><div class="gallery__row">
      {% endif %}
    {% endfor %}
    </div>
  </div>
{% endif %}

This version of the code is working, but now I am needing to implement some logic to output the gallery using the following HTML structure.

<div class="story__gallery">
  <div class="gallery__row">
    <figure class="gallery__item gallery__item--large"></figure>
    <div class="gallery__cluster">
      <figure class="gallery__item gallery__item--small"></figure>
      <figure class="gallery__item gallery__item--small"></figure>
    </div>
  </div>
</div>

How would I go about working with the loop.index to wrap the two small figures in the gallery__cluster div and have it properly outputted in the gallery__row container?

Answer 1

I would set a variable outside of the loop and increment it by 1 each time, since you need to do different things each increment of the loop. Reset it every 3 loops. It's a lot of if statements, but it gets the job done. Note I have not tested the below since I don't have a component that matches yours to test but I think you can make it work.

{% set rowIndex = 0 %}
    
{% if story.meta( 'gallery' ) %}
  <div class="story__gallery">
    {% for image in story.meta( 'gallery' ) %}
      {% set rowIndex = rowIndex + 1 %}
      {% if rowIndex == 1 %}
        <div class="gallery__row">
          <figure class="gallery__item gallery__item--large">
            <img src="{{ Image(image) }}" width="{{ Image(image).width }}" height="{{ Image(image).height }}" alt="{{ Image(image).alt }}" />
          </figure>
          {% if loop.last %}
            </div>
          {% endif %}
      {% endif %}
      {% if rowIndex == 2 %}
        <div class="gallery__cluster">
          <figure class="gallery__item gallery__item--small">
            <img src="{{ Image(image) }}" width="{{ Image(image).width }}" height="{{ Image(image).height }}" alt="{{ Image(image).alt }}" />
          </figure>
        {% if loop.last %}
          </div>
          </div>
        {% endif %}
      {% endif %}
      {% if rowIndex == 3 %}
        <figure class="gallery__item gallery__item--small">
          <img src="{{ Image(image) }}" width="{{ Image(image).width }}" height="{{ Image(image).height }}" alt="{{ Image(image).alt }}" />
        </figure>
        </div>
        </div>
        {% set rowIndex = 0 %}
      {% endif %}
    {% endfor %}
  </div>
{% endif %}