<div class="gallery is-flex is-flex-wrap-wrap">
  {% for path in images %}
  {% if section %}
  {% set full_path = section.path ~ path %}
  {% endif %}
  {% if page %}
  {% set full_path = page.path ~ path %}
  {% endif %}
  {% set thumb = resize_image(path=full_path, width=120, height=120) %}

  <div class="gallery-item">
    <a href="#{{ path }}">
      <img src="{{ thumb.url }}" class="thumbnail" />
    </a>
    <div class="lightbox has-text-centered" id="{{ path }}">
      {% if images | length > 1 %}
      <span class="spacer"></span>
      {% if loop.first %}
      <a href="#{{ images | nth(n=images | length - 1) }}" class="lightbox-nav-previous">
        ⟳
      </a>
      {% else %}
      <a href="#{{ images | nth(n=loop.index0 - 1) }}" class="lightbox-nav-previous">
        &lt;
      </a>
      {% endif %}
      <img src="{{ path }}" />
      <a class="delete is-large" href="#"></a>
      {% if loop.last %}
      <a href="#{{ images | nth(n=0) }}" class="lightbox-nav-next">
        ⟲
      </a>
      {% else %}
      <a href="#{{ images | nth(n=loop.index) }}" class="lightbox-nav-next">
        &gt;
      </a>
      {% endif %}
      {% else %}
      <a href="#" class="close">
        <span class="spacer"></span>
        <img src="{{ path }}" />
      </a>
      {% endif %}
      {% if images | length > 1 %}
      {% if loop.first %}
      <a href="#{{ images | nth(n=images | length - 1) }}" class="is-desktop">
        <span class="lightbox-previous"></span>
      </a>
      {% else %}
      <a href="#{{ images | nth(n=loop.index0 - 1) }}" class="is-desktop">
        <span class="lightbox-previous"></span>
      </a>
      {% endif %}
      {% if loop.last %}
      <a href="#{{ images | nth(n=0) }}" class="is-desktop">
        <span class="lightbox-next"></span>
      </a>
      {% else %}
      <a href="#{{ images | nth(n=loop.index) }}" class="is-desktop">
        <span class="lightbox-next"></span>
      </a>
      {% endif %}
      {% endif %}
    </div>
  </div>
  {% endfor %}
</div>
