templates/includes/blocks/big-image-teaser.html.twig line 1

  1. <div class="big-image-teaser {% if content.inverted %} big-image-teaser--inverted {% endif %}
  2.            {{ content.top }} {{ content.bottom }}" x-data="bigimageteaser">
  3.     {% if content.image %}
  4.         {% set image = content.image %}
  5.         <div class="big-image-teaser__media">
  6.             <img src ="{{ content.image|thumbnailUrl('2880x') }}"
  7.                  srcset ="{{ content.image|thumbnailUrl('320x') }} 320w, {{ content.image|thumbnailUrl('640x') }} 640w, {{ content.image|thumbnailUrl('720x') }} 720w, {{ content.image|thumbnailUrl('1280x') }} 1280w, {{ content.image|thumbnailUrl('1440x') }} 1440w, {{ content.image|thumbnailUrl('2048x') }} 2048w"
  8.                  alt="{{ content.bigImageTeaserImageALT|default(content.image.description|striptags) }}" x-ref="image" sizes="(min-width: 1440px) 1440px, 100vw">
  9.         </div>
  10.     {% endif %}
  11.     <div class="big-image-teaser__container">
  12.         <div class="big-image-teaser__title" x-ref="title">
  13.             {% if content.bigImageTeaserPagina %}
  14.             {% if content.bigImageTeaserSeoHeadlinePagina %}<{{ content.bigImageTeaserSeoHeadlinePagina }}>{% endif %}
  15.                 <div {% if content.inverted %} style="color: #fff;" {% endif %}
  16.                         class="pagina">
  17.                     {{ content.bigImageTeaserPagina }}
  18.                 </div>
  19.             {% if content.bigImageTeaserSeoHeadlinePagina %}</{{ content.bigImageTeaserSeoHeadlinePagina }}>{% endif %}
  20.             {% endif %}
  21.             <div {% if content.bigImgTitleMobile %} class="desktop-only" {% endif %}>
  22.                     {{ content.title|raw }}
  23.             </div>
  24.         </div>
  25.         {% if content.bigImgTitleMobile %}
  26.             <div class="big-image-teaser__title mobile-only" x-ref="mobiletitle">
  27.                 {{ content.bigImgTitleMobile|raw }}
  28.             </div>
  29.         {% endif %}
  30.         <div class="big-image-teaser__content" x-ref="content">
  31.             {{ content.text|raw }}
  32.         </div>
  33.         <div class="big-image-teaser__actions" x-ref="actions">
  34.             {% if content.bigImageTeaserActionLink != null %}
  35.                 {% if content.bigImageTeaserButtonType == 'box' %}
  36.                     <a href="{{ content.bigImageTeaserActionLink }}"
  37.                        class="button button--{{ content.bigImageTeaserButtonColor }}">
  38.                         <span class="button__inner">
  39.                             {{ content.bigImageTeaserButtonLabel }}
  40.                         </span>
  41.                     </a>
  42.                 {% elseif content.bigImageTeaserButtonType == 'text' %}
  43.                     <a href="{{ content.bigImageTeaserActionLink }}"
  44.                        class="text-button text-button--{{ content.bigImageTeaserTextButtonColor }}">
  45.                         {{ content.bigImageTeaserButtonLabel }}
  46.                         <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16">
  47.                             <path d="M.5 8.5h15M10.5 3.5l5 5-5 5" stroke="currentColor" stroke-miterlimit="10"
  48.                                   stroke-linecap="round" stroke-linejoin="round"/>
  49.                         </svg>
  50.                     </a>
  51.                 {% endif %}
  52.             {% endif %}
  53.         </div>
  54.     </div>
  55. </div>