templates/Magazine/DetailBlocks/BlogArticleWysiwygMedia.html.twig line 1

Open in your IDE?
  1. <section class="wysiwyg-with-medium {{ not block.textRight ? 'wysiwyg-with-medium--wysiwyg-left' : '' }} container content-block js-fade-in {{ styleModifier | default(null) }}">
  2.     <div class="container container-sm">
  4.         <div class="row row--gutter-width-0 vertical-gutter vertical-gutter--3">
  5.             {% if not block.textRight %}
  6.                 {{ _self.wysiwyg(block.descWysiwyg, block.headline, block.subtitle, true) }}
  7.             {% endif %}
  9.             <div class="col-md-6 vertical-gutter__item {{ not block.textRight ? 'offset-xl-1' : '' }}">
  10.                 <div class="h-100 {{ not block.textRight ? 'container__break-right-half' : 'container__break-left-half' }}">
  11.                     <div class="h-100 wysiwyg-with-medium__media js-lightbox">
  12.                         <button class="wysiwyg-with-medium__zoom-btn">
  13.                             <span class="icon icon-search" aria-hidden="true"></span>
  14.                         </button>
  16.                         {% if block.image %}
  17.                             {% do jsConfig().add('lightbox', true) %}
  19.                             {% set lightBoxSrc = block.image.thumbnail('lightbox') %}
  21.                             <a href="{{ lightBoxSrc }}"
  22.                                class="js-lightbox__item embed-responsive embed-responsive-9by6 embed-responsive-cover">
  23.                                 {{ block.image.thumbnail('wysiwyg-with-media').html({
  24.                                     imgAttributes: {
  25.                                         class: 'js-lazy-img embed-responsive-item'
  26.                                     },
  27.                                     lowQualityPlaceholder: true,
  28.                                 })|raw }}
  29.                             </a>
  30.                         {% endif %}
  32.                     </div>
  33.                 </div>
  35.             </div>
  37.             {% if block.textRight %}
  38.                 {{ _self.wysiwyg(block.descWysiwyg, block.headline, block.subtitle, false) }}
  39.             {% endif %}
  40.         </div>
  42.     </div>
  44. </section>
  46. {% macro wysiwyg(content, title, subtitle, isWysiwygLeft) %}
  47.     <div class="col-xl-5 col-md-6 vertical-gutter__item order-1 order-sm-0 d-flex flex-column justify-content-center {{ isWysiwygLeft ? '' : 'ml-auto' }}">
  48.         <div class="wysiwyg-with-medium__inner">
  49.             {{ include('Includes/title-block.html.twig', {
  50.                 title: title,
  51.                 subtitle: subtitle,
  52.                 isCentered: false
  53.             }, with_context = false) }}
  55.             <div class="wysiwyg-with-medium__content wysiwyg">
  56.                 {{ content | raw }}
  57.             </div>
  58.         </div>
  59.     </div>
  60. {% endmacro %}