templates/front/front_page/gallery/gallery-row-1-2-3.html.twig line 1

Open in your IDE?
  1. {% if type == 2 %}
  2.     {% set size = 3 %}
  3. {% else %}
  4.     {% set size = 4 %}
  5. {% endif %}
  7. {% set myVal = 1 %}
  9. {% set id = uniqId %}
  10. {% set id2 = uniqId %}
  11. <section data-bs-version="5.1"
  12.          class="gallery4 mbr-gallery cid-sYVVjIYuli {{ bloc.bloc_margin_top }} {{ bloc.bloc_margin_bottom }}"
  13.          id="gallery4-47">
  15.     <div class="container ">
  17.         <div class="mbr-section-head">
  18.             {% if bloc.bloc_titre %}
  19.                 <h3 class="mbr-section-title mbr-fonts-style align-center display-2">
  20.                     <strong>{{ bloc.bloc_titre }}</strong>
  21.                 </h3>
  22.             {% endif %}
  23.             {% if bloc.bloc_sstitre %}
  24.                 <h4 class="flechebash4 mbr-section-subtitle mbr-fonts-style align-center display-5">
  25.                     {{ bloc.bloc_sstitre }}
  26.                 </h4>
  27.             {% endif %}
  28.         </div>
  30.         <div class="row mbr-gallery justify-content-center galerieA100">
  33.             {% for media in medias %}
  34.                 {% set myVal = myVal + 1 %}
  35.                 {% set mediaTmp = media.media_fichier %}
  36.                 {% set mediaDefault = "default.jpg" %}
  37.                 {% set mediaTmp = webp(webpSupported, mediaTmp)|url_encode %}
  38.                 {% set mediaDefault = webp(webpSupported, mediaDefault) %}
  39.                 {% set id = uniqId %}
  43.                 <div class="col-12 col-md-6 col-lg-{{ size }} item gallery-image {% if loop.first %}active{% endif %}">
  44.                     <div class="item-wrapper marge100img" data-toggle="modal" data-bs-toggle="modal"
  45.                          data-target="#sYVZf768Dd-modal-{{ id }}"
  46.                          data-bs-target="#sYVZf768Dd-modal-{{ id }}">
  47.                         <figure>
  48.                             <img class="w-100 lazyload"
  49.                                  src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
  50.                                  alt="{{ media.media_alt|default(bloc.bloc_titre)|default(page.ptitre~' '~page.ptitreonglet)|default(nomDuSite) }}"
  51.                                  data-slide-to="{{ loop.index0 }}" data-bs-slide-to="{{ loop.index0 }}"
  52.                                  data-target="#lb-sYVZf768Dd{{ id2 }}"
  53.                                  data-bs-target="#lb-sYVZf768Dd{{ id2 }}" loading="lazy"
  54.                                  data-src="{{ asset('/medias_front/pages/'~mediaTmp) | imagine_filter('front_blocGalerie'~type) }}">
  55.                             <div class="icon-wrapper">
  56.                                 <span class="mobi-mbri mobi-mbri-search mbr-iconfont mbr-iconfont-btn"></span>
  57.                             </div>
  58.                             {% if (media.media_alt != '' or media.media_alt != null)  and media.media_alt_display == 1 %}
  59.                                 <figcaption class="text-left text-justify p-3">
  60.                                     {{ media.media_alt }}
  61.                                 </figcaption>
  62.                             {% endif %}
  63.                         </figure>
  64.                     </div>
  65.                 </div>
  66.             {% endfor %}
  69.         </div>
  71.         <div class="modal mbr-slider" tabindex="-1" role="dialog" aria-hidden="true" id="sYVZf768Dd-modal-{{ id }}">
  72.             <div class="modal-dialog" role="document">
  73.                 <div class="modal-content">
  74.                     <div class="modal-body">
  75.                         <div class="carousel slide carousel-fade" id="lb-sYVZf768Dd{{ id2 }}" data-ride="carousel"
  76.                              data-bs-ride="carousel" data-interval="5000" data-bs-interval="5000">
  77.                             <div class="carousel-inner">
  79.                                 {% for media in medias %}
  81.                                     {% set mediaTmp = media.media_fichier %}
  82.                                     {% set mediaDefault = "default.jpg" %}
  83.                                     {% set mediaTmp = webp(webpSupported, mediaTmp)|url_encode %}
  84.                                     {% set mediaDefault = webp(webpSupported, mediaDefault) %}
  86.                                     <div class="carousel-item {% if loop.first %}active{% endif %}">
  87.                                         <img class="d-block w-100 lazyload"
  88.                                              src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
  89.                                              alt="{{ media.media_alt|default(bloc.bloc_titre)|default(page.ptitre~' '~page.ptitreonglet)|default(nomDuSite) }}"
  90.                                              loading="lazy"
  91.                                              data-src="{{ asset('/medias_front/pages/'~mediaTmp) | imagine_filter('front_fancy') }}">
  92.                                     </div>
  94.                                 {% endfor %}
  96.                             </div>
  97.                             <ol class="carousel-indicators">
  99.                                 {% for media in medias %}
  101.                                     <li data-slide-to="{{ loop.index0 }}" data-bs-slide-to="{{ loop.index0 }}"
  102.                                         {% if loop.first %}class="active"{% endif %} data-target="#lb-sYVZf768Dd"
  103.                                         data-bs-target="#lb-sYVZf768Dd"></li>
  105.                                 {% endfor %}
  107.                             </ol>
  108.                             <a role="button" href="" class="close" data-dismiss="modal" data-bs-dismiss="modal"
  109.                                aria-label="Close">
  110.                             </a>
  111.                             <a class="carousel-control-prev carousel-control" role="button" data-slide="prev"
  112.                                data-bs-slide="prev" href="#lb-sYVZf768Dd{{ id2 }}">
  113.                                 <span class="mobi-mbri mobi-mbri-arrow-prev" aria-hidden="true"></span>
  114.                                 <span class="sr-only visually-hidden">Previous</span>
  115.                             </a>
  116.                             <a class="carousel-control-next carousel-control" role="button" data-slide="next"
  117.                                data-bs-slide="next" href="#lb-sYVZf768Dd{{ id2 }}">
  118.                                 <span class="mobi-mbri mobi-mbri-arrow-next" aria-hidden="true"></span>
  119.                                 <span class="sr-only visually-hidden">Next</span>
  120.                             </a>
  121.                         </div>
  122.                     </div>
  123.                 </div>
  124.             </div>
  125.         </div>
  126.     </div>
  127. </section>