Image Gallery

// src/components/patterns/image-gallery/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /patterns/image-gallery
additionalProperties: false
required:
  - items
properties:
  headline:
    type: string
  items:
    type: array
    items:
      type: object
      required:
        - image
        - image_ratio
      properties:
        image:
          type: string
          format: html
        image_ratio:
          type: number
        title:
          type: string
        caption:
          type: string
        copyright:
          type: string

// src/components/patterns/image-gallery/mocks.yaml

headline: Gallery Headline
items:
  - image:
      $ref: elements/image#same-ratio
      $tpl: elements/image
      id: 22
    image_ratio: 1.334
    title: >-
      Hier kann ein optionaler Bild-Titel stehen. Er kann durchaus auch mal zwei
      Zeilen haben.
    caption: >-
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.
      Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse
      urna nibh, viverra non, semper suscipit, posuere a, pede.
    copyright: © Marina Musterfrau | Musterland und Musterthema
  - image:
      $ref: elements/image#same-ratio-portrait
      $tpl: elements/image
      id: 23
    image_ratio: 0.667
    title: Ein etwas kürzerer Bildtitel
    caption: >-
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.
      Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse
      urna nibh, viverra non, semper suscipit, posuere a, pede.
    copyright: © Marina Musterfrau | Musterland und Musterthema
  - image:
      $ref: elements/image#same-ratio
      $tpl: elements/image
      id: 24
    image_ratio: 1.334
    title: Hier kann ein optionaler Bild-Titel stehen.
    caption: >-
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.
      Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse
      urna nibh, viverra non, semper suscipit, posuere a, pede.
    copyright: © Marina Musterfrau | Musterland und Musterthema
  - image:
      $ref: elements/image#same-ratio-portrait
      $tpl: elements/image
      id: 25
    image_ratio: 0.667
    title: Ein kurzer Bildtitel
    caption: >-
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.
      Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse
      urna nibh, viverra non, semper suscipit, posuere a, pede.
    copyright: © Marina Musterfrau | Musterland und Musterthema
  - image:
      $ref: elements/image#same-ratio
      $tpl: elements/image
      id: 26
    image_ratio: 1.334
    title: Hier kann ein optionaler Bild-Titel stehen.
    caption: >-
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.
      Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse
      urna nibh, viverra non, semper suscipit, posuere a, pede.
    copyright: © Marina Musterfrau | Musterland und Musterthema
  - image:
      $ref: elements/image#same-ratio-portrait
      $tpl: elements/image
      id: 27
    image_ratio: 0.667
    title: Ein kurzer Bildtitel
    caption: >-
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.
      Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse
      urna nibh, viverra non, semper suscipit, posuere a, pede.
    copyright: © Marina Musterfrau | Musterland und Musterthema

// 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 }}</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 }}
                    </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 }}{% 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>