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

Open in your IDE?
  1. {% set displayOption = view.image.displayOption|default('top') %}
  2. {% set title = content.title|default %}
  3. {# we write the image into a variable to and then place it at the correct position depending on displayOption #}
  4. {% set image %}
  5.     {% set defaultFormat = '1380x' %}
  6.     {% set mobileFormat = '991x' %}
  8.     {% if displayOption in ['left', 'right'] %}
  9.         {% set defaultFormat = '400x' %}
  10.         {% set mobileFormat = '400x' %}
  11.     {% endif %}
  13.     <div class="block-image block-image__{{ displayOption }}">
  14.         {# @see https://github.com/sulu/web-twig/blob/v2.4.0/docs/image.md #}
  15.        {# {{ get_image(content.image|default, defaultFormat, {
  16.             '(max-width: 991px)': mobileFormat,
  17.         }) }}#}
  18.     </div>
  19. {% endset %}
  21. <div class="bloc-2zones block-{{content.type}} {{ content.class }}">
  22.     {% if content.titleG !=""  and  content.titleD =="" %}
  23.         <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>
  24.         <div class="row  no-gutters">
  26.             <div class="col-md-6 col-12 order-md-2  wow fadeInRight" data-wow-duration="0.8s" data-wow-delay="0.2s">
  27.                 <div class="h-100  {{ content.classD }}">
  28.                     <div class=" object-fit-img w-100 h-100 position-relative text-right">
  29.                         {% if content.imageD %}
  30.                         <img src="{{content.imageD.url}}" alt="" class=""/>
  31.                         {% endif %}
  32.                     </div>
  34.                 </div>
  35.             </div>
  36.             <div class="col-md-6 col-12 pr-md-4 order-md-1 ">
  37.                 <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 }}">
  38.                     {% if content.titleG %}
  39.                         <h2 class="title-big color-black-s d-none d-md-block">{{ content.titleG }}</h2>
  40.                     {% endif %}
  41.                     {% if content.descriptionG %}
  42.                         <div class="pt-md-4 text-grey font-16">
  43.                             {{ content.descriptionG|raw }}
  44.                         </div>
  45.                     {% endif %}
  46.                 </div>
  47.             </div>
  48.         </div>
  49.     {% elseif content.titleG =="" and content.titleD =="" and content.descriptionG !="" and content.descriptionD !="" %}{# bloc 2 textes#}
  50.          <div class="max-container-2 px-lg-0 px-2  wow fadeInDown" data-wow-duration="0.8s" data-wow-delay="0.2s">
  51.             <div class="row mx-n2 mx-lg-n5 pt-md-4 pt-2">
  52.                 <div class="col-md-6 col-12 px-lg-5px-2 mb-lg-0 mb-3">
  53.                     <div class=" text-grey font-16 {{ content.classG }}">
  54.                         {% if content.descriptionG %}
  55.                             {{ content.descriptionG|raw }}
  56.                         {% endif %}
  58.                     </div>
  60.                 </div>
  61.                 <div class="col-md-6 col-12 px-lg-5 px-2 ">
  62.                     <div class=" text-grey font-16 {{ content.classD }}">
  63.                         {% if content.descriptionD %}
  64.                             {{ content.descriptionD|raw }}
  65.                         {% endif %}
  67.                     </div>
  69.                 </div>
  70.             </div>
  71.          </div>
  72.     {% elseif content.titleD !=""  and  content.titleG ==""  %}
  73.         <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>
  74.          <div class="row  no-gutters">
  75.              <div class="col-md-6 col-12 pr-md-5  wow fadeInLeft" data-wow-duration="0.8s" data-wow-delay="0.2s">
  76.                 <div class="h-100  {{ content.classG }}">
  77.                     <div class=" object-fit-img w-not-100 h-100 position-relative text-right">
  78.                         {% if content.imageG %}
  79.                         <img src="{{content.imageG.url}}" alt="" class=""/>
  80.                         {% endif %} 
  81.                     </div>
  82.                     
  83.                 </div>
  84.             </div>
  85.             <div class="col-md-6 col-12">
  86.                 <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 }}">
  87.                     {% if content.titleD %}
  88.                         <h2 class="title-big color-black-s d-none d-md-block">{{ content.titleD }}</h2>
  89.                     {% endif %}
  90.                     {% if content.descriptionD %}
  91.                         <div class="pt-md-4 text-grey font-16">
  92.                             {{ content.descriptionD|raw }}
  93.                         </div>
  94.                     {% endif %}    
  95.                 </div>
  96.             </div>
  97.         </div>
  98.     {% endif %}
  100. </div>