templates/Magazine/Includes/heroDetail.html.twig line 1

Open in your IDE?
  1. {% do jsConfig().add('lazyImg', true) %}
  2. {% set badge = article.topArticle ? (article.getAdvertismentNote() ?: ("magazine.top-article.badge")|trans) : false %}
  4. <div class="hero-magazine content-block {{ styleModifier | default(null) }}">
  5.     <figure class="hero-magazine__image embed-responsive hero-magazine__embed--full-width">
  6.         {% if article.teaserImage %}
  7.             {% set description = getImageDescription(article.teaserImage) %}
  8.             {{ article.teaserImage.thumbnail('hero-magazine--full-width').html({
  9.                 imgAttributes: {
  10.                     class: 'embed-responsive-item'
  11.                 },
  12.                 lowQualityPlaceholder: true,
  13.                 title: description,
  14.                 alt: description,
  15.             })|raw }}
  17.             {{ article.teaserImage.thumbnail('hero-magazine--full-width').html({
  18.                 imgAttributes: {
  19.                     class: 'embed-responsive-item'
  20.                 },
  21.                 title: description,
  22.                 alt: description
  23.             })|raw }}
  25.         {% endif %}
  26.     </figure>
  28.     <div class="hero-magazine__content-wrapper {{ badge ? 'hero-magazine__content-wrapper--has-badge' : '' }} ">
  29.             {% if badge %}
  30.                 {{ include('Magazine/Includes/triangle-badge.html.twig', {
  31.                     'text': badge,
  32.                     'position': 'right',
  33.                     'styleModifier': ''
  34.                 }) }}
  35.             {% endif %}
  37.             <div class="hero-magazine__content">
  38.                 {% if article.getCategories() and article.getCategories()[0] %}
  39.                     {% set articleTheme = getThemeByCategoryId(article.getCategories()[0].id) %}
  40.                     {% if articleTheme %}
  41.                         <div class="hero-magazine__top-headline">
  42.                             {{ articleTheme.name }}
  43.                         </div>
  44.                     {% endif %}
  45.                 {% endif %}
  47.                 <h1 class="js-toc__title hero-magazine__title">
  48.                     {{ article.title }}
  49.                 </h1>
  51.                 {% if article.articleDate or article.readingTime or article.categories is not empty %}
  52.                     <div class="hero-magazine__info-wrapper">
  53.                         {% if article.articleDate %}
  54.                             <time datetime="{{ article.articleDate | date('Y-m-d') }}" class="hero-magazine__date">
  55.                                 {{ article.articleDate | date('d.m.Y') }}
  56.                             </time>
  57.                         {% endif %}
  59.                         {% if article.readingTime or article.categories is not empty %}
  60.                             <ul class="hero-magazine__additional-infos list-inline">
  61.                                 {% if article.readingTime %}
  62.                                     <li class="hero-magazine__additional-infos__item list-inline-item">
  63.                                         <span class="icon icon-clock" aria-label="{{ 'sr.Lesezeit'|trans }}" title="{{ 'sr.Lesezeit'|trans }}"></span>
  64.                                         {{ article.readingTime }} {{ 'magazine.Minuten Lesezeit' | trans }}
  65.                                     </li>
  66.                                 {% endif %}
  67.                                 {% if article.categories is not empty %}
  68.                                     <li class="hero-magazine__additional-infos__item list-inline-item">
  69.                                         <span class="icon icon-tag" aria-label="{{ 'sr.Kategorie'|trans }}" title="{{ 'sr.Kategorie'|trans }}"></span>
  70.                                         {% for category in article.categories %}
  71.                                             {{ category.name }}{% if not loop.last %}, {% endif %}
  72.                                         {% endfor %}
  73.                                     </li>
  74.                                 {% endif %}
  75.                             </ul>
  76.                         {% endif %}
  77.                     </div>
  78.                 {% endif %}
  80.                 {% if article.author %}
  81.                     <div class="row row--gutter-width-10 hero-magazine__author">
  82.                         <div class="col-auto">
  83.                             <div class="embed-responsive embed-responsive-1by1 hero-magazine__author-img-wrapper">
  84.                                 {% if article.author.image %}
  85.                                     {{ article.author.image.thumbnail('hero-magazine__author').html({
  86.                                         imgAttributes: {
  87.                                             class: 'embed-responsive-item js-lazy-img'
  88.                                         },
  89.                                         lowQualityPlaceholder: true,
  90.                                     })|raw }}
  91.                                 {% endif %}
  92.                             </div>
  93.                         </div>
  94.                         <div class="col d-flex align-items-center">
  95.                             <a href="{{ linkGenerator().generate(article.author) }}" class="hero-magazine__author-title">
  96.                                 {{ ('magazine.author.' ~ article.author.gender) | trans }}: {{ article.author.name }}
  97.                             </a>
  98.                         </div>
  99.                     </div>
  100.                 {% endif %}
  101.             </div>
  102.         </div>
  103. </div>