templates/front/front_page/gallery/gallery-popup-slider.html.twig line 1

Open in your IDE?
  1. {% if type == 2 %}
  2.     {% set size = 3 %}
  3. {% else %}
  4.     {% set size = 4 %}
  5. {% endif %}
  6. <section data-bs-version="5.1"
  7.          class="gallery2 mbr-gallery cid-sYVVjIYuli {{ bloc.bloc_margin_top }} {{ bloc.bloc_margin_bottom }}"
  8.          id="gallery2-26">
  9.     <div class="nuagesFond"></div>
  11.     <div class="container galImg">
  13.         <div class="mbr-section-head">
  14.             {% if bloc.bloc_titre %}
  15.                 <h3 class="mbr-section-title mbr-fonts-style align-center display-2">
  16.                     <strong>{{ bloc.bloc_titre }}</strong>
  17.                 </h3>
  18.             {% endif %}
  19.             {% if bloc.bloc_sstitre %}
  20.                 <h4 class="flechebash4 mbr-section-subtitle mbr-fonts-style align-center display-5">
  21.                     {{ bloc.bloc_sstitre }}
  22.                 </h4>
  23.             {% endif %}
  24.         </div>
  26.         <div class="row mbr-gallery justify-content-center mt-4">
  28.             {% for media in medias %}
  29.                 {% set mediaTmp = media.media_fichier %}
  30.                 {% set mediaDefault = "default.jpg" %}
  31.                 {% set mediaTmp = webp(webpSupported, mediaTmp)|url_encode %}
  32.                 {% set mediaDefault = webp(webpSupported, mediaDefault) %}
  33.                 {% set id = media.media_id %}
  37.                 <div class="w-65 col-12 col-md-6 col-lg-{{ size }} item gallery-image {% if loop.first %}active{% endif %}">
  38.                     <div class="item-wrapper" data-toggle="modal" data-bs-toggle="modal"
  39.                          data-target="#sYVZf768Dd-modal-{{ id }}"
  40.                          data-bs-target="#sYVZf768Dd-modal-{{ id }}">
  41.                         {% if (media.media_alt != '' or media.media_alt != null)  and media.media_alt_display == 1 %}
  42.                             <img class="w-100 lazyload h-80"
  43.                                  src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
  44.                                  alt="{{ media.media_alt|default(bloc.bloc_titre)|default(page.ptitre~' '~page.ptitreonglet)|default(nomDuSite) }}"
  45.                                  data-slide-to="{{ loop.index0 }}" data-bs-slide-to="{{ loop.index0 }}"
  46.                                  data-target="#lb-sYVZf768D{{ id }}"
  47.                                  data-bs-target="#lb-sYVZf768Dd{{ id }}" loading="lazy"
  48.                                  data-src="{{ asset('/medias_front/pages/'~mediaTmp) | imagine_filter('front_blocGalerie'~1) }}">
  49.                             <div class="icon-wrapper">
  50.                                 <span class="mobi-mbri mobi-mbri-search mbr-iconfont mbr-iconfont-btn"></span>
  51.                             </div>
  53.                             <figcaption class="text-left text-justify p-3 textDesc">
  54.                                 {{ media.media_alt }}
  55.                             </figcaption>
  56.                         {% else %}
  57.                             <img class="w-100 lazyload"
  58.                                  src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
  59.                                  alt="{{ media.media_alt|default(bloc.bloc_titre)|default(page.ptitre~' '~page.ptitreonglet)|default(nomDuSite) }}"
  60.                                  data-slide-to="{{ loop.index0 }}" data-bs-slide-to="{{ loop.index0 }}"
  61.                                  data-target="#lb-sYVZf768Dd{{ id }}"
  62.                                  data-bs-target="#lb-sYVZf768Dd{{ id }}" loading="lazy"
  63.                                  data-src="{{ asset('/medias_front/pages/'~mediaTmp) | imagine_filter('front_blocGalerie'~1) }}">
  64.                             <div class="icon-wrapper">
  65.                                 <span class="mobi-mbri mobi-mbri-search mbr-iconfont mbr-iconfont-btn"></span>
  66.                             </div>
  67.                         {% endif %}
  69.                     </div>
  70.                 </div>
  72.             {% endfor %}
  74.         </div>
  75.         {% for media in medias %}
  76.         {% set id = media.media_id %}
  77.         <div class="modal mbr-slider" tabindex="-1" role="dialog" aria-hidden="true" id="sYVZf768Dd-modal-{{ id }}">
  78.             <div class="modal-dialog" role="document">
  79.                 <div class="modal-content">
  80.                     <div class="modal-body">
  81.                         <div class="carousel slide carousel-fade" id="lb-sYVZf768Dd{{ id }}" data-ride="carousel"
  82.                              data-bs-ride="carousel" data-interval="5000" data-bs-interval="5000">
  83.                             <div class="carousel-inner">
  85.                                 {% for media in medias %}
  86.                                     {% set mediaTmp = media.media_fichier %}
  87.                                     {% set mediaDefault = "default.jpg" %}
  88.                                     {% set mediaTmp = webp(webpSupported, mediaTmp)|url_encode %}
  89.                                     {% set mediaDefault = webp(webpSupported, mediaDefault) %}
  91.                                     <div class="carousel-item {% if loop.first %}active{% endif %}">
  92.                                         <img class="d-block w-100 lazyload"
  93.                                              src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
  94.                                              alt="{{ media.media_alt|default(bloc.bloc_titre)|default(page.ptitre~' '~page.ptitreonglet)|default(nomDuSite) }}"
  95.                                              loading="lazy"
  96.                                              data-src="{{ asset('/medias_front/pages/'~mediaTmp) | imagine_filter('front_fancy') }}">
  98.                                     </div>
  100.                                 {% endfor %}
  102.                             </div>
  103.                             <ol class="carousel-indicators">
  105.                                 {% for media in medias %}
  107.                                     <li data-slide-to="{{ loop.index0 }}" data-bs-slide-to="{{ loop.index0 }}"
  108.                                         {% if loop.first %}class="active"{% endif %} data-target="#lb-sYVZf768Dd"
  109.                                         data-bs-target="#lb-sYVZf768Dd"></li>
  111.                                 {% endfor %}
  113.                             </ol>
  114.                             <a role="button" href="" class="close" data-dismiss="modal" data-bs-dismiss="modal"
  115.                                aria-label="Close">
  116.                             </a>
  117.                             <a class="carousel-control-prev carousel-control" role="button" data-slide="prev"
  118.                                data-bs-slide="prev" href="#lb-sYVZf768Dd{{ id }}">
  119.                                 <span class="mobi-mbri mobi-mbri-arrow-prev" aria-hidden="true"></span>
  120.                                 <span class="sr-only visually-hidden">Previous</span>
  121.                             </a>
  122.                             <a class="carousel-control-next carousel-control" role="button" data-slide="next"
  123.                                data-bs-slide="next" href="#lb-sYVZf768Dd{{ id }}">
  124.                                 <span class="mobi-mbri mobi-mbri-arrow-next" aria-hidden="true"></span>
  125.                                 <span class="sr-only visually-hidden">Next</span>
  126.                             </a>
  127.                         </div>
  128.                     </div>
  129.                 </div>
  130.             </div>
  131.         </div>
  132.     </div>
  133.     {% endfor %}
  134. </section>
  135. {#
  136. <section data-bs-version="5.1" class="gallery2 cid-sYtlpndbLA {{ bloc.bloc_margin_top }} {{ bloc.bloc_margin_bottom }}"
  137.          id="gallery2-36">
  139.     <div class="container col-10 col-xl-7">
  140.         <div class="media-container-column mb-5">
  141.             {% if bloc.bloc_titre %}
  142.                 <h3 class="mbr-section-title mbr-fonts-style display-2">
  143.                     <strong>{{ bloc.bloc_titre }}</strong>
  144.                 </h3>
  145.             {% endif %}
  146.             {% if bloc.bloc_sstitre %}
  147.                 <h4 class="mbr-section-sub-title mbr-fonts-style display-5">
  148.                     {{ bloc.bloc_sstitre }}
  149.                 </h4>
  150.             {% endif %}
  151.         </div>
  153.         {% set newLoop = 1 %}
  155.         {% set nbLoop = 0 %}
  157.         {% set loopOk3 = 0 %}
  158.         {% set loopOk2 = 0 %}
  160.         {% for media in medias %}
  162.             {% set mediaTmp = media.media_fichier %}
  163.             {% set mediaDefault = "default.jpg" %}
  164.             {% set mediaTmp = webp(webpSupported, mediaTmp)|url_encode %}
  165.             {% set mediaDefault = webp(webpSupported, mediaDefault) %}
  167.             {% if newLoop == 1 %}
  168.                 <div class="row row-content justify-content-center containerPicture">
  169.                 {% set newLoop = 0 %}
  170.             {% endif %}
  172.             {% if ((medias|length - loop.index0) >= 3 or (loop3 is defined and loop3 == 1)) and loopOk3 == 0 %}
  174.                 {% set loop3 = 1 %}
  176.                 <div class="card col-12 col-lg-3 col-md-6 col-lg-4">
  177.                     <div class=" {% if nbLoop == 1 %} secondImage {% endif %}">
  178.                         <div class="card-img small">
  179.                             <a
  180.                                     {% if media.media_lien %}
  181.                                         href="{{ media.media_lien }}"
  182.                                         {% if media.media_is_blank == 1 %} target="_blank" rel="noreferrer" {% endif %}
  183.                                     {% else %}
  184.                                         href="{{ asset('/medias_front/pages/'~mediaTmp) | imagine_filter('front_fancy') }}" target="_blank"
  185.                                     {% endif %}
  186.                                     rel="{{ bloc.bloc_titre|default(page.ptitre~' '~page.ptitreonglet)|default(nomDuSite) }}"
  187.                                     title="{{ media.media_alt|default(bloc.bloc_titre)|default(page.ptitre~' '~page.ptitreonglet)|default(nomDuSite) }}"
  188.                                     style="background-image:url({{ asset('/medias_front/pages/'~mediaTmp) | imagine_filter('front_blocGalerie'~type) }});"
  189.                                     data-fancybox>
  190.                                 <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
  191.                                      alt="{{ media.media_alt|default(bloc.bloc_titre)|default(page.ptitre~' '~page.ptitreonglet)|default(nomDuSite) }}"
  192.                                      loading="lazy" class="lazyload"
  193.                                      data-src="{{ asset('/medias_front/pages/'~mediaTmp) | imagine_filter('front_blocGalerie'~type) }}">
  194.                             </a>
  195.                         </div>
  196.                     </div>
  197.                     {% if media.media_lien %}
  198.                         <a href="{{ media.media_lien }}" {% if media.media_is_blank == 1 %} target="_blank" rel="noreferrer" {% endif %}
  199.                            class="linkBtn"></a>
  200.                     {% endif %}
  201.                     {% if media.media_alt_display %}
  202.                         <div class="textContainer d-flex justify-content-center">
  203.                             <span class="text-center {% if nbLoop == 1 %} secondImage {% endif %}">{{ media.media_alt }}</span>
  204.                         </div>
  205.                     {% endif %}
  207.                 </div>
  209.                 {% set nbLoop = nbLoop + 1 %}
  211.                 {% if nbLoop == 3 %}
  212.                     {% set loop3 = 0 %}
  213.                     {% set nbLoop = 0 %}
  214.                     {% set newLoop = 1 %}
  215.                     {% set loopOk3 = 1 %}
  216.                 {% endif %}
  219.             {% elseif ((medias|length - loop.index0) == 2 or (loop2 is defined and loop2 == 1) ) or (((medias|length - loop.index0) >= 2 or (loop2 is defined and loop2 == 1)) and loopOk2 == 0) %}
  221.                 {% set loop2 = 1 %}
  223.                 <div class="card col-12 col-lg-3 col-md-6 col-lg-6">
  224.                     <div class="card-wrapper">
  225.                         <div class="card-img small">
  226.                             <a
  227.                                     {% if media.media_lien %}
  228.                                         href="{{ media.media_lien }}"
  229.                                         {% if media.media_is_blank == 1 %} target="_blank" rel="noreferrer" {% endif %}
  230.                                     {% else %}
  231.                                         href="{{ asset('/medias_front/pages/'~mediaTmp) | imagine_filter('front_fancy') }}" target="_blank"
  232.                                     {% endif %}
  233.                                     rel="{{ bloc.bloc_titre|default(page.ptitre~' '~page.ptitreonglet)|default(nomDuSite) }}"
  234.                                     title="{{ media.media_alt|default(bloc.bloc_titre)|default(page.ptitre~' '~page.ptitreonglet)|default(nomDuSite) }}"
  235.                                     style="background-image:url({{ asset('/medias_front/pages/'~mediaTmp) | imagine_filter('front_blocGalerie'~type) }});"
  236.                                     data-fancybox>
  237.                                 <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
  238.                                      alt="{{ media.media_alt|default(bloc.bloc_titre)|default(page.ptitre~' '~page.ptitreonglet)|default(nomDuSite) }}"
  239.                                      loading="lazy" class="lazyload"
  240.                                      data-src="{{ asset('/medias_front/pages/'~mediaTmp) | imagine_filter('front_blocGalerie'~type) }}">
  241.                             </a>
  242.                         </div>
  243.                     </div>
  244.                 </div>
  246.                 {% set nbLoop = nbLoop + 1 %}
  248.                 {% if nbLoop == 2 %}
  249.                     {% set loop2 = 0 %}
  250.                     {% set nbLoop = 0 %}
  251.                     {% set newLoop = 1 %}
  252.                     {% set loopOk2 = 1 %}
  253.                 {% endif %}
  256.             {% elseif loopOk2 == 1 %}
  257.                 <div class="card col-md-6 col-lg-12">
  258.                     <div class="card-wrapper">
  259.                         <div class="card-img small">
  260.                             <a
  261.                                     {% if media.media_lien %}
  262.                                         href="{{ media.media_lien }}"
  263.                                         {% if media.media_is_blank == 1 %} target="_blank" rel="noreferrer" {% endif %}
  264.                                     {% else %}
  265.                                         href="{{ asset('/medias_front/pages/'~mediaTmp) | imagine_filter('front_fancy') }}" target="_blank"
  266.                                     {% endif %}
  267.                                     rel="{{ bloc.bloc_titre|default(page.ptitre~' '~page.ptitreonglet)|default(nomDuSite) }}"
  268.                                     title="{{ media.media_alt|default(bloc.bloc_titre)|default(page.ptitre~' '~page.ptitreonglet)|default(nomDuSite) }}"
  269.                                     style="background-image:url({{ asset('/medias_front/pages/'~mediaTmp) | imagine_filter('front_blocGalerie'~type) }});"
  270.                                     data-fancybox>
  271.                                 <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
  272.                                      alt="{{ media.media_alt|default(bloc.bloc_titre)|default(page.ptitre~' '~page.ptitreonglet)|default(nomDuSite) }}"
  273.                                      loading="lazy" class="lazyload"
  274.                                      data-src="{{ asset('/medias_front/pages/'~mediaTmp) | imagine_filter('front_blocGalerie'~type) }}">
  275.                             </a>
  276.                         </div>
  277.                     </div>
  278.                 </div>
  280.                 {% set nbLoop = nbLoop + 1 %}
  282.                 {% if nbLoop == 1 %}
  283.                     {% set nbLoop = 0 %}
  284.                     {% set newLoop = 1 %}
  285.                     {% set loopOk3 = 0 %}
  286.                     {% set loopOk2 = 0 %}
  287.                 {% endif %}
  289.             {% endif %}
  291.             {% if newLoop == 1 %}
  292.                 </div>
  293.             {% endif %}
  295.         {% endfor %}
  296.     </div>
  297. </section> #}