templates/areas/media-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.                     {{ pimcore_relations('gallery', {'types': ['asset'], 'subtyps': ['image']}) }}
  13.                 </label>
  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-x-hidden ">
  22.         <div class="container-sm container">
  23.             <div class="js-render-template" style="min-height: 1px;">
  24.                 <template class="js-render-template__template">
  25.                     <div class="js-gallery gallery">
  26.                         <div class="swiper-container js-gallery__slider gallery__container">
  27.                             <div class="swiper-wrapper gallery__wrapper">
  29.                                 {% for image in pimcore_relations('gallery').elements %}
  30.                                     <div class="swiper-slide gallery-swiper-slide">
  31.                                         <div class="gallery-item">
  32.                                             <div class="gallery-item__counter">
  33.                                                 <span class="text-primary">{{ loop.index }}</span>/{{ pimcore_relations('gallery').elements|length }}
  34.                                             </div>
  36.                                             <div class="embed-responsive-16by9 embed-responsive gallery-item__img-wrapper">
  37.                                                 {% set description = getImageDescription(image, true) %}
  38.                                                 {% set title = description %}
  39.                                                 {% set alt = description %}
  40.                                                 {{ image.thumbnail('gallery-item').html({
  41.                                                     imgAttributes: {
  42.                                                         class: 'js-lazy-img embed-responsive-item',
  43.                                                         title: title,
  44.                                                         alt: alt
  45.                                                     },
  46.                                                     lowQualityPlaceholder: true
  47.                                                 }) | raw }}
  49.                                             </div>
  50.                                             {% set description = getImageDescription(image) %}
  51.                                             {% if description %}
  52.                                                 <div class="gallery-item__text">
  53.                                                     {{ description }}
  54.                                                 </div>
  55.                                             {% endif %}
  56.                                         </div>
  57.                                     </div>
  58.                                 {% endfor %}
  59.                             </div>
  62.                             <div class="swiper-navigation gallery__swiper-navigation">
  63.                                 <button class="swiper-button swiper-button--prev gallery__btn js-gallery__prev"><span class="icon icon-arrow-right" aria-label="Previous"></span></button>
  64.                                 <button class="swiper-button swiper-button--next gallery__btn js-gallery__next"><span class="icon icon-arrow-right" aria-label="Next"></span></button>
  65.                             </div>
  67.                         </div>
  68.                     </div>
  69.                 </template>
  70.             </div>
  71.         </div>
  72.     </div>
  73. </section>