templates/areas/content-wysiwyg-media/view.html.twig line 1

Open in your IDE?
  1. <section class="wysiwyg-with-medium {{ pimcore_checkbox('textLeft').data ? 'wysiwyg-with-medium--wysiwyg-left' : '' }} container {{ pimcore_checkbox('noTopSpace').data ? '' : 'content-block' }} js-fade-in {{ include('Layout/includes/editmode-box-classes.html.twig') }} {{ styleModifier | default(null) }} {{ moveUp | default(false) ? 'img-text-slide--move-up' : '' }} {{ not pimcore_input('anchorTitle').empty ? 'js-anchor-nav__item' : '' }}" {% if not pimcore_input('anchorTitle').empty %}data-anchor-nav-title="{{ pimcore_input('anchorTitle').frontend }}"{% endif %}>
  2.     {% embed 'Includes/editmode-settings.html.twig' %}
  3.         {% block additionalInfo %}
  4.             <div>
  5.                 <label>
  6.                     {{ pimcore_checkbox('textLeft') }}
  7.                     Text Left?
  8.                 </label>
  9.             </div>
  10.             <div>
  11.                 <label>
  12.                     {{ pimcore_checkbox('noTopSpace') }}
  13.                     No Top Space?
  14.                 </label>
  15.             </div>
  16.         {% endblock %}
  17.     {% endembed %}
  18.     <div class="row row--gutter-width-0 vertical-gutter vertical-gutter--3">
  19.         {% if pimcore_checkbox('textLeft').data %}
  20.             {{ include('areas/content-wysiwyg-media/Includes/text-section.html.twig', {'isWysiwygLeft': true}) }}
  21.         {% endif %}
  23.         <div class="col-md-6 vertical-gutter__item {{ pimcore_checkbox('textLeft').data ? 'offset-xl-1' : '' }}">
  24.             <div class="h-100 {{ pimcore_checkbox('textLeft').data ? 'container__break-right-half' : 'container__break-left-half' }}">
  25.                 <div class="h-100 wysiwyg-with-medium__media js-lightbox">
  26.                     <button class="wysiwyg-with-medium__zoom-btn">
  27.                         <span class="icon icon-search" aria-hidden="true"></span>
  28.                     </button>
  29.                     {% if editmode %}
  30.                         <div
  31.                            class="embed-responsive embed-responsive-9by6 embed-responsive-cover">
  32.                             {{ pimcore_image('image', {
  33.                                 thumbnail: 'wysiwyg-with-media',
  34.                                 imgAttributes: {
  35.                                     class: 'js-lazy-img embed-responsive-item'
  36.                                 },
  37.                                 lowQualityPlaceholder: true,
  38.                             }) }}
  39.                         </div>
  40.                     {% elseif not pimcore_image('image').empty %}
  41.                         {% do jsConfig().add('lightbox', true) %}
  43.                         {% set lightBoxSrc = pimcore_image('image').image.thumbnail('lightbox') %}
  44.                         {% set description = getImageDescription(pimcore_image('image').image) %}
  45.                         <a href="{{ lightBoxSrc }}"
  46.                            data-sub-html="{{ description }}"
  47.                            class="js-lightbox__item embed-responsive embed-responsive-9by6 embed-responsive-cover">
  48.                             {{ pimcore_image('image').image.thumbnail('wysiwyg-with-media').html({
  49.                                 imgAttributes: {
  50.                                     class: 'js-lazy-img embed-responsive-item',
  51.                                     title: description|default(''),
  52.                                     alt: description|default(''),
  53.                                 },
  54.                                 lowQualityPlaceholder: true,
  55.                             })|raw }}
  56.                         </a>
  57.                     {% endif %}
  59.                 </div>
  60.             </div>
  62.         </div>
  64.         {% if not pimcore_checkbox('textLeft').data %}
  65.             {{ include('areas/content-wysiwyg-media/Includes/text-section.html.twig', {'isWysiwygLeft': false}) }}
  66.         {% endif %}
  67.     </div>
  68. </section>