templates/Tour/detail/tourGallery.html.twig line 1

Open in your IDE?
  1. <section class=" content-block js-fade-in">
  2.     <div class="container-sm container">
  3.         {{ include('Includes/title-block.html.twig', {
  4.             title: 'tour-detail.Gallery'|trans,
  5.             isCentered: true
  6.         }) }}
  7.     </div>
  9.     <div class="overflow-x-hidden">
  10.         <div class="container-sm container">
  11.             <div class="js-render-template" style="min-height: 1px;">
  12.                 <template class="js-render-template__template">
  13.                     <div class="js-lightbox js-gallery gallery">
  14.                         <div class="swiper-container js-gallery__slider gallery__container">
  15.                             <div class="swiper-wrapper gallery__wrapper">
  17.                                 {% for image in tour.images %}
  18.                                     {% set imageAlt = tour.category[0].name ~ ' ' ~ tour.name ~ ' - Touren-Impression #2.' ~ loop.index %}
  19.                                     {% if image.metadata is iterable %}
  20.                                         {% for metadata in heroImage.metadata %}
  21.                                             {% if metadata['name'] == 'alt' %}
  22.                                                 {% set imageAlt = metadata['data'] %}
  23.                                             {% endif %}
  24.                                         {% endfor %}
  25.                                     {% endif %}
  26.                                     <div class="swiper-slide gallery-swiper-slide">
  27.                                         <div class="gallery-item">
  28.                                             <div class="gallery-item__counter">
  29.                                                 <span class="text-primary">{{ loop.index }}</span>/{{ tour.images|length }}
  30.                                             </div>
  31.                                             <a href="{{ image.getThumbnail('lightbox') }}" class="gallery-item__img-wrapper js-lightbox__item embed-responsive-16by9 embed-responsive" data-sub-html="image description">
  32.                                                 {{ image.thumbnail('gallery-item').html({
  33.                                                     imgAttributes: {
  34.                                                         class: 'js-lazy-img embed-responsive-item'
  35.                                                     },
  36.                                                     alt: imageAlt,
  37.                                                     lowQualityPlaceholder: true,
  38.                                                 }) | raw }}
  39.                                             </a>
  40.                                             {% set description = getImageDescription(image) %}
  41.                                             {% if description %}
  42.                                                 <div class="gallery-item__text">
  43.                                                     {{ description }}
  44.                                                 </div>
  45.                                             {% endif %}
  46.                                         </div>
  47.                                     </div>
  48.                                 {% endfor %}
  49.                             </div>
  52.                             <div class="swiper-navigation gallery__swiper-navigation">
  53.                                 <button class="swiper-button swiper-button--prev gallery__btn js-gallery__prev"><span class="icon icon-arrow-right" aria-label="Previous"></span></button>
  54.                                 <button class="swiper-button swiper-button--next gallery__btn js-gallery__next"><span class="icon icon-arrow-right" aria-label="Next"></span></button>
  55.                             </div>
  57.                         </div>
  58.                     </div>
  59.                 </template>
  60.             </div>
  61.         </div>
  62.     </div>
  64. </section>