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

Open in your IDE?
  1. <section class="horizontal-img-text-teaser stretch-link isCursor {{ styleModifier | default(null) }}">
  2.     <div class="row row--gutter-width-0">
  3.         {% if not isTextRight %}
  4.             {{ _self.teaserBody(article, isTextRight) }}
  5.         {% endif %}
  7.         {{ _self.teaserImg(article, isTextRight) }}
  9.         {% if isTextRight %}
  10.             {{ _self.teaserBody(article, isTextRight) }}
  11.         {% endif %}
  12.     </div>
  13. </section>
  15. {% macro teaserBody(article, isTextRight) %}
  16.     <div class="col-md-6 position-static {{ isTextRight ? '' : 'order-2 order-md-1' }}">
  17.         <div class="horizontal-img-text-teaser__body">
  18.             <div class="row justify-content-center align-items-center">
  19.                 <div class="col horizontal-img-text-teaser__top-headline">
  20.                     {% if article.getCategories() and article.getCategories()[0] %}
  21.                         {% set articleTheme = getThemeByCategoryId(article.getCategories()[0].id) %}
  22.                         {% if articleTheme %}
  23.                             {{ articleTheme.name }}
  24.                         {% endif %}
  25.                     {% endif %}
  26.                 </div>
  27.                 {% if article.articleDate %}
  28.                     <div class="col-auto text-right">
  29.                         <time class="horizontal-img-text-teaser__date" datetime="{{  article.articleDate | date('Y-m-d') }}">
  30.                             {{  article.articleDate | date('d.m.Y') }}
  31.                         </time>
  32.                     </div>
  33.                 {% endif %}
  34.             </div>
  36.             {% if article.readingTime or article.categories is not empty %}
  37.                 <ul class="horizontal-img-text-teaser__additional-infos list-inline">
  38.                     {% if article.readingTime %}
  39.                         <li class="horizontal-img-text-teaser__additional-infos__item list-inline-item">
  40.                             <span class="icon icon-clock" aria-label="{{ 'sr.Lesezeit'|trans }}" title="{{ 'sr.Lesezeit'|trans }}"></span>
  41.                             {{ article.readingTime }} {{ 'magazine.Minuten Lesezeit' | trans }}
  42.                         </li>
  43.                     {% endif %}
  44.                     {% if article.categories is not empty %}
  45.                         <li class="horizontal-img-text-teaser__additional-infos__item list-inline-item">
  46.                             <span class="icon icon-tag" aria-label="{{ 'sr.Kategorie'|trans }}"  title="{{ 'sr.Kategorie'|trans }}"></span>
  47.                             {% for category in article.categories %}
  48.                                 {{ category.name }}{% if not loop.last %}, {% endif %}
  49.                             {% endfor %}
  50.                         </li>
  51.                     {% endif %}
  52.                 </ul>
  53.             {% endif %}
  55.             <h3 class="horizontal-img-text-teaser__title">
  56.                 <a href="{{ linkGenerator().generate(article) }}" class="stretch-link__link">
  57.                     {{ article.title }}
  58.                 </a>
  59.             </h3>
  61.             {% if article.shortDescription %}
  62.                 <div class="wysiwyg horizontal-img-text-teaser__content">
  63.                     {{ article.shortDescription | raw }}
  64.                 </div>
  65.             {% endif %}
  67.             <a href="{{ linkGenerator().generate(article) }}" class="btn btn-outline-primary horizontal-img-text-teaser__btn">
  68.                 {{ 'magazine.Artikel lesen'|trans }}
  69.             </a>
  70.         </div>
  71.     </div>
  72. {% endmacro %}
  74. {% macro teaserImg(article, isTextRight) %}
  75.     <div class="col-md-6 {{ isTextRight ? '' : 'order-1 order-md-2' }}">
  76.         {% do jsConfig().add('lazyImg', true) %}
  77.         <div class="horizontal-img-text-teaser__img-wrapper">
  78.             {% if article.topArticle %}
  79.                 {{ include('Magazine/Includes/triangle-badge.html.twig', {
  80.                     'text': article.getAdvertismentNote() ?: ("magazine.top-article.badge" | trans),
  81.                     'position': isTextRight ? 'left' : 'right',
  82.                 }) }}
  83.             {% endif %}
  85.             <div class="embed-responsive embed-responsive-3by2">
  86.                 {% if article.teaserImage %}
  87.                     {{ article.teaserImage.thumbnail('horizontal-img-text-teaser').html({
  88.                         imgAttributes: {
  89.                             class: 'embed-responsive-item js-lazy-img horizontal-img-text-teaser__img'
  90.                         },
  91.                         lowQualityPlaceholder: true,
  92.                     })|raw }}
  93.                 {% endif %}
  94.             </div>
  95.         </div>
  96.     </div>
  97. {% endmacro %}