templates/Components/media/media-block.html.twig line 1

Open in your IDE?
  1. <article class="d-flex flex-column media-block" data-opened-modal-id="{{ article.id }}">
  2.     {% if article.video_source is defined %}
  3.         <a href="" class="position-relative" data-toggle="modal" data-target="#Video-{{ article.id }}">
  4.             {% if article.video_source.type == 'asset' %}
  5.                 <video width="100%" poster="{{ article.video_source.poster is defined and article.video_source.poster ? article.video_source.poster.getThumbnail('article-news') }}">
  6.                     <source src="{{ article.video_source.data }}" type="video/mp4">
  7.                     Your browser does not support the video tag.
  8.                 </video>
  9.                 <div style="position: absolute; top:50%; left:50%; transform: translate(-50%,-50%);">
  10.                     {{ block('videoPlayIcon', 'svg-icons/svg-icons.html.twig') }}
  11.                 </div>
  12.             {% else %}
  13.             <!--* If featured imaged is uploaded then override default poster image from youtube api-->
  14.                 {% if article.feature_image is defined and article.feature_image %}
  15.                     {{ article.feature_image is defined and article.feature_image ? article.feature_image.getThumbnail('article-news').getHtml({width: '100%', height: '100%'}) | raw }}
  16.                 {% else %}
  17.                     <img src="https://img.youtube.com/vi/{{ article.video_source.data }}/maxresdefault.jpg" alt="Youtube poster image" class="w-100">
  18.                 {% endif %}
  20.                 <div style="position: absolute; top:50%; left:50%; transform: translate(-50%,-50%);">
  21.                     {{ block('videoPlayIcon', 'svg-icons/svg-icons.html.twig') }}
  22.                 </div>
  23.             {% endif %}
  24.         </a>
  25.     {% else %}
  26.         <a href="{{ article.href is defined ? article.href : 'javascript:;' }}" class="position-relative media-block-image">
  27.             <div class="media-block-overlay"></div>
  28.             <img src="{{ article.feature_image is defined ? article.feature_image.getThumbnail('article-news') }}" alt="{{ article.title }}" class="img-fluid">
  29.         </a>
  30.     {% endif %}
  32.     <div class="d-flex flex-column mt-2 mt-lg-2 mt-md-2">
  33.         <div class="{{ article.published_at is defined and article.published_at ? 'd-flex' : 'd-none' }}">
  34.            {{ block('smallClock', 'svg-icons/svg-icons.html.twig') }}
  35.             <small class="ml-2 ml-lg-2 ml-md-2 text-grayLight40">
  36.                 {{ article.published_at is defined ? article.published_at }}
  37.             </small>
  38.         </div>
  39.         <a href="{{ article.href is defined ? article.href : 'javascript:;' }}" class="text-navyBlue"
  40.             {{ article.video_source is defined ? "data-toggle=modal data-target=#Video-" ~ article.id  }}>
  41.             <h4 class="mt-2 mt-lg-2 mt-md-2 font-weight-bold mb-2 mb-lg-2 mb-md-2">
  42.                 {{ article.title is defined ? article.title }}
  43.             </h4>
  44.         </a>
  45.         <p class="text-deepGray">
  46.             {{ article.content is defined ? article.content | u.truncate(160) | raw  }}
  47.         </p>
  48.     </div>
  49. </article>