templates/front/front_home/autopromo_zone.html.twig line 1

Open in your IDE?
  1. {% if size == 'full' %}
  2. <section data-bs-version="5.1"
  3.          class="slider1 directm4_slider1 cid-sYsP7EgLKR justify-content-center"
  4.          id="slider1-1v-{{ iDtabPromoZone }}">
  6.     <div class="container-fluid">
  7.         <div class="carousel slide carousel-fade" id="sYIUsJIk6l-{{ iDtabPromoZone }}" data-ride="carousel"
  8.              data-bs-ride="carousel"
  9.         >
  10.             {# <ol class="carousel-indicators">
  11.                     {% for promo in tabPromoZone %}
  12.                         <li data-slide-to="{{ loop.index0 }}" data-bs-slide-to="{{ loop.index0 }}"
  13.                             {% if loop.first %}class="active"{% endif %}
  14.                             data-target="#sYIUsJIk6l-{{ iDtabPromoZone }}"
  15.                             data-bs-target="#sYIUsJIk6l-{{ iDtabPromoZone }}">
  16.                         </li>
  17.                     {% endfor %}
  18.                 </ol> #}
  19.             <div class="carousel-inner">
  20.                 {% for promo in tabPromoZone %}
  22.                     {% set mediaTmp = promo.image %}
  23.                     {% set mediaTmp = webp(webpSupported, promo.image) %}
  26.                     <div class="carousel-item slider-image item {% if loop.first %}active{% endif %}">
  27.                         <div class="item-wrapper"
  28.                              style="background-image: url('{{ websiteroot }}{{ asset('/medias_front/autopromo/' ~ mediaTmp) }} ')">
  30.                             <div id="centerbig"
  31.                                  class="h-100 carousel-caption justify-content-start align-items-end flex-column mt-10 visible">
  33.                                 <div id="container" class="row justify-content-center">
  34.                                     <div class="col-12 containerTitleHome">
  35.                                         {% if promo.title %}op
  36.                                             <h2 class="visible mbr-section-title mbr-fonts-style mbr-white display-1">
  37.                                                 {{ promo.title }}
  38.                                             </h2>
  39.                                         {% endif %}
  40.                                         {% if promo.subtitle %}
  41.                                             <h3 class="visible mbr-section-subtitle mbr-fonts-style mb-3 mbr-white display-2">
  42.                                                 {{ promo.subtitle }}
  43.                                             </h3>
  44.                                         {% endif %}
  47.                                     </div>
  49.                                 </div>
  50.                                 <div id="bigtitle"
  51.                                      class="d-flex flex-column justify-content-end">
  52.                                     <h1 class="noFadeInUp">La plus haute station thermale</h1>
  53.                                     <h2 class="noFadeInUp">de France</h2>
  54.                                     <div class="mirror"></div>
  55.                                 </div>
  57.                             </div>
  58.                             <div class="divButonReserve">
  59.                                 <a href="{{ path('front_cures') }}" class="d-flex justify-content-center">
  60.                                     <button class="butonReserve">je réserve</button>
  61.                                 </a>
  62.                             </div>
  63.                             <div class="vagueBlanche"></div>
  64.                             <div class="blocblanc"></div>
  65.                             <div id="pagedown" class="d-flex align-items-center justify-content-center">
  66.                                 <a class="noFadeInUp" href="#footCoordones"
  67.                                    aria-label="bouton pour descendre en bas de page">
  68.                                     <div class="imgNavbot"></div>
  69.                                 </a>
  70.                             </div>
  71.                         </div>
  72.                     </div>
  73.                 {% endfor %}
  76.             </div>
  77.             {% if tabPromoZone|length > 1 %}
  78.                 <a class="carousel-control carousel-control-prev" role="button" data-slide="prev"
  79.                    data-bs-slide="prev"
  80.                    href="#sYIUsJIk6l-{{ iDtabPromoZone }}">
  81.                     <span class="mbri-left" aria-hidden="true"></span>
  82.                     <span class="sr-only visually-hidden">Previous</span>
  83.                 </a>
  84.                 <a class="carousel-control carousel-control-next" role="button" data-slide="next"
  85.                    data-bs-slide="next"
  86.                    href="#sYIUsJIk6l-{{ iDtabPromoZone }}">
  87.                     <span class="mbri-right" aria-hidden="true"></span>
  88.                     <span class="sr-only visually-hidden">Next</span>
  89.                 </a>
  90.             {% endif %}
  91.         </div>
  92.     </div>
  93. </section>
  94. {% else %}
  95. <section data-bs-version="5.1" class="pt-0 pb-5 slider2  mbr-fullscreen d-flex flex-column"
  96.          id="slider2-44-{{ iDtabPromoZone }}">
  97.     <div class="degraderBlanc"></div>
  98.     <div class="d-flex justify-content-center flex-column align-items-center bloctextUpslide">
  99.         <h3>Bienvenue aux</h3>
  100.         <h2>Thermes de Barèges</h2>
  101.         <p class="w-40">Soignez le corps et l'esprit grâce aux bienfaits des sources thermales dans un cadre hors du
  102.             commun </p>
  103.     </div>
  104.     <div class=" container-fluid ">
  105.         <div id="containerPromo2" class="w-100">
  106.             <div class="d-flex justify-content-center align-items-center flex-column">
  109.                 <div class="carousel slide w-100 " id="sYJPeuhotV-{{ iDtabPromoZone }}"
  110.                      data-ride="carousel"
  111.                      data-bs-ride="carousel"
  112.                      data-interval="8000"
  113.                      data-bs-interval="8000"
  114.                 >
  117.                     <div class="carousel-inner w-100 containerPromo2">
  118.                         {% set idCarou = 0 %}
  119.                         {% for promo in tabPromoZone %}
  120.                             {% set idCarou = idCarou + 1 %}
  121.                             {% set mediaTmp = promo.image %}
  122.                             {% set mediaTmp = webp(webpSupported, promo.image) %}
  123.                             <div class="midtest h-100 carousel-item slider{% if promo.image %}-image{% endif %} item {% if loop.first %}active{% endif %} align-items-center justify-content-center">
  124.                                 {% if promo.title  or promo.subtitle %}
  125.                                 {% if promo.image %}
  126.                                     <div class="item-wrapper blocAutoImg"
  127.                                          style="background-image: {{ asset('/medias_front/autopromo/' ~ mediaTmp) }} ">
  128.                                         {% if promo.url %}
  129.                                         <a href="{{ promo.url }}" aria-label="Zone auto promo">
  130.                                             {% else %}
  131.                                             <a href="{{ asset('/medias_front/autopromo/' ~ mediaTmp) | imagine_filter('front_autopromo2') }}"
  132.                                                data-fancybox aria-label="Zone auto promo">
  133.                                                 {% endif %}
  134.                                                 <div id="imgpromo2" class="d-block lazyload"
  135.                                                      style="background-image: url({{ asset('/medias_front/autopromo/' ~ mediaTmp) | imagine_filter('front_autopromo2') }})">
  136.                                                 </div>
  137.                                             </a>
  138.                                             {#  <div class="carousel-caption d-none d-md-block">
  139.                                             <p class="mbr-section-text mbr-fonts-style display-7">
  140.                                                 Click on the image to edit slides.
  141.                                             </p>
  142.                                         </div> #}
  143.                                     </div>
  144.                                 {% endif %}
  146.                                 <div class="containerTitles d-flex  flex-column mx-4">
  147.                                     {# <div class="aLaUne d-none d-lg-block"></div> #}
  148.                                     {% endif %}
  149.                                     <div class="tetepromo2 d-flex justify-content-around align-items-center pt-2 flex-wrap">
  150.                                         <ol class="carousel-indicators" id="slide">
  151.                                             {% for promo in tabPromoZone %}
  152.                                                 <div data-slide-to="{{ loop.index0 }}"
  153.                                                      data-bs-slide-to="{{ loop.index0 }}" id="test" class="puce ">
  154.                                                     <li data-slide-to="{{ loop.index0 }}"
  155.                                                         data-bs-slide-to="{{ loop.index0 }}"
  156.                                                         {% if loop.first %}class="active"{% endif %}
  157.                                                         data-target="#sYJPeuhotV-{{ iDtabPromoZone }}"
  158.                                                         data-bs-target="#sYJPeuhotV-{{ iDtabPromoZone }}">
  159.                                                     </li>
  160.                                                 </div>
  161.                                             {% endfor %}
  162.                                         </ol>
  164.                                     </div>
  166.                                     <div class="tiltepromo2 d-flex justify-content-start flex-column m-1">
  167.                                         {% if promo.url %}
  168.                                             <a href="{{ promo.url }}">
  169.                                                 {% if promo.title %}
  170.                                                     <h5 class="mbr-section-title mt-4 mt-lg-4 mbr-fonts-style mbr-white display-5">
  171.                                                         {{ promo.title }}
  172.                                                     </h5>
  173.                                                 {% endif %}
  174.                                                 {% if promo.subtitle %}
  175.                                                     <h6 class="mbr-section-subtitle  mbr-fonts-style  mbr-white display-6">
  176.                                                         {{ promo.subtitle }}
  177.                                                     </h6>
  178.                                                 {% endif %}
  179.                                             </a>
  180.                                         {% else %}
  181.                                             {% if promo.title %}
  182.                                                 <h5 class="mbr-section-title mt-4 mt-lg-4 mbr-fonts-style mbr-white display-5">
  183.                                                     {{ promo.title }}
  184.                                                 </h5>
  185.                                             {% endif %}
  186.                                             {% if promo.subtitle %}
  187.                                                 <h6 class="mbr-section-subtitle  mbr-fonts-style  mbr-white display-6">
  188.                                                     {{ promo.subtitle }}
  189.                                                 </h6>
  190.                                             {% endif %}
  191.                                         {% endif %}
  192.                                     </div>
  193.                                     {% if promo.url %}
  194.                                         <a class="btnPromo mb-0 promoplus" href="{{ promo.url }}"
  195.                                            aria-label="bouton en s'avoir plus">
  196.                                             <img class="noFadeInUp lepetitPlus"
  197.                                                  src="{{ websiteroot }}{{ asset('/medias_front/+.svg') }}"
  198.                                                  alt="+">
  199.                                         </a>
  200.                                     {% endif %}
  201.                                     <div class="lesFlechesCarousel">
  202.                                         {% set maxPromo = 0 %}
  203.                                         {% for promo in tabPromoZone %}
  204.                                             {% set maxPromo = maxPromo + 1 %}
  205.                                         {% endfor %}
  206.                                         {% if maxPromo > 1 %}
  207.                                             <a class="carouselflecheprecedente carouselfleche carousel-control"
  208.                                                role="button" data-slide="prev"
  209.                                                data-bs-slide="prev"
  210.                                                href="#sYJPeuhotV-{{ iDtabPromoZone }}" aria-label="fleche precedente">
  211.                                                 <span class="flecheprecedente" aria-hidden="true"></span>
  212.                                                 <span class="sr-only visually-hidden">Previous</span>
  213.                                             </a>
  214.                                         {% endif %}
  215.                                         <div class="carouselChiffre">
  216.                                             <p><strong>{{ idCarou }}</strong> / <strong>{{ maxPromo }}</strong></p>
  217.                                         </div>
  218.                                         {% if maxPromo > 1 %}
  219.                                             <a class="carouselflechesuivante carouselfleche carousel-control"
  220.                                                role="button" data-slide="next"
  221.                                                data-bs-slide="next"
  222.                                                href="#sYJPeuhotV-{{ iDtabPromoZone }}" aria-label="fleche suivante">
  223.                                                 <span class="flechesuivante" aria-hidden="true"></span>
  224.                                                 <span class="sr-only visually-hidden">Next</span>
  225.                                             </a>
  226.                                         {% endif %}
  228.                                     </div>
  231.                                     {#                                        <div id="complet" #}
  232.                                     {#                                             class=" containerTitles d-flex justify-content-center align-items-center flex-column mx-4"> #}
  233.                                     {#                                            {% if promo.subtitle %} #}
  234.                                     {#                                                <h6 class="mx-2 mbr-section-subtitle mb-2 mb-lg-2 mbr-fonts-style  mbr-white display-6"> #}
  235.                                     {#                                                    {{ promo.subtitle }} #}
  236.                                     {#                                                </h6> #}
  237.                                     {#                                            {% endif %} #}
  238.                                     {#                                            <div id="txt" #}
  239.                                     {#                                                 class="mx-5 align-items-center mt-auto {% if promo.url == null %}pb-45 pb-51{% endif %}"> #}
  240.                                     {#                                                <p>Finis les #}
  241.                                     {#                                                    rectangles bleus #}
  242.                                     {#                                                    qui #}
  243.                                     {#                                                    écorchent #}
  244.                                     {#                                                    le paysage. Entrez en #}
  245.                                     {#                                                    pente #}
  246.                                     {#                                                    douce #}
  247.                                     {#                                                    dans la piscine lagon NaturaSwim. Laissez libre champ à votre #}
  248.                                     {#                                                    imagination...</p> #}
  250.                                     {#                                                <p class="mb-5">Les possibilités #}
  251.                                     {#                                                    sont infinies : formes, dimensions, profondeur de #}
  252.                                     {#                                                    bain, #}
  253.                                     {#                                                    rochers, cascades, arbres, végétaux sont agencés pour vous offrir un #}
  254.                                     {#                                                    spectacle sublime et apaisant, en parfaite harmonie avec votre #}
  255.                                     {#                                                    environnement.</p> #}
  258.                                     {#                                            </div> #}
  260.                                     {#                                        </div> #}
  263.                                     {% if promo.title  or promo.subtitle %}
  264.                                 </div>
  265.                                 {% endif %}
  268.                             </div>
  270.                         {% endfor %}
  271.                     </div>
  272.                     {# <a class="carousel-control carousel-control-prev" role="button" data-slide="prev"
  273.                            data-bs-slide="prev" href="#sYJPeuhotV-{{ iDtabPromoZone }}">
  274.                             <span class="mobi-mbri mobi-mbri-arrow-prev" aria-hidden="true"></span>
  275.                             <span class="sr-only visually-hidden">Previous</span>
  276.                         </a>
  277.                         <a class="carousel-control carousel-control-next" role="button" data-slide="next"
  278.                            data-bs-slide="next" href="#sYJPeuhotV-{{ iDtabPromoZone }}">
  279.                             <span class="mobi-mbri mobi-mbri-arrow-next" aria-hidden="true"></span>
  280.                             <span class="sr-only visually-hidden">Next</span>
  281.                         </a> #}
  282.                 </div>
  283.             </div>
  284.         </div>
  285.         {% endif %}
  286.     </div>
  287. </section>