Motive Lightbox

// src/components/patterns/motive/motive-lightbox/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /elements/lightbox/motive-lightbox
additionalProperties: false
required:
  - items
properties:
  items:
    type: array
    items:
      required:
        - name
        - image
      type: object
      properties:
        name:
          type: string
        lightbox_image:
          type: object
          properties:
            src:
              type: string
            copyright:
              type: string
            alt:
              type: string

// src/components/patterns/motive/motive-lightbox/mocks.yaml

items:
  - name: forest
    image:
      src: https://via.placeholder.com/1076x604?text=Image+1+(16:9)
      alt: forest
      copyright: Foto © Brooke Pyke / Greenpeace
  - name: field
    image:
      src: https://via.placeholder.com/1076x604?text=Image+1+(16:9)
      alt: field
      copyright: Foto © Brooke Pyke / Greenpeace
  - name: tomato
    image:
      src: https://via.placeholder.com/1076x604?text=Image+1+(16:9)
      alt: tomato
      copyright: Foto © Brooke Pyke / Greenpeace
  - name: potato
    image:
      src: https://via.placeholder.com/1076x604?text=Image+1+(16:9)
      alt: potato
      copyright: Foto © Brooke Pyke / Greenpeace
  - name: bird
    image:
      src: https://via.placeholder.com/1076x604?text=Image+1+(16:9)
      alt: bird
      copyright: Foto © Brooke Pyke / Greenpeace
  - name: car
    image:
      src: https://via.placeholder.com/1076x604?text=Image+1+(16:9)
      alt: car
      copyright: Foto © Brooke Pyke / Greenpeace

// src/components/patterns/motive/motive-lightbox/motive-lightbox.html.twig

<div class="MotiveLightbox">
  <div class="MotiveLightbox-content">
    {% include "@elements/icon/icon.html.twig" with {
      name: "logo",
      class: "MotiveLightbox-logo"
    } only %}
    <span class="MotiveLightbox-title">Urkunde</span>
      <div class="MotiveLightbox-media">
        {% for item in items %}
          <div class="js-MotiveLightbox-image MotiveLightbox-image" data-variant="motive-variant-{{ item.value }}">
            <img class="MotiveLightbox-imageElement" src="{{ item.image.src }}" alt="{{ item.image.alt }}" width="463" height="261">
            {% if item.image.copyright %}<span class="MotiveLightbox-copyright">{{ item.image.copyright }}</span>{% endif %}
          </div>
        {% endfor %}
        <span class="MotiveLightbox-donationWay">Über:</span>
        <span class="MotiveLightbox-donationDetails">Eine Spende in Höhe von
          <span class="MotiveLightbox-donationAmount">XX€</span>
        </span>
      </div>
    <span class="MotiveLightbox-text js-MotiveLightbox-text"></span>
    <div class="MotiveLightbox-footer">
      <p class="MotiveLightbox-footnote">Diese Spende ist ein wertvoller Beitrag zum Schutz unserer Erde. Nur dank Unterstützung wie dieser kann Greenpeace sich weltweit für eine gesunde Natur, den Erhalt der Artenvielfalt und den Schutz unserer Lebensgrundlagen einsetzen.</p>
      <div class="MotiveLightbox-footerLogos">
        <img class="MotiveLightbox-footerLogo" src="{{ asset_path().toString() }}images/logo-dfv.webp" alt="Deutscher Fundraising Verband" width="63" height="63">
        <img class="MotiveLightbox-footerLogo" src="{{ asset_path().toString() }}images/logo-itz.svg" alt="Initiative Transparente Zivilgesellschaft" width="224" height="63">
      </div>
    </div>
  </div>
</div>