templates/vitrine/pages/gallery.html.twig line 1

Open in your IDE?
  1. {# templates/faq/index.html.twig #}
  2. {% extends 'vitrine/base.html.twig' %}
  4. {% block title %}{% trans %}Galerie{% endtrans %}{% endblock %}
  5. {% block description %}{% trans %}Découvrez tout l'univers du spa à la bière{% endtrans %}{% endblock %}
  7. {% block stylesheets %}
  8.     {{ parent() }}
  9.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.2/css/lightgallery.min.css" integrity="sha512-F2E+YYE1gkt0T5TVajAslgDfTEUQKtlu4ralVq78ViNxhKXQLrgQLLie8u1tVdG2vWnB3ute4hcdbiBtvJQh0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  10. {% endblock %}
  12. {% block javascripts %}
  13.     {{ parent() }}
  14.     <script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.2/lightgallery.min.js" integrity="sha512-jEJ0OA9fwz5wUn6rVfGhAXiiCSGrjYCwtQRUwI/wRGEuWRZxrnxoeDoNc+Pnhx8qwKVHs2BRQrVR9RE6T4UHBg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  15. {% endblock %}
  17. {% block main %}
  18.     <div class="w-full flexcol items-center z-10 relative ">
  19.         <section class="flexcol gap-16 pt-32">
  20.             <h2 class="text-center w-full text-4xl">
  21.                 {% trans %}Galerie{% endtrans %}
  22.             </h2>
  23. {#            <div class="flex gap-10 flex-wrap w-full justify-center">#}
  24. {#                <a href="#" class="active clickable not-animate">{% trans %}Tous{% endtrans %}</a>#}
  25. {#                <a href="#" class"clickable not-animate">{% trans %}Paris{% endtrans %}</a>#}
  26. {#                <a href="#" class"clickable not-animate">{% trans %}Genève{% endtrans %}</a>#}
  27. {#                <a href="#" class"clickable not-animate">{% trans %}Lyon{% endtrans %}</a>#}
  28. {#                <a href="#" class"clickable not-animate">{% trans %}Strasbourg{% endtrans %}</a>#}
  29. {#            </div>#}
  30.             <div class="flexcol gap-16" data-town="{% trans %}Tous{% endtrans %}">
  31.                 <div id="gallery_taaka" class="flexcol gap-4" data-town="{% trans %}Paris{% endtrans %}">
  32.                     <div class="image-layout flexcol gap-4">
  33.                         <div class="grid grid-cols-1 md:grid-cols-3 gap-4 h-min overflow-hidden">
  34.                             <div class="flexcol h-full gap-4">
  35.                             <a href="{{asset('/vitrine/images/gallery/photo-13.jpg')}}" class="h-1/3 min-h-64 overflow-hidden" data-sub-html=" ">
  36.                                 <img alt="Generique picture" class="h-full w-full object-cover" src="{{asset('/vitrine/images/gallery/photo-13.jpg')}}" >
  37.                             </a>
  38.                             <a href="{{asset('/vitrine/images/gallery/photo-14.jpg')}}" class="h-2/3 min-h-[550px] overflow-hidden" data-sub-html=" ">
  39.                                 <img alt="Generique picture" class="h-full w-full object-cover" src="{{asset('/vitrine/images/gallery/photo-14.jpg')}}">
  40.                                 </a>
  41.                             </div>
  42.                             <div class="flexcol h-full gap-4">
  43.                             <a href="{{asset('/vitrine/images/gallery/photo-15.jpg')}}" class="h-2/3 min-h-[550px] overflow-hidden" data-sub-html=" ">
  44.                                 <img alt="Generique picture" class="h-full w-full object-cover" src="{{asset('/vitrine/images/gallery/photo-15.jpg')}}">
  45.                                 </a>
  46.                             <a href="{{asset('/vitrine/images/gallery/photo-16.jpg')}}" class="h-1/3 min-h-64 overflow-hidden" data-sub-html=" ">
  47.                                 <img alt="Generique picture" class="h-full w-full object-cover" src="{{asset('/vitrine/images/gallery/photo-16.jpg')}}">
  48.                                 </a>
  49.                             </div>
  50.                             <div class="flexcol h-full gap-4">
  51.                             <a href="{{asset('/vitrine/images/gallery/photo-17.jpg')}}" class="h-1/3 min-h-64 overflow-hidden" data-sub-html=" ">
  52.                                 <img alt="Generique picture" class="h-full w-full object-cover" src="{{asset('/vitrine/images/gallery/photo-17.jpg')}}">
  53.                                 </a>
  54.                             <a href="{{asset('/vitrine/images/gallery/photo-18.jpg')}}" class="h-2/3 min-h-[550px] overflow-hidden" data-sub-html=" ">
  55.                                 <img alt="Generique picture" class="h-full w-full object-cover" src="{{asset('/vitrine/images/gallery/photo-18.jpg')}}">
  56.                                 </a>
  57.                             </div>
  58.                         </div>
  59.                         <div class="grid grid-cols-1 md:grid-cols-3 gap-4 h-min overflow-hidden">
  60.                             <div class="flexcol h-full gap-4">
  61.                                 <a href="{{asset('/vitrine/images/gallery/photo-19.jpg')}}" class="h-1/3 min-h-64 overflow-hidden" data-sub-html=" ">
  62.                                     <img alt="Generique picture" loading="lazy" class="h-full w-full object-cover" src="{{asset('/vitrine/images/gallery/photo-19.jpg')}}">
  63.                                 </a>
  64.                                 <a href="{{asset('/vitrine/images/gallery/photo-20.jpg')}}" class="h-2/3 min-h-[550px] overflow-hidden" data-sub-html=" ">
  65.                                     <img alt="Generique picture" loading="lazy" class="h-full w-full object-cover" src="{{asset('/vitrine/images/gallery/photo-20.jpg')}}">
  66.                                 </a>
  67.                             </div>
  68.                             <div class="flexcol h-full gap-4">
  69.                                 <a href="{{asset('/vitrine/images/gallery/photo-21.jpg')}}" class="h-2/3 min-h-[550px] overflow-hidden" data-sub-html=" ">
  70.                                     <img alt="Generique picture" loading="lazy" class="h-full w-full object-cover" src="{{asset('/vitrine/images/gallery/photo-21.jpg')}}" >
  71.                                 </a>
  72.                                 <a href="{{asset('/vitrine/images/gallery/photo-22.jpg')}}" class="h-1/3 min-h-64 overflow-hidden" data-sub-html=" ">
  73.                                     <img alt="Generique picture" loading="lazy" class="h-full w-full object-cover" src="{{asset('/vitrine/images/gallery/photo-22.jpg')}}">
  74.                                 </a>
  75.                             </div>
  76.                             <div class="flexcol h-full gap-4">
  77.                                 <a href="{{asset('/vitrine/images/gallery/photo-23.jpg')}}" class="h-1/3 min-h-64 overflow-hidden" data-sub-html=" ">
  78.                                     <img alt="Generique picture" loading="lazy" class="h-full w-full object-cover" src="{{asset('/vitrine/images/gallery/photo-23.jpg')}}" >
  79.                                 </a>
  80.                                 <a href="{{asset('/vitrine/images/gallery/photo-24.jpg')}}" class="h-2/3 min-h-[550px] overflow-hidden" data-sub-html=" ">
  81.                                     <img alt="Generique picture" loading="lazy" class="h-full w-full object-cover" src="{{asset('/vitrine/images/gallery/photo-24.jpg')}}">
  82.                                 </a>
  83.                             </div>
  84.                         </div>
  85.                     </div>
  86.                     <div class="image-layout hidden flexcol gap-4">
  87.                         <div class="grid grid-cols-1 md:grid-cols-3 gap-4 h-min overflow-hidden">
  88.                             <div class="flexcol h-full gap-4">
  89.                                 <a href="{{asset('/vitrine/images/gallery/photo-1.jpg')}}" class="h-1/3 min-h-64 overflow-hidden" data-sub-html=" ">
  90.                                     <img alt="Generique picture" loading="lazy" class="h-full w-full object-cover image-brightness" src="{{asset('/vitrine/images/gallery/photo-1.jpg')}}" >
  91.                                 </a>
  92.                                 <a href="{{asset('/vitrine/images/gallery/photo-2.jpg')}}" class="h-2/3 min-h-[550px] overflow-hidden" data-sub-html=" ">
  93.                                     <img alt="Generique picture" loading="lazy" class="h-full w-full object-cover image-brightness" src="{{asset('/vitrine/images/gallery/photo-2.jpg')}}">
  94.                                 </a>
  95.                             </div>
  96.                             <div class="flexcol h-full gap-4">
  97.                                 <a href="{{asset('/vitrine/images/gallery/photo-3.jpg')}}" class="h-2/3 min-h-[550px] overflow-hidden" data-sub-html=" ">
  98.                                     <img alt="Generique picture" loading="lazy" class="h-full w-full object-cover image-brightness" src="{{asset('/vitrine/images/gallery/photo-3.jpg')}}">
  99.                                 </a>
  100.                                 <a href="{{asset('/vitrine/images/gallery/photo-4.jpg')}}" class="h-1/3 min-h-64 overflow-hidden" data-sub-html=" ">
  101.                                     <img alt="Generique picture" loading="lazy" class="h-full w-full object-cover image-brightness" src="{{asset('/vitrine/images/gallery/photo-4.jpg')}}">
  102.                                 </a>
  103.                             </div>
  104.                             <div class="flexcol h-full gap-4">
  105.                                 <a href="{{asset('/vitrine/images/gallery/photo-5.webp')}}" class="h-1/3 min-h-64 overflow-hidden" data-sub-html=" ">
  106.                                     <img alt="Generique picture" loading="lazy" class="h-full w-full object-cover image-brightness" src="{{asset('/vitrine/images/gallery/photo-5.webp')}}" >
  107.                                 </a>
  108.                                 <a href="{{asset('/vitrine/images/gallery/photo-6.jpg')}}" class="h-2/3 min-h-[550px] overflow-hidden" data-sub-html=" ">
  109.                                     <img alt="Generique picture" loading="lazy" class="h-full w-full object-cover image-brightness" src="{{asset('/vitrine/images/gallery/photo-6.jpg')}}" >
  110.                                 </a>
  111.                             </div>
  112.                         </div>
  113.                         <div class="grid grid-cols-1 md:grid-cols-3 gap-4 h-min overflow-hidden">
  114.                             <div class="flexcol h-full gap-4">
  115.                                 <a href="{{asset('/vitrine/images/gallery/photo-7.jpg')}}" class="h-1/3 min-h-64 overflow-hidden" data-sub-html=" ">
  116.                                     <img alt="Generique picture" loading="lazy" class="h-full w-full object-cover image-brightness" src="{{asset('/vitrine/images/gallery/photo-7.jpg')}}">
  117.                                 </a>
  118.                                 <a href="{{asset('/vitrine/images/gallery/photo-8.jpg')}}" class="h-2/3 min-h-[550px] overflow-hidden" data-sub-html=" ">
  119.                                     <img alt="Generique picture" loading="lazy" class="h-full w-full object-cover image-brightness" src="{{asset('/vitrine/images/gallery/photo-8.jpg')}}">
  120.                                 </a>
  121.                             </div>
  122.                             <div class="flexcol h-full gap-4">
  123.                                 <a href="{{asset('/vitrine/images/gallery/photo-9.jpg')}}" class="h-2/3 min-h-[550px] overflow-hidden" data-sub-html=" ">
  124.                                     <img alt="Generique picture" loading="lazy" class="h-full w-full object-cover image-brightness" src="{{asset('/vitrine/images/gallery/photo-9.jpg')}}" >
  125.                                 </a>
  126.                                 <a href="{{asset('/vitrine/images/gallery/photo-10.jpg')}}" class="h-1/3 min-h-64 overflow-hidden" data-sub-html=" ">
  127.                                     <img alt="Generique picture" loading="lazy" class="h-full w-full object-cover image-brightness" src="{{asset('/vitrine/images/gallery/photo-10.jpg')}}">
  128.                                 </a>
  129.                             </div>
  130.                             <div class="flexcol h-full gap-4">
  131.                                 <a href="{{asset('/vitrine/images/gallery/photo-11.jpg')}}" class="h-1/3 min-h-64 overflow-hidden" data-sub-html=" ">
  132.                                     <img alt="Generique picture" loading="lazy" class="h-full w-full object-cover image-brightness" src="{{asset('/vitrine/images/gallery/photo-11.jpg')}}" >
  133.                                 </a>
  134.                                 <a href="{{asset('/vitrine/images/gallery/photo-12.jpg')}}" class="h-2/3 min-h-[550px] overflow-hidden" data-sub-html=" ">
  135.                                     <img alt="Generique picture" loading="lazy" class="h-full w-full object-cover image-brightness" src="{{asset('/vitrine/images/gallery/photo-12.jpg')}}">
  136.                                 </a>
  137.                             </div>
  138.                         </div>
  139.                     </div>
  140.                     <div class="image-layout hidden flexcol gap-4">
  141.                         <div class="grid grid-cols-1 md:grid-cols-3 gap-4 h-min overflow-hidden">
  142.                             <div class="flexcol h-full gap-4">
  143.                                 <a href="{{asset('/vitrine/images/gallery/photo-25.jpg')}}" class="h-1/3 min-h-64 overflow-hidden" data-sub-html=" ">
  144.                                     <img alt="Generique picture" loading="lazy" class="h-full w-full object-cover image-brightness" src="{{asset('/vitrine/images/gallery/photo-25.jpg')}}" >
  145.                                 </a>
  146.                                 <a href="{{asset('/vitrine/images/gallery/photo-26.jpg')}}" class="h-2/3 min-h-[550px] overflow-hidden" data-sub-html=" ">
  147.                                     <img alt="Generique picture" loading="lazy" class="h-full w-full object-cover image-brightness" src="{{asset('/vitrine/images/gallery/photo-26.jpg')}}">
  148.                                 </a>
  149.                             </div>
  150.                             <div class="flexcol h-full gap-4">
  151.                                 <a href="{{asset('/vitrine/images/gallery/photo-27.jpg')}}" class="h-2/3 min-h-[550px] overflow-hidden" data-sub-html=" ">
  152.                                     <img alt="Generique picture" loading="lazy" class="h-full w-full object-cover image-brightness" src="{{asset('/vitrine/images/gallery/photo-27.jpg')}}">
  153.                                 </a>
  154.                                 <a href="{{asset('/vitrine/images/gallery/photo-28.jpg')}}" class="h-1/3 min-h-64 overflow-hidden" data-sub-html=" ">
  155.                                     <img alt="Generique picture" loading="lazy" class="h-full w-full object-cover image-brightness" src="{{asset('/vitrine/images/gallery/photo-28.jpg')}}">
  156.                                 </a>
  157.                             </div>
  158.                             <div class="flexcol h-full gap-4">
  159.                                 <a href="{{asset('/vitrine/images/gallery/photo-29.jpg')}}" class="h-1/3 min-h-64 overflow-hidden" data-sub-html=" ">
  160.                                     <img alt="Generique picture" loading="lazy" class="h-full w-full object-cover image-brightness" src="{{asset('/vitrine/images/gallery/photo-29.jpg')}}" >
  161.                                 </a>
  162.                                 <a href="{{asset('/vitrine/images/gallery/photo-30.jpg')}}" class="h-2/3 min-h-[550px] overflow-hidden" data-sub-html=" ">
  163.                                     <img alt="Generique picture" loading="lazy" class="h-full w-full object-cover image-brightness" src="{{asset('/vitrine/images/gallery/photo-30.jpg')}}" >
  164.                                 </a>
  165.                             </div>
  166.                         </div>
  167.                         <div class="grid grid-cols-1 md:grid-cols-3 gap-4 h-min overflow-hidden">
  168.                             <div class="flexcol h-full gap-4">
  169.                                 <a href="{{asset('/vitrine/images/gallery/photo-31.jpg')}}" class="h-1/3 min-h-64 overflow-hidden" data-sub-html=" ">
  170.                                     <img alt="Generique picture" loading="lazy" class="h-full w-full object-cover image-brightness" src="{{asset('/vitrine/images/gallery/photo-31.jpg')}}">
  171.                                 </a>
  172.                                 <a href="{{asset('/vitrine/images/gallery/photo-32.jpg')}}" class="h-2/3 min-h-[550px] overflow-hidden" data-sub-html=" ">
  173.                                     <img alt="Generique picture" loading="lazy" class="h-full w-full object-cover image-brightness" src="{{asset('/vitrine/images/gallery/photo-32.jpg')}}">
  174.                                 </a>
  175.                             </div>
  176.                             <div class="flexcol h-full gap-4">
  177.                                 <a href="{{asset('/vitrine/images/gallery/photo-33.jpg')}}" class="h-2/3 min-h-[550px] overflow-hidden" data-sub-html=" ">
  178.                                     <img alt="Generique picture" loading="lazy" class="h-full w-full object-cover image-brightness" src="{{asset('/vitrine/images/gallery/photo-33.jpg')}}" >
  179.                                 </a>
  180.                                 <a href="{{asset('/vitrine/images/gallery/photo-34.jpg')}}" class="h-1/3 min-h-64 overflow-hidden" data-sub-html=" ">
  181.                                     <img alt="Generique picture" loading="lazy" class="h-full w-full object-cover image-brightness" src="{{asset('/vitrine/images/gallery/photo-34.jpg')}}">
  182.                                 </a>
  183.                             </div>
  184.                             <div class="flexcol h-full gap-4">
  185.                                 <a href="{{asset('/vitrine/images/gallery/photo-35.jpg')}}" class="h-1/3 min-h-64 overflow-hidden" data-sub-html=" ">
  186.                                     <img alt="Generique picture" loading="lazy" class="h-full w-full object-cover image-brightness" src="{{asset('/vitrine/images/gallery/photo-35.jpg')}}" >
  187.                                 </a>
  188.                                 <a href="{{asset('/vitrine/images/gallery/photo-36.jpg')}}" class="h-2/3 min-h-[550px] overflow-hidden" data-sub-html=" ">
  189.                                     <img alt="Generique picture" loading="lazy" class="h-full w-full object-cover image-brightness" src="{{asset('/vitrine/images/gallery/photo-36.jpg')}}">
  190.                                 </a>
  191.                             </div>
  192.                         </div>
  193.                     </div>
  194.                     <div class="image-layout hidden flexcol gap-4">
  195.                         <div class="grid grid-cols-1 md:grid-cols-3 gap-4 h-min overflow-hidden">
  196.                             <div class="flexcol h-full gap-4">
  197.                                 <a href="{{asset('/vitrine/images/gallery/photo-37.jpg')}}" class="h-1/3 min-h-64 overflow-hidden" data-sub-html=" ">
  198.                                     <img alt="Generique picture" loading="lazy" class="h-full w-full object-cover image-brightness" src="{{asset('/vitrine/images/gallery/photo-37.jpg')}}" >
  199.                                 </a>
  200.                                 <a href="{{asset('/vitrine/images/gallery/photo-38.jpg')}}" class="h-2/3 min-h-[550px] overflow-hidden" data-sub-html=" ">
  201.                                     <img alt="Generique picture" loading="lazy" class="h-full w-full object-cover image-brightness" src="{{asset('/vitrine/images/gallery/photo-38.jpg')}}">
  202.                                 </a>
  203.                             </div>
  204.                             <div class="flexcol h-full gap-4">
  205.                                 <a href="{{asset('/vitrine/images/gallery/photo-39.jpg')}}" class="h-2/3 min-h-[550px] overflow-hidden" data-sub-html=" ">
  206.                                     <img alt="Generique picture" loading="lazy" class="h-full w-full object-cover image-brightness" src="{{asset('/vitrine/images/gallery/photo-39.jpg')}}">
  207.                                 </a>
  208.                                 <a href="{{asset('/vitrine/images/gallery/photo-40.jpg')}}" class="h-1/3 min-h-64 overflow-hidden" data-sub-html=" ">
  209.                                     <img alt="Generique picture" loading="lazy" class="h-full w-full object-cover image-brightness" src="{{asset('/vitrine/images/gallery/photo-40.jpg')}}">
  210.                                 </a>
  211.                             </div>
  212.                             <div class="flexcol h-full gap-4">
  213.                                 <a href="{{asset('/vitrine/images/gallery/photo-41.jpg')}}" class="h-1/3 min-h-64 overflow-hidden" data-sub-html=" ">
  214.                                     <img alt="Generique picture" loading="lazy" class="h-full w-full object-cover image-brightness" src="{{asset('/vitrine/images/gallery/photo-41.jpg')}}" >
  215.                                 </a>
  216.                                 <a href="{{asset('/vitrine/images/gallery/photo-42.jpg')}}" class="h-2/3 min-h-[550px] overflow-hidden" data-sub-html=" ">
  217.                                     <img alt="Generique picture" loading="lazy" class="h-full w-full object-cover image-brightness" src="{{asset('/vitrine/images/gallery/photo-42.jpg')}}" >
  218.                                 </a>
  219.                             </div>
  220.                         </div>
  221.                         <div class="grid grid-cols-1 md:grid-cols-3 gap-4 h-min overflow-hidden">
  222.                             <div class="flexcol h-full gap-4">
  223.                                 <a href="{{asset('/vitrine/images/gallery/photo-43.jpg')}}" class="h-1/3 min-h-64 overflow-hidden" data-sub-html=" ">
  224.                                     <img alt="Generique picture" loading="lazy" class="h-full w-full object-cover image-brightness" src="{{asset('/vitrine/images/gallery/photo-43.jpg')}}">
  225.                                 </a>
  226.                                 <a href="{{asset('/vitrine/images/gallery/photo-44.jpg')}}" class="h-2/3 min-h-[550px] overflow-hidden" data-sub-html=" ">
  227.                                     <img alt="Generique picture" loading="lazy" class="h-full w-full object-cover image-brightness" src="{{asset('/vitrine/images/gallery/photo-44.jpg')}}">
  228.                                 </a>
  229.                             </div>
  230.                             <div class="flexcol h-full gap-4">
  231.                                 <a href="{{asset('/vitrine/images/gallery/photo-45.jpg')}}" class="h-2/3 min-h-[550px] overflow-hidden" data-sub-html=" ">
  232.                                     <img alt="Generique picture" loading="lazy" class="h-full w-full object-cover image-brightness" src="{{asset('/vitrine/images/gallery/photo-45.jpg')}}" >
  233.                                 </a>
  234.                                 <a href="{{asset('/vitrine/images/gallery/photo-46.jpg')}}" class="h-1/3 min-h-64 overflow-hidden" data-sub-html=" ">
  235.                                     <img alt="Generique picture" loading="lazy" class="h-full w-full object-cover image-brightness" src="{{asset('/vitrine/images/gallery/photo-46.jpg')}}">
  236.                                 </a>
  237.                             </div>
  238.                             <div class="flexcol h-full gap-4">
  239.                                 <a href="{{asset('/vitrine/images/gallery/photo-47.jpg')}}" class="h-1/3 min-h-64 overflow-hidden" data-sub-html=" ">
  240.                                     <img alt="Generique picture" loading="lazy" class="h-full w-full object-cover image-brightness" src="{{asset('/vitrine/images/gallery/photo-47.jpg')}}" >
  241.                                 </a>
  242.                                 <a href="{{asset('/vitrine/images/gallery/photo-48.jpg')}}" class="h-2/3 min-h-[550px] overflow-hidden" data-sub-html=" ">
  243.                                     <img alt="Generique picture" loading="lazy" class="h-full w-full object-cover image-brightness" src="{{asset('/vitrine/images/gallery/photo-48.jpg')}}">
  244.                                 </a>
  245.                             </div>
  246.                         </div>
  247.                     </div>
  248.                 </div>
  249.                 <div class="flex justify-center w-full">
  250.                     <button id="load-more-images" type="button" class="px-12 py-3 font-semibold bg-vitrineOrange text-sm w-max hover:opacity-100 hover:text-vitrineOrange hover:bg-white relative fade-in">
  251.                         {% trans %}Plus{% endtrans %}
  252.                     </button>
  253.                 </div>
  254.             </div>
  255.         </section>
  256.         {% include "vitrine/layout/footer.html.twig" %}
  257.     </div>
  258.     <script>
  259.         const license = "494A2C92-4FAE-4040-8348-9E5CDBF9D92E";
  261.         lightGallery(document.getElementById('gallery_taaka'), {
  262.             licenseKey: license,
  263.             selector: 'a',
  264.             download: false,
  265.         });
  267.         const loadMoreImages = document.getElementById('load-more-images');
  268.         const imageLayout = document.querySelectorAll('.image-layout');
  269.         const imageLayouts = Array.from(imageLayout);
  270.         let currentIndex = 1;
  272.         const updateButtonVisibility = () => {
  273.             if (currentIndex >= imageLayouts.length) {
  274.                 loadMoreImages.style.display = 'none';
  275.             }
  276.         }
  278.         updateButtonVisibility();
  280.         loadMoreImages.addEventListener('click', () => {
  281.             if (currentIndex < imageLayouts.length) {
  282.                 imageLayouts[currentIndex].classList.remove('hidden');
  283.                 currentIndex++;
  284.                 updateButtonVisibility();
  285.             }
  286.         });
  287.     </script>
  288. {% endblock %}