templates/areas/media-tile-gallery/view.html.twig line 1

Open in your IDE?
  1. <section class=" content-block js-fade-in {{ include('Layout/includes/editmode-box-classes.html.twig') }} {{ styleModifier | default(null) }} {{ 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('titleBlockCentered') }} Center Headline?
  7.                 </label>
  8.             </div>
  9.             <div>
  10.                 <label>
  11.                     Images
  12.                 </label>
  13.                 {{ pimcore_relations('gallery', {'types': ['asset'], 'subtyps': ['image'], 'title': 'Images'}) }}
  14.             </div>
  15.         {% endblock %}
  16.     {% endembed %}
  17.     <div class="container-sm container">
  18.         {{ include('Includes/title-block-editable.html.twig') }}
  19.     </div>
  21.     <div class="overflow-hidden">
  22.         <div class="tile-gallery__outer-wrapper">
  23.             <div class="">
  24.                 <div class="tile-gallery js-lightbox {{ styleModifier | default(null) }}">
  25.                     <div class="tile-gallery__container position-relative js-scrolling-row">
  26.                         <div class="tile-gallery__wrapper row scrolling-row scrolling-row--invisible-scrollbar js-scrolling-row__row">
  28.                             {% for image in pimcore_relations('gallery').elements %}
  29.                                 <div class="col-md-auto col-5 scrolling-row__item js-scrolling-row__item">
  31.                                     {% do jsConfig().add('lightbox', true) %}
  33.                                     {% set lightBoxSrc = image.thumbnail('lightbox') %}
  34.                                     {% set description = getImageDescription(image, true) %}
  35.                                     <figure class="tile-gallery-item">
  36.                                         <button class="tile-gallery__zoom-btn">
  37.                                             <span class="icon icon-expand" aria-hidden="true"></span>
  38.                                         </button>
  39.                                         <a href="{{ lightBoxSrc }}"
  40.                                            data-sub-html="{{ description ?: '' }}"
  41.                                            class="js-lightbox__item embed-responsive-1by1 embed-responsive tile-gallery-item__img-wrapper">
  42.                                             {{ image.thumbnail('tile-gallery-item').html({
  43.                                                 imgAttributes: {
  44.                                                     class: 'js-lazy-img embed-responsive-item',
  45.                                                     title: description|default(''),
  46.                                                     alt: description|default('')
  47.                                                 },
  48.                                                 lowQualityPlaceholder: true
  49.                                             }) | raw }}
  50.                                         </a>
  52.                                         {% if description %}
  53.                                             <figcaption>
  54.                                                 {{ description }}
  55.                                             </figcaption>
  56.                                         {% endif %}
  57.                                     </figure>
  58.                                 </div>
  59.                             {% endfor %}
  60.                         </div>
  63.                         <div class="tile-gallery__navigation">
  64.                             <button class="tile-gallery__btn tile-gallery__btn--prev js-scrolling-row__prev"><span class="icon icon-arrow-right" aria-label="Previous"></span></button>
  65.                             <button class="tile-gallery__btn tile-gallery__btn--next js-scrolling-row__next"><span class="icon icon-arrow-right" aria-label="Next"></span></button>
  66.                         </div>
  68.                     </div>
  69.                 </div>
  70.             </div>
  71.         </div>
  72.     </div>
  74. </section>