image-gallery

// src/components/patterns/image-gallery/image-gallery.html.twig

{% set id = "EndOfGallery-" ~ random() %}

<section class="ImageGallery Tracking--imageGallery js-ImageGallery">
  {% if headline %}
    <h2 class="ImageGallery-headline u-container">{{ headline }}</h2>
  {% endif %}
  <div class="ImageGallery-content js-ImageGallery-content">
    <div class="ImageGallery-track js-ImageGallery-track">
      <ul class="ImageGallery-list js-ImageGallery-list">
        {% for item in items %}
          <li class="ImageGallery-slide js-ImageGallery-slide">
            <figure class="ImageGallery-figure" style="--ImageGallery-image-ratio: {{ item.image_ratio }};">
              <div class="ImageGallery-imageContainer">
                <div class="ImageGallery-image">
                  {{ item.image|raw }}
                </div>
                {% if item.title %}
                  <p class="ImageGallery-title u-typo-headline5 js-ImageGallery-title">{{ item.title|german_quotes }}</p>
                {% endif %}
              </div>
              {% if item.caption or item.copyright %}
                <figcaption class="ImageGallery-info js-ImageGallery-info">
                  {% if item.caption %}
                    <p class="ImageGallery-caption u-typo-copy-small">
                      {{ item.caption|german_quotes }}
                    </p>
                  {% endif %}
                  <p class="ImageGallery-copyright u-typo-copy-small">
                    <span class="ImageGallery-count">
                      <span class="js-ImageGallery-slideNumber">Bild {{ loop.index }}</span> von {{ loop.length }}
                    </span>
                    {% if item.copyright %}{{ item.copyright|german_quotes }}{% endif %}
                  </p>
                  <a tabindex="-1" href="#{{ id }}" class="u-hiddenVisually">Überspringe die Bildergalerie</a>
                </figcaption>
              {% endif %}
            </figure>
          </li>
        {% endfor %}
      </ul>
    </div>
    <div class="ImageGallery-arrows js-ImageGallery-arrows" aria-hidden="true">
      <button tabindex="-1" class="ImageGallery-arrow js-ImageGallery-arrow ImageGallery-arrow--prev js-ImageGallery-arrow--prev" type="button">
        {% include "@elements/icon/icon.html.twig" with {name: "arrow-left"} only %}
      </button>
      <button tabindex="-1" class="ImageGallery-arrow js-ImageGallery-arrow ImageGallery-arrow--next js-ImageGallery-arrow--next" type="button">
        {% include "@elements/icon/icon.html.twig" with {name: "arrow"} only %}
      </button>
    </div>
  </div>
  <div id="{{ id }}" class="u-hiddenVisually">Ende der Gallerie</div>
</section>