templates/areas/content-brick/partials/_gallery.html.twig line 54

Open in your IDE?
  1. {% if editmode %}
  2.     {% if pimcore_block('gallery').isEmpty() and defaultGalleryItems is defined %}
  3.         {% embed 'app/editmodenotice.html.twig' %}
  4.             {% block title %} Standaard Afbeeldingen automatisch geselecteerd {% endblock %}
  5.             {% block information %}
  6.                 Vanuit een koppeling met een gerelateerd Object zijn er afbeeldingen gekozen om te tonen.
  7.                 Indien u gebruik wenst te maken van andere afbeeldingen dan vult u hier nieuwe afbeeldingen.
  8.                 {% for image in defaultGalleryItems %}
  9.                     {{ image.thumbnail('gallery').html({
  10.                         'class':'w-full',
  11.                         'pictureAttributes': {
  12.                             class: 'w-full'
  13.                         }
  14.                     }) | raw }}
  15.                 {% endfor %}
  16.             {% endblock %}
  17.         {% endembed %}
  18.     {% endif %}
  20.     {% for i in pimcore_block('gallery', {'reload': true, 'limit' : 4}).iterator %}
  21.         {{ pimcore_image('image',
  22.             {
  23.                 'thumbnail': 'gallery',
  24.                 'reload': 'true',
  25.                 'class':'w-full',
  26.                 'pictureAttributes': {class: 'w-full'}
  27.             }
  28.         ) }}
  29.     {% endfor %}
  30. {% else %}
  31.     <div class="!-mx-5 md:!mx-auto md:rounded-md overflow-hidden swiper slideshow-swiper max-h-60 md:max-h-full">
  32.         <div class=" swiper-wrapper">
  33.             {# Load the manually selectable gallery items #}
  34.             {% for i in pimcore_block('gallery', {'reload': true, 'limit' : 4}).iterator %}
  35.                 <div class="swiper-slide">
  36.                     {{ pimcore_image('image',
  37.                         {
  38.                             'thumbnail': 'gallery',
  39.                             'reload': 'true',
  40.                             'pictureAttributes': {class: 'w-full block aspect-[4/3] rounded-md '},
  41.                             'imgAttributes': {class: 'w-full h-full object-cover object-center max-h-60 md:max-h-full'}
  42.                         }
  43.                     ) }}
  44.                 </div>
  45.             {% endfor %}
  47.             {# If a default set of gallery items is available and no manual gallery items are added
  48.             iterate through the supplied defaultGalleryItems. #}
  49.             {% if pimcore_block('gallery').isEmpty()
  50.                 and defaultGalleryItems is defined %}
  52.                 {% for image in defaultGalleryItems %}
  53.                     <div class="swiper-slide">
  54.                         {{ image.thumbnail('gallery').html({
  55.                             'pictureAttributes': {
  56.                                 class: 'w-full block aspect-[4/3] rounded-md'
  57.                             },
  58.                             'imgAttributes': {
  59.                                 class: 'w-full h-full object-cover object-center max-h-60 md:max-h-full'
  60.                             }
  61.                         })|raw }}
  62.                     </div>
  63.                 {% endfor %}
  65.             {% endif %}
  67.         </div>
  68.         <div class="absolute z-20 flex gap-2 bottom-4 right-4">
  69.             <div class="custom-swiper-button-prev">
  70.                 <svg class="w-4 h-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12">
  71.                     <path fill="#FFF" fill-rule="evenodd"
  72.                           d="M15.106 6.883H3.396l3.218 3.218a.885.885 0 1 1-1.252 1.252L.707 6.695a1 1 0 0 1 0-1.414L5.362.626a.885.885 0 1 1 1.252 1.252L3.396 5.095h11.71a.894.894 0 0 1 0 1.788Z"/>
  73.                 </svg>
  74.             </div>
  75.             <div class="custom-swiper-button-next">
  76.                 <svg class="w-4 h-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12">
  77.                     <path fill="#FFF" fill-rule="evenodd"
  78.                           d="M.894 5.095h11.71L9.386 1.878A.885.885 0 1 1 10.638.626l4.655 4.656a1 1 0 0 1 0 1.414l-4.655 4.656A.885.885 0 1 1 9.386 10.1l3.218-3.217H.894a.894.894 0 0 1 0-1.788Z"/>
  79.                 </svg>
  80.             </div>
  81.         </div>
  82.     </div>
  84.     {# Do not iterate gallery block twice in editmode as this breaks pimcore admin editmode.
  85.         Pimcore will try and create two gallery items and this results in a name conflict. #}
  86.     {% if not editmode %}
  87.         <div class="absolute z-20 hidden gap-2 ml-4 -mt-16 md:inline-flex">
  89.             {% if pimcore_block('gallery').getCount() %}
  90.                 {% for gallery in pimcore_block('gallery').iterator %}
  91.                     <div data-id="{{ gallery-1 ?? "0" }}" class="cursor-pointer swiper-thumbnail">
  92.                         {{ pimcore_image('image',
  93.                             {
  94.                                 'thumbnail': 'gallery-navigation',
  95.                                 'pictureAttributes': {
  96.                                     class: 'overflow-hidden inline-block w-10 h-10 rounded-md md:w-20 md:h-20 aspect-square'
  97.                                 },
  98.                                 'imgAttributes': {
  99.                                     class: 'w-full h-full object-cover object-center'
  100.                                 }
  101.                             }
  102.                         ) }}
  103.                     </div>
  104.                 {% endfor %}
  105.             {% endif %}
  107.             {% if pimcore_block('gallery').isEmpty()
  108.                 and defaultGalleryItems is defined %}
  109.                 {% for image in defaultGalleryItems %}
  110.                     <div data-id="{{ loop.index0 }}" class="cursor-pointer swiper-thumbnail">
  111.                         {{ image.thumbnail('gallery-navigation').html(
  112.                             {
  113.                                 'pictureAttributes': {
  114.                                     class: 'overflow-hidden inline-block w-10 h-10 rounded-md md:w-20 md:h-20 aspect-square'
  115.                                 },
  116.                                 'imgAttributes': {
  117.                                     class: 'w-full h-full object-cover object-center'
  118.                                 }
  119.                             }
  120.                         )|raw }}
  121.                     </div>
  122.                 {% endfor %}
  123.             {% endif %}
  124.         </div>
  125.     {% endif %}
  126. {% endif %}