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

Open in your IDE?
  1. {% set video = article.video %}
  2. {% set videoType = article.video.type | default ('') %}
  3. {% set button = button | default(false) %}
  4. {% set title = article.title %}
  5. {% set text = article.shortDescription %}
  6. {% set link = linkGenerator().generate(article, {'relative': relative|default(false), 'document': document}) %}
  8. <section class="article-teaser {{ video ? 'js-lightbox' : '' }} {{ button ? 'stretch-link isCursor' : '' }} {{ areaWide ? 'article-teaser--wide' : '' }}"
  9.     {% if video %}
  10.     data-lightbox-video="true"
  11.     {% endif %}>
  13.     {% do jsConfig().add('lazyImg', true) %}
  14.     {% do jsConfig().add('goToLink', true) %}
  16.     {% if not video %}
  17.         <div class="article-teaser__img-wrapper">
  18.             <div class="embed-responsive {{ areaWide ? 'article-teaser__embed--wide' : 'article-teaser__embed' }}">
  19.                 {% if article.teaserImage %}
  20.                     {{ article.teaserImage.getThumbnail(areaWide ? 'article-teaser--wide' : 'article-teaser').getHtml({
  21.                         imgAttributes: {
  22.                             'class' : 'embed-responsive-item js-lazy-img article-teaser__img'
  23.                         },
  24.                         'lowQualityPlaceholder' : true})
  25.                     | raw
  26.                     }}
  27.                 {% endif %}
  28.             </div>
  30.             {% if article.topArticle  %}
  31.                 {{ include('Magazine/Includes/triangle-badge.html.twig', {
  32.                     'text': article.getAdvertismentNote() ?: ("magazine.top-article.badge" | trans),
  33.                     'position': 'left',
  34.                     'styleModifier': ''
  35.                 }) }}
  36.             {%  endif %}
  37.         </div>
  38.     {% else %}
  39.         {% do jsConfig().add('lightbox', true) %}
  40.         {% do jsConfig().add('video', true) %}
  41.         <div data-html="#videoLightbox-{{ article.id }}" data-sub-html="<div class='lightbox-content__title'>{{ article.videoText }}</div><div class='lightbox-content__text'>{{ article.videoDescription | nl2br }}</div>"
  42.              class="lightbox-video js-lightbox__item {{ videoType == 'asset' ? 'lg-html5': ''}}">
  44.             <div class="article-teaser__img-wrapper">
  45.                 <div class="embed-responsive {{ areaWide ? 'article-teaser__embed--wide' : 'article-teaser__embed' }}">
  46.                     {% if article.teaserImage %}
  47.                         {{ article.teaserImage.getThumbnail(areaWide ? 'article-teaser--wide' : 'article-teaser').getHtml({
  48.                             imgAttributes: {
  49.                                 'class' : 'embed-responsive-item js-lazy-img article-teaser__img'
  50.                             },
  51.                             'lowQualityPlaceholder' : true})
  52.                         | raw
  53.                         }}
  54.                     {% endif %}
  55.                 </div>
  57.                 {% if article.topArticle  %}
  58.                     {{ include('Magazine/Includes/triangle-badge.html.twig', {
  59.                         'text': article.topArticle.getAdvertismentNote() ?: ("magazine.top-article.badge" | trans),
  60.                         'position': 'left',
  61.                         'styleModifier': ''
  62.                     }) }}
  63.                 {%  endif %}
  65.                 <button type="button"
  66.                         class="video__play-btn article-teaser__play-btn"
  67.                         aria-label="{{ 'sr.Open Video'|trans }}"
  68.                         title="{{ 'sr.Open Video'|trans }}">
  69.                     <span class="icon icon-play video__play-btn__icon" aria-hidden="true"></span>
  70.                 </button>
  71.             </div>
  72.         </div>
  74.         <div id="videoLightbox-{{ article.id }}" style="display: none;">
  75.             {% if videoType == 'asset' %}
  76.                 {% set options = {
  77.                     'imagethumbnail': 'lightbox-video-poster',
  78.                     'width': '100%',
  79.                     'height': '100%',
  80.                     'attributes': {
  81.                         'controls': 'controls',
  82.                         'preload': 'none',
  83.                         'class': 'lg-video-object lg-html5 video-js vjs-default-skin'
  84.                     }
  85.                 } %}
  87.                 {% set displayVideo = elements_videoHelper().getVideoTag(video, options) %}
  89.                 {{ displayVideo | raw }}
  90.             {% else %}
  91.                 {% if videoType == 'youtube' %}
  92.                     {% set src = "https://www.youtube-nocookie.com/embed/" ~ elements_videoHelper().getRealYoutubeId(video.data) %}
  93.                 {% endif %}
  94.                 {% if videoType == 'vimeo' %}
  95.                     {% set src = "https://player.vimeo.com/video/" ~ elements_videoHelper().getRealVimeoId(video.data) %}
  96.                 {% endif %}
  97.                 {% if videoType == 'dailymotion' %}
  98.                     {% set src = "https://www.dailymotion.com/embed/video/" ~ video.data %}
  99.                 {% endif %}
  101.                 <iframe class="js-lazy-iframe lightbox-video__iframe"
  102.                         data-src="{{ src|default('') }}"
  103.                         frameborder="0"
  104.                         allow="autoplay; encrypted-media"
  105.                         allowfullscreen></iframe>
  107.             {% endif %}
  108.         </div>
  109.     {% endif %}
  111.     <div class="article-teaser__body">
  112.         <h3 class="article-teaser__title">
  113.             {# if article-teaser has video - no button and no detail-page #}
  114.             {% if not video %}
  115.                 <a href="{{ link }}" class="stretch-link__link">
  116.                     {{ title }}
  117.                 </a>
  118.             {% else %}
  119.                 {{ title }}
  120.             {% endif %}
  121.         </h3>
  123.         <div class="article-teaser__content">
  124.             {{ text }}
  125.         </div>
  127.         {% if not video %}
  128.             <a href="{{ link }}" class="article-teaser__btn btn btn-outline-primary">
  129.                 {{ 'magazine.Artikel lesen' | trans }}
  130.             </a>
  131.         {% endif %}
  132.     </div>
  133. </section>