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

Open in your IDE?
  1. <section class="wysiwyg-area content-block js-fade-in
  2. {{ include('Layout/includes/editmode-box-classes.html.twig') }} {{ styleModifier | default(null) }} {{ not pimcore_input('anchorTitle').empty ? 'js-anchor-nav__item' : '' }}"
  3.          {% if not pimcore_input('anchorTitle').empty %}data-anchor-nav-title="{{ pimcore_input('anchorTitle').frontend }}"{% endif %}>
  4.     {% embed 'Includes/editmode-settings.html.twig' %}
  5.         {% block additionalInfo %}
  6.             <div>
  7.                 <label>
  8.                     {{ pimcore_checkbox('titleBlockCentered') }} Center Headline?
  9.                 </label>
  10.             </div>
  11.         {% endblock %}
  12.     {% endembed %}
  13.     <div class="container container-sm">
  14.         {{ include('Includes/title-block-editable.html.twig') }}
  16.         <div class="wysiwyg-area__content wysiwyg">
  17.             {{ pimcore_wysiwyg('text') }}
  18.         </div>
  20.         {{ include('Includes/button-row.html.twig', {
  21.             ulClass: pimcore_checkbox('titleBlockCentered').checked ? 'wysiwyg-area__buttons vertical-gutter--default text-center' : null,
  22.         }) }}
  24.         {% if editmode %}
  25.             {% set thumb = 'wysiwyg-area--three-images' %}
  26.             {% set embed = 'embed-responsive-1by1' %}
  27.             {% set col = '4' %}
  28.             {% set containerSize = 'md' %}
  29.         {% else %}
  30.             {% set imageCount = 0 %}
  31.             {% if not pimcore_image('image1').empty %}
  32.                 {% set imageCount = imageCount + 1 %}
  33.             {% endif %}
  34.             {% if not pimcore_image('image2').empty %}
  35.                 {% set imageCount = imageCount + 1 %}
  36.             {% endif %}
  37.             {% if not pimcore_image('image3').empty %}
  38.                 {% set imageCount = imageCount + 1 %}
  39.             {% endif %}
  40.             {% set thumb = 'wysiwyg-area' %}
  41.             {% set embed = 'embed-responsive-9by5' %}
  42.             {% set col = '12' %}
  43.             {% set containerSize = 'sm' %}
  44.             {% if imageCount >= 3 %}
  45.                 {% set thumb = 'wysiwyg-area--three-images' %}
  46.                 {% set embed = 'embed-responsive-1by1' %}
  47.                 {% set col = '4' %}
  48.                 {% set containerSize = 'md' %}
  49.             {% elseif imageCount >= 2 %}
  50.                 {% set thumb = 'wysiwyg-area--two-images' %}
  51.                 {% set embed = 'embed-responsive-4by3' %}
  52.                 {% set col = '6' %}
  53.                 {% set containerSize = 'md' %}
  54.             {% endif %}
  55.         {% endif %}
  57.         {% if editmode or imageCount > 0 %}
  58.             {% do jsConfig().add('lightbox', true) %}
  60.             <div class="js-lightbox mt-4 mt-md-5">
  61.                 <div class="row">
  62.                     {% if editmode or not pimcore_image('image1').empty %}
  63.                         <div class="col-{{ col }}">
  64.                             {% set lightBoxSrc = not pimcore_image('image1').empty ? pimcore_image('image1').image.thumbnail('lightbox') : '' %}
  66.                             {% set description = getImageDescription(pimcore_image('image1').image) %}
  67.                             <figure class="wysiwyg-area__image">
  68.                                 <a href="{{ lightBoxSrc | default("") }}"  data-sub-html="{{ description ?: '' }}"
  69.                                    class="js-lightbox__item embed-responsive wysiwyg-area__image {{ embed }}">
  70.                                     {{ pimcore_image('image1', {
  71.                                         thumbnail: thumb,
  72.                                         imgAttributes: {
  73.                                             class: 'js-lazy-img embed-responsive-item js-fade-in'
  74.                                         },
  75.                                         lowQualityPlaceholder: true,
  76.                                     }) }}
  78.                                     {% do jsConfig().add('lazyImg', true) %}
  79.                                 </a>
  81.                                 {% if description %}
  82.                                     <figcaption>
  83.                                         {{ description }}
  84.                                     </figcaption>
  85.                                 {% endif %}
  86.                             </figure>
  87.                         </div>
  88.                     {% endif %}
  89.                     {% if editmode or not pimcore_image('image2').empty %}
  90.                         <div class="col-{{ col }}">
  91.                             {% set lightBoxSrc = not pimcore_image('image2').empty ? pimcore_image('image2').image.thumbnail('lightbox') : '' %}
  93.                             <figure class="wysiwyg-area__image">
  94.                                 {% set description = getImageDescription(pimcore_image('image2').image) %}
  95.                                 <a href="{{ lightBoxSrc | default("") }}" data-sub-html="{{ description ?: '' }}"
  96.                                    class="js-lightbox__item embed-responsive wysiwyg-area__image {{ embed }}">
  97.                                     {{ pimcore_image('image2', {
  98.                                         thumbnail: thumb,
  99.                                         imgAttributes: {
  100.                                             class: 'js-lazy-img embed-responsive-item js-fade-in'
  101.                                         },
  102.                                         lowQualityPlaceholder: true,
  103.                                     }) }}
  105.                                     {% do jsConfig().add('lazyImg', true) %}
  106.                                 </a>
  107.                                 {% if description %}
  108.                                     <figcaption>
  109.                                         {{ description }}
  110.                                     </figcaption>
  111.                                 {% endif %}
  112.                             </figure>
  113.                         </div>
  114.                     {% endif %}
  115.                     {% if editmode or not pimcore_image('image3').empty %}
  116.                         <div class="col-{{ col }}">
  117.                             {% set lightBoxSrc = not pimcore_image('image3').empty ? pimcore_image('image3').image.thumbnail('lightbox') : '' %}
  119.                             <figure class="wysiwyg-area__image">
  120.                                 {% set description = getImageDescription(pimcore_image('image3').image) %}
  121.                                 <a href="{{ lightBoxSrc | default("") }}" data-sub-html="{{ description ?: '' }}"
  122.                                    class="js-lightbox__item embed-responsive wysiwyg-area__image {{ embed }}">
  123.                                     {{ pimcore_image('image3', {
  124.                                         thumbnail: thumb,
  125.                                         imgAttributes: {
  126.                                             class: 'js-lazy-img embed-responsive-item js-fade-in'
  127.                                         },
  128.                                         lowQualityPlaceholder: true,
  129.                                     }) }}
  131.                                     {% do jsConfig().add('lazyImg', true) %}
  132.                                 </a>
  134.                                 {% if description %}
  135.                                     <figcaption>
  136.                                         {{ description }}
  137.                                     </figcaption>
  138.                                 {% endif %}
  139.                             </figure>
  140.                         </div>
  141.                     {% endif %}
  142.                 </div>
  143.             </div>
  144.         {% endif %}
  146.     </div>
  148. </section>