Media-Template

// src/components/elements/media-template/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /elements/media-template
additionalProperties: false
properties:
  youtube_id:
    type: string
  image:
    type: string
    format: html
  caption:
    type: string
  legal:
    type: string
  is_portrait:
    type: boolean
  cover_image:
    $ref: /elements/image

// src/components/elements/media-template/mocks.yaml

$hidden: true
legal: © Marina Musterfrau | Musterland und Musterthema
caption: >-
  Mit einer Höhe von 654 px für das Seitenverhältnis 3:2 wird angestrebt, dass
  das gesamte Bild innerhalb des Viewports betrachtet werden kann.
$variants:
  - $name: Youtube video
    youtube_id: Mt96n0YRccM
  - $name: Youtube video with image overlay
    youtube_id: Mt96n0YRccM
    cover_image:
      $ref: elements/image#same-ratio-16-9
      $tpl: elements/image
  - $name: Landscape image
    is_portrait: false
    image:
      $ref: elements/image
      width: 537
      height: 358
      src: https://via.placeholder.com/537x358
      alt: Alternative text
      id: 9
      sources:
        - width: 537
          height: 358
          srcset: >-
            https://via.placeholder.com/537x358 1x,
            https://via.placeholder.com/1074x716 2x
          media: '(max-width: 35.5625rem)'
        - width: 927
          height: 618
          srcset: >-
            https://via.placeholder.com/927x618 1x,
            https://via.placeholder.com/1854x1236 2x
          media: '(min-width: 35.625rem) and (max-width: 59.9375rem)'
        - width: 501
          height: 334
          srcset: >-
            https://via.placeholder.com/501x334 1x,
            https://via.placeholder.com/1002x668 2x
          media: '(min-width: 60rem) and (max-width: 79.9375rem)'
        - width: 496
          height: 331
          srcset: >-
            https://via.placeholder.com/496x331 1x,
            https://via.placeholder.com/992x662 2x
          media: '(min-width: 80rem)'
      $tpl: elements/image
  - $name: Landscape image full
    is_portrait: false
    image:
      $ref: elements/image
      width: 537
      height: 358
      src: https://via.placeholder.com/537x358
      alt: Alternative text
      id: 10
      sources:
        - width: 537
          height: 358
          srcset: >-
            https://via.placeholder.com/537x358 1x,
            https://via.placeholder.com/1074x716 2x
          media: '(max-width: 35.5625rem)'
        - width: 927
          height: 618
          srcset: >-
            https://via.placeholder.com/927x618 1x,
            https://via.placeholder.com/1854x1236 2x
          media: '(min-width: 35.625rem) and (max-width: 59.9375rem)'
        - width: 985
          height: 657
          srcset: >-
            https://via.placeholder.com/985x657 1x,
            https://via.placeholder.com/1970x1314 2x
          media: '(min-width: 60rem) and (max-width: 79.9375rem)'
        - width: 984
          height: 656
          srcset: >-
            https://via.placeholder.com/984x656 1x,
            https://via.placeholder.com/1968x1312 2x
          media: '(min-width: 80rem)'
      $tpl: elements/image
  - $name: Portrait image
    is_portrait: true
    image:
      $ref: elements/image
      width: 399
      height: 598
      src: https://via.placeholder.com/399x598
      alt: Alternative text
      id: 11
      sources:
        - width: 399
          height: 598
          srcset: >-
            https://via.placeholder.com/399x598 1x,
            https://via.placeholder.com/798x1196 2x
          media: '(max-width: 35.5625rem)'
        - width: 809
          height: 1214
          srcset: >-
            https://via.placeholder.com/809x1214 1x,
            https://via.placeholder.com/1618x2428 2x
          media: '(min-width: 35.625rem) and (max-width: 59.9375rem)'
        - width: 398
          height: 596
          srcset: >-
            https://via.placeholder.com/398x596 1x,
            https://via.placeholder.com/796x1192 2x
          media: '(min-width: 60rem) and (max-width: 79.9375rem)'
        - width: 392
          height: 588
          srcset: >-
            https://via.placeholder.com/392x588 1x,
            https://via.placeholder.com/784x1176 2x
          media: '(min-width: 80rem)'
      $tpl: elements/image
  - $name: Portrait image full
    is_portrait: true
    image:
      $ref: elements/image
      width: 399
      height: 598
      src: https://via.placeholder.com/399x598
      alt: Alternative text
      id: 12
      sources:
        - width: 399
          height: 598
          srcset: >-
            https://via.placeholder.com/399x598 1x,
            https://via.placeholder.com/798x1196 2x
          media: '(max-width: 35.5625rem)'
        - width: 686
          height: 1029
          srcset: >-
            https://via.placeholder.com/686x1029 1x,
            https://via.placeholder.com/1372x2058 2x
          media: '(min-width: 35.625rem) and (max-width: 59.9375rem)'
        - width: 429
          height: 644
          srcset: >-
            https://via.placeholder.com/429x644 1x,
            https://via.placeholder.com/858x1288 2x
          media: '(min-width: 60rem) and (max-width: 79.9375rem)'
        - width: 440
          height: 660
          srcset: >-
            https://via.placeholder.com/440x660 1x,
            https://via.placeholder.com/880x1320 2x
          media: '(min-width: 80rem)'
      $tpl: elements/image

// src/components/elements/media-template/media-template.html.twig

<figure class="Media{% if class %} {{ class }}{% endif %}">
  {% if youtube_id %}
    {% set iframe = {
      title: caption ? caption : "YouTube video player",
      src: "https://www.youtube-nocookie.com/embed/" ~ youtube_id ~ "?rel=0",
      width: 16,
      height: 9,
      additional_attributes: 'allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"'
    } %}
    {% include "@patterns/content-embed/content-embed.html.twig" with {
      type: "iframe",
      service: "youtube",
      allow_id: "ContentEmbed-allow_" ~ youtube_id,
      content_id: "ContentEmbed-content_" ~ youtube_id,
      deny_id: "ContentEmbed-deny_" ~ youtube_id,
      iframe: iframe,
      as_element: true,
      cover_image: cover_image,
    } only %}
  {% elseif image %}
    {{ image }}
  {% endif %}
  {% if legal or caption %}
    <figcaption class="Media-info u-typo-copy-small">
      {% if legal %}
        <p class="Media-legal">{{ legal }}</p>
      {% endif %}
      {% if caption %}
        <p class="Media-caption">{{ caption }}</p>
      {% endif %}
    </figcaption>
  {% endif %}
</figure>