templates/includes/blocks/block 3 zones.html.twig line 1

Open in your IDE?
  1. {% set displayOption = view.image.displayOption|default('top') %}
  2. {% set title = content.title|default %}
  4. {# we write the image into a variable to and then place it at the correct position depending on displayOption #}
  5. {% set image %}
  6.     {% set defaultFormat = '1380x' %}
  7.     {% set mobileFormat = '991x' %}
  9.     {% if displayOption in ['left', 'right'] %}
  10.         {% set defaultFormat = '400x' %}
  11.         {% set mobileFormat = '400x' %}
  12.     {% endif %}
  13.     <div class="block-image block-image__{{ displayOption }}"></div>
  14. {% endset %}
  15. {% if  content.class == "bloc-3-zone-perso" %}
  16.     <div class="bloc-3 {{ content.class }} pb-md-5 pb-3 pt-3">
  17.         <div class=" {{ 'bloc-details' in content.classG and 'bloc-details' in content.classC and 'bloc-details' in content.classD ? 'max-container-3' : 'max-container-4' }} mx-auto px-0 pb-lg-4">
  18.             <div class="row mx-lg-m4 mx-md-n2 mx-n1">
  19.                 {% if content.titleG  or content.descriptionG %}
  20.                     <div class="col-4 {{ content.titleG == '' ? "" : "text-center" }} px-lg-4 px-md-2 px-1">
  21.                         <div class="h-100  wow fadeInDown" data-wow-duration="0.8s" data-wow-delay="0.2s">
  23.                             <div class=" object-fit-img text-center">
  24.                                 {% if content.imageG and content.imageG.url %}
  25.                                 <img src="{{content.imageG.url}}" alt="" class=""/>
  26.                                 {% endif %}
  27.                             </div>
  28.                             <div class="title-mediumss">{{ content.titleG }}</div>
  29.                             <div class="text-grey {{ 'bloc-details' in content.classG ? 'bloc-details' : '' }}">{{ content.descriptionG|raw }}</div>
  32.                         </div>
  33.                     </div>
  34.                 {% endif %}
  35.                 {% if content.titleC  or content.descriptionC %}
  36.                     <div class="col-4 {{ content.titleC == '' ? "" : "text-center" }} px-lg-4 px-md-2 px-1">
  37.                         <div class="h-100    wow fadeInDown" data-wow-duration="0.8s" data-wow-delay="0.2s">
  38.                             <div class=" object-fit-img  text-center">
  39.                                 {% if content.imageC and content.imageC.url %}
  40.                                 <img src="{{content.imageC.url}}" alt="" class=""/>
  41.                                 {% endif %}
  42.                             </div>
  43.                             <div class="title-mediumss">{{ content.titleC }}</div>
  44.                             <div class="text-grey {{ 'bloc-details' in content.classC ? 'bloc-details' : '' }}">{{ content.descriptionC|raw }}</div>
  46.                         </div>
  47.                     </div>
  48.                 {% endif %}
  49.                 {% if content.titleD  or content.descriptionD %}
  50.                     <div class="col-4  {{ content.titleD == '' ? "" : "text-center" }} px-lg-4 px-md-2 px-1">
  51.                         <div class="h-100    wow fadeInDown" data-wow-duration="0.8s" data-wow-delay="0.2s">
  52.                             <div class=" object-fit-img  text-center">
  53.                                 {% if content.imageD and content.imageD.url %}
  54.                                     <img src="{{content.imageD.url}}" alt="" class=""/>
  55.                                 {% endif %}
  56.                             </div>
  57.                             <div class="title-mediumss">{{ content.titleD }}</div>
  58.                             <div class="text-grey {{ 'bloc-details' in content.classD ? 'bloc-details' : '' }}">{{ content.descriptionD|raw }}</div>
  59.                         </div>
  60.                     </div>
  61.                 {% endif %}
  63.             </div>
  65.          </div>
  67.         <!-- Bouton Retour site && Reserver -->
  68.         {% if 'bloc-details' in content.classG and 'bloc-details' in content.classC and 'bloc-details' in content.classD %}
  69.             <div class="row">
  70.                 <div class="col text-right pt-3">
  71.                     <a href="/" class="btn btn-link-white transition-bgcolor bg-white-s minw-sm">RETOUR SUR LE SITE</a>
  72.                 </div>
  73.                 <div class="col text-left pt-3">
  74.                     <a href="/reservation" class="btn btn-link transition-bgcolor bg-green-s minw-sm">Je réserve !</a>
  75.                 </div>
  76.             </div>
  77.         {% endif %}
  79.     </div>
  81.  {% else %}
  82.     <div class="bloc-3 {{ content.class }}">
  83.     {% if content.titleG  or content.descriptionG %}
  84.     <div class=" d-block d-md-none text-center px-3 show-br-mobile"><h2 class="title-big color-black-s line-h-100">{{ content.titleG }}</h2></div>
  85.     <div class="row  no-gutters {{ content.classD }}">
  86.     
  87.         <div class="col-md-6 col-12 order-md-2 ">
  88.             <div class="h-100 {{ content.classD }}  wow fadeInRight" data-wow-duration="0.8s" data-wow-delay="0.2s">
  89.                 <div class=" object-fit-img w-not-100 h-100 position-relative text-right">
  90.                     {% if content.imageD and content.imageD.url %}
  91.                     <img src="{{content.imageD.url}}" alt="" class=""/>  
  92.                     {% endif %}  
  93.                 </div>
  94.                 {% if content.imageC %}
  95.                 <div class="absolute-img-border left-pos absolute-img-position d-none d-md-block">
  96.                     <img src="{{content.imageC.url}}" alt="" class=""/>  
  97.                 </div>
  98.                 {% endif %} 
  99.             </div>
  100.         </div>
  101.         <div class="col-md-6 col-12 pr-md-4 order-md-1 "> 
  102.             <div class="max-container-txt px-md-4 mr-md-0 mx-auto  position-relative bg-form-grey pb-lg-5 pt-md-0 pt-3  px-3 {{ content.classG }}"> 
  103.                 {% if content.titleG %}
  104.                     <h2 class="title-big color-black-s d-none d-md-block">{{ content.titleG }}</h2>
  105.                 {% endif %}
  106.                 {% if content.descriptionG %}
  107.                     <div class="pt-md-4 text-grey font-16">
  108.                         {{ content.descriptionG|raw }}
  109.                     </div>
  110.                 {% endif %} 
  111.                 
  112.                 {% if content.imageG %}
  113.                 <div class="py-md-0 py-4"></div>
  114.                 <div class="absolute-img-position left-pos-bottom maxw-img absolute-img-border relative-img-mobile  wow fadeInDown" data-wow-duration="0.8s" data-wow-delay="0.2s">
  115.                     <img src="{{content.imageG.url}}" alt="">
  116.                 </div>   
  117.                 {% endif %} 
  118.                 {% if   "bloc-about-3" in content.class  %} 
  119.                 {% else %} 
  120.                     {% if content.imageC %}
  121.                     <div class="absolute-img-border right-pos max-w-img-mob absolute-img-position d-block d-md-none {{ content.classC }}">
  122.                         <img src="{{content.imageC.url}}" alt="" class=""/>  
  123.                     </div>
  124.                     {% endif %} 
  125.                 {% endif %} 
  126.                 
  127.             </div>
  128.         </div>  
  129.         
  130.     </div>
  131.     {% if  "bloc-about-3 " in content.class  %} 
  132.         {% if content.imageC %} 
  133.         <div class="d-block d-md-none position-relative pt-3 px-4 px-sm-5 img-before-reins text-center">
  134.             <div class=" absolute-img-border position-relative pt img-before-reinsurance d-inline-block">
  135.                 <img src="{{content.imageC.url}}" alt="" class=""/>  
  136.             </div>
  137.         </div>  
  138.          {% endif %}  
  139.          {% endif %} 
  140.     {% else %}
  141.         <div class=" d-block d-md-none text-center px-3 show-br-mobile pb-2"><h2 class="title-big color-black-s line-h-100">{{ content.titleD }}</h2></div>
  142.         <div class="row  no-gutters">
  143.              <div class="col-md-6 col-12 pr-md-5">
  144.                 <div class="h-100 {{ content.classG }}   wow fadeInLeft" data-wow-duration="0.8s" data-wow-delay="0.2s">
  145.                     <div class=" object-fit-img w-not-100 h-100 position-relative text-right">
  146.                         {% if content.imageG %}
  147.                         <img src="{{content.imageG.url}}" alt="" class=""/>
  148.                         {% endif %} 
  149.                     </div>
  150.                     {% if content.imageC %}
  151.                     <div class="absolute-img-border left-pos-img absolute-img-position d-none d-md-block  wow fadeInDown" data-wow-duration="0.8s" data-wow-delay="0.2s">
  152.                         <img src="{{content.imageC.url}}" alt="" class=""/>   
  153.                     </div>
  154.                     {% endif %} 
  155.                 </div>
  156.             </div>
  157.             <div class="col-md-6 col-12 ">
  158.                 <div class="max-container-txt pl-md-0 ml-md-0 mx-auto position-relative bg-form-grey pb-lg-5 h-100 d-flex flex-column justify-content-center pt-md-0 pt-3  px-3 {{ content.classD }}">
  159.                     {% if content.titleD %}
  160.                         <h2 class="title-big color-black-s d-none d-md-block">{{ content.titleD }}</h2>
  161.                     {% endif %}
  162.                     {% if content.descriptionD %}
  163.                         <div class="pt-md-4 text-grey font-16">
  164.                             {{ content.descriptionD|raw }}
  165.                         </div>
  166.                     {% endif %}  
  167.                     {% if content.imageC %}
  168.                     <div class="absolute-img-border right-pos max-w-img-mob absolute-img-position d-block d-md-none {{ content.classC }} wow fadeInDown" data-wow-duration="0.8s" data-wow-delay="0.2s">
  169.                         <img src="{{content.imageC.url}}" alt="" class=""/>  
  170.                     </div>
  171.                     {% endif %}   
  172.                 </div>
  173.             </div>
  174.         </div>
  175.     {% endif %}
  176.         
  177.        
  178.         
  179.     </div>
  180. <!--/div-->
  181.  {% endif %}