<div class="gallery">
  {{ range .images }}
    {{ if .id }}
      {{- $image := partial "GetMedia" .id -}}
      {{- $image_class := printf "image-%s" (partial "GetImageDirection" .) -}}
      {{- if $image -}}
        <figure class="{{ $image_class  }}">
          {{ partial "commons/image.html"
            (dict
              "image"    .file
              "alt"      .alt
              "sizes"    site.Params.image_sizes.blocks.gallery.large
            )}}
          {{ if not site.Params.image_sizes.design_system.lightbox.disabled }}
            {{ $lightbox_text := false }}
            {{ if and .text .credit }}
              {{ $lightbox_text = delimit (slice .text .credit) " | " }}
            {{ else if or .text .credit }}
              {{ $lightbox_text = or .text .credit }}
            {{ end }}
            
            <a  class="glightbox"
                role="button"
                data-glightbox="type: image; {{ with $lightbox_text }}description: {{ . | safeHTML }}{{ end }}"
                href="{{ partial "GetLightboxUrl" (dict "id" .id) }}"
                title="{{- i18n "commons.lightbox.link.title" -}}"
                aria-label="{{- i18n "commons.lightbox.link.title" -}}">
            </a>
          {{ end }}
          {{ with .text }}
            <figcaption>
              <p>{{- . | safeHTML -}}</p>
            </figcaption>
          {{ end }}
        </figure>
      {{- end -}}
    {{ end }}
  {{ end }}
</div>