templates/includes/blocks/story-hero.html.twig line 1

  1. <div class="story-hero pt-hero {% if content.inverted %} story-hero--inverted {% endif %}" x-data="storyhero">
  2.     <div class="story-hero__background"></div>
  3.     <div class="story-hero__container">
  4.         {% if content.storyHeroPagina %}
  5.         {% if content.storyHeroSeoHeadlinePagina %}<{{ content.storyHeroSeoHeadlinePagina }}>{% endif %}
  6.             <div {% if content.inverted %} style="color: #fff;" {% endif %}
  7.                     class="pagina">
  8.                 {{ content.storyHeroPagina }}
  9.             </div>
  10.         {% if content.storyHeroSeoHeadlinePagina %}</{{ content.storyHeroSeoHeadlinePagina }}>{% endif %}
  11.         {% endif %}
  12.         {% if content.title %}
  13.             <{{ content.storyHeroSeoHeadlineTitle ? content.storyHeroSeoHeadlineTitle : 'h1' }} class="story-hero__title {% if content.storyHeroTitleMobile %}desktop-only {% endif %}" x-ref="title">
  14.                 {{ content.title|raw }}
  15.             </{{ content.storyHeroSeoHeadlineTitle ? content.storyHeroSeoHeadlineTitle : 'h1' }}>
  16.             {% if content.storyHeroTitleMobile %}
  17.                 <{{ content.storyHeroSeoHeadlineTitle ? content.storyHeroSeoHeadlineTitle : 'h1' }} class="story-hero__title mobile-only" x-ref="mobiletitle">
  18.                     {{ content.storyHeroTitleMobile|raw }}
  19.                 </{{ content.storyHeroSeoHeadlineTitle ? content.storyHeroSeoHeadlineTitle : 'h1' }}>
  20.             {% endif %}
  21.         {% endif %}
  22.         {% if content.text %}
  23.             <{{ content.storyHeroSeoHeadlineText ? content.storyHeroSeoHeadlineText : 'div' }} class="story-hero__text" x-ref="text">
  24.                 {{ content.text|raw }}
  25.             </{{ content.storyHeroSeoHeadlineText ? content.storyHeroSeoHeadlineText : 'div' }}>
  26.         {% endif %}
  27.         {% if content.date %}
  28.             <div class="story-hero__date" x-ref="date">
  29.                 {{ content.date|date("d. F Y") }}
  30.             </div>
  31.         {% endif %}
  32.     </div>
  33.     {% if content.storyHeroAuthor %}
  34.         <div class="story-hero__author" x-ref="author">
  35.             <div class="story-hero-author">
  36.                 {% if content.storyHeroAuthor.avatar %}
  37.                     {% set storyHeroAuthorImage = sulu_resolve_media(content.storyHeroAuthor.avatar, app.request.locale) %}
  38.                     <div class="story-hero-author__media">
  39.                         <img src ="{{ storyHeroAuthorImage|thumbnailUrl('320x') }}"
  40.                              alt="{{ storyHeroAuthorImage.description|striptags }}" class="story-hero-author__image">
  41.                     </div>
  42.                 {% endif %}
  43.                 <div class="story-hero-author__name">
  44.                     {{ content.storyHeroAuthor.firstName }} {{ content.storyHeroAuthor.lastName }}
  45.                 </div>
  46.                 {% if content.storyHeroAuthor.title %}
  47.                     <div class="story-hero-author__title">
  48.                         {{ content.storyHeroAuthor.title }}
  49.                     </div>
  50.                 {% endif %}
  51.             </div>
  52.         </div>
  53.     {% endif %}
  54.     {% if content.image %}
  55.         <div class="story-hero__media">
  56.             <img class="story-hero__image" src ="{{ content.image|thumbnailUrl('2880x') }}"
  57.                  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"
  58.                  alt="{{ content.storyHeroImageALT|default(content.image.description|striptags) }}" x-ref="image">
  59.         </div>
  60.     {% endif %}
  61. </div>