templates/includes/blocks/text-media.html.twig line 1

  1. <div class="text-media {% if content.reverse %} text-media--reverse {% endif%} {% if content.inverted %} text-media--inverted {% endif %}{{ content.top }} {{ content.bottom }}" x-data="textmedia">
  2.     <div class="text-media__container">
  3.         {% if content.image %}
  4.             <div class="text-media__media">
  5.                 {% if content.imageLink %}
  6.                     <a href="{{ content.imageLink }}" target="_blank" class="text-media__media">
  7.                     {% endif %}
  8.                     <img class="text-media__image" src ="{{ content.image|thumbnailUrl('2880x') }}"
  9.                          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" alt="{{ content.textMediaImageALT|default(content.image.description|striptags) }}" x-ref="image"
  10.                          sizes="(min-width: 1440px) 720px, (min-width: 768px) 50vw, 100vw">
  11.                     {% if content.imageLink %}
  12.                     </a>
  13.                 {% endif %}
  14.             </div>
  15.         {% endif %}
  17.         <div class="text-media__content">
  18.             <div class="text-media__title" x-ref="title">
  19.                 {% if content.textMediaPagina %}
  20.                 {% if content.textMediaSeoHeadlinePagina %}<{{ content.textMediaSeoHeadlinePagina }}>{% endif %}
  21.                     <div class="pagina">
  22.                         {{ content.textMediaPagina }}
  23.                     </div>
  24.                 {% if content.textMediaSeoHeadlinePagina %}</{{ content.textMediaSeoHeadlinePagina }}>{% endif %}
  25.                 {% endif %}
  26.                 <div {% if content.textMediaTitleMobile %} class="desktop-only"{% endif %}>
  27.                     {{ content.textMediaTitleDesktop|raw }}
  28.                 </div>
  29.             </div>
  30.             {% if content.textMediaTitleMobile %}
  31.                 <div class="text-media__title mobile-only" x-ref="mobiletitle">
  32.                     {{ content.textMediaTitleMobile|raw }}
  33.                 </div>
  34.             {% endif %}
  36.             <div class="text-media__text" x-ref="text">
  37.                 {{ content.text|raw }}
  38.             </div>
  39.             {% if content.textMediaActionLink != null %}
  40.                 <div class="text-media__actions" x-ref="actions">
  41.                     {% if content.textMediaButtonType == 'box' %}
  42.                         <a href="{{ content.textMediaActionLink }}"
  43.                            class="button button--{{ content.textMediaButtonColor }}
  44.                               button--size-{{ content.textMediaButtonSize }}">
  45.                             <span class="button__inner">
  46.                                 {{ content.textMediaButtonLabel }}
  47.                             </span>
  48.                         </a>
  49.                     {% elseif content.textMediaButtonType == 'text' %}
  50.                         <a href="{{ content.textMediaActionLink }}"
  51.                            class="text-button text-button--{{ content.textMediaTextButtonColor }}
  52.                                  {% if content.uppercase %} uppercase {% endif %}">
  53.                             {{ content.textMediaButtonLabel }}
  54.                             <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16">
  55.                                 <path d="M.5 8.5h15M10.5 3.5l5 5-5 5" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
  56.                             </svg>
  57.                         </a>
  58.                     {% endif %}
  59.                 </div>
  60.             {% endif %}
  61.         </div>
  62.     </div>
  63. </div>