templates/front/slices/slice_text_picture.html.twig line 1

Open in your IDE?
  1. {# COLORS VARIATIONS #}
  2. {% set theme = slice.theme %}
  4. {% set accentColor = 'orange' %}
  5. {% set buttonClass = 'button--orange' %}
  7. {% if theme == 'blue' %}
  8. {% set accentColor = 'violet' %}
  9. {% set buttonClass = 'button--violet' %}
  10. {% endif %}
  12. {# ALIGNMENT VARIATIONS #}
  13. {% set alignment = slice.alignment %}
  15. {% set secondaryImage = false %}
  16. {% if slice.imageTwo is defined and slice.imageTwo.singleMedia.publicId is not null %}
  17.     {% set secondaryImage = true %}
  18. {% endif %}
  20. <section class="slice slice--text-picture slice--text-picture--{{ theme }} slice--text-picture--{{ alignment }}">
  21.     <div class="fluid-grid">
  22.         <div class="row">
  23.             <div class="col-12 lg-col-5 relative {% if alignment == 'right' %} lg:order-2 lg-col-offset-7{% endif %}">
  24.                 <div class="relative inset-0">
  25.                     <div class="visual__wrapper">
  26.                         {% if slice.image.singleMedia is defined and slice.image.singleMedia.publicId %}
  27.                             <picture>
  28.                                 <source media="(max-width: 420px)"
  29.                                         data-srcset="{{ cloudinary_media(slice.image.singleMedia, 'f_auto,c_fill,q_auto,w_409,h_409') }} 1x, {{ cloudinary_media(slice.image.singleMedia, 'f_auto,c_fill,q_auto,w_409,h_409,dpr_2') }} 2x">
  30.                                 <source media="(max-width: 1023px)"
  31.                                         data-srcset="{{ cloudinary_media(slice.image.singleMedia, 'f_auto,c_fill,q_auto,w_580,h_580') }} 1x, {{ cloudinary_media(slice.image.singleMedia, 'f_auto,c_fill,q_auto,w_580,h_580,dpr_2') }} 2x">
  32.                                 <source media="(max-width: 1279px)"
  33.                                         data-srcset="{{ cloudinary_media(slice.image.singleMedia, 'f_auto,c_fill,q_auto,w_614,h_614') }} 1x, {{ cloudinary_media(slice.image.singleMedia, 'f_auto,c_fill,q_auto,w_614,h_614,dpr_2') }} 2x">
  34.                                 <source media="(min-width: 1280px)"
  35.                                         data-srcset="{{ cloudinary_media(slice.image.singleMedia, 'f_auto,c_fill,q_auto,w_690,h_690') }} 1x, {{ cloudinary_media(slice.image.singleMedia, 'f_auto,c_fill,q_auto,w_690,h_690,dpr_2') }} 2x">
  36.                                 <img class="lazyload visual visual--main relative z-1 round w-full" height="690" width="690"
  37.                                      data-src="{{ cloudinary_media(slice.image.singleMedia, 'f_auto,q_auto,c_fill,w_690,h_690') }}"
  38.                                      alt="{{ slice.image.singleMedia.alt }}">
  39.                             </picture>
  40.                         {% endif %}
  42.                         {% if secondaryImage %}
  43.                             <picture>
  44.                                 <source media="(max-width: 420px)"
  45.                                         data-srcset="{{ cloudinary_media(slice.imageTwo.singleMedia, 'f_auto,c_fill,q_auto,w_165,h_165') }} 1x, {{ cloudinary_media(slice.imageTwo.singleMedia, 'f_auto,c_fill,q_auto,w_165,h_165,dpr_2') }} 2x">
  46.                                 <source media="(max-width: 1023px)"
  47.                                         data-srcset="{{ cloudinary_media(slice.imageTwo.singleMedia, 'f_auto,c_fill,q_auto,w_216,h_216') }} 1x, {{ cloudinary_media(slice.imageTwo.singleMedia, 'f_auto,c_fill,q_auto,w_216,h_216,dpr_2') }} 2x">
  48.                                 <source media="(max-width: 1279px)"
  49.                                         data-srcset="{{ cloudinary_media(slice.imageTwo.singleMedia, 'f_auto,c_fill,q_auto,w_214,h_214') }} 1x, {{ cloudinary_media(slice.imageTwo.singleMedia, 'f_auto,c_fill,q_auto,w_214,h_214,dpr_2') }} 2x">
  50.                                 <source media="(min-width: 1280px)"
  51.                                         data-srcset="{{ cloudinary_media(slice.imageTwo.singleMedia, 'f_auto,c_fill,q_auto,w_244,h_244') }} 1x, {{ cloudinary_media(slice.imageTwo.singleMedia, 'f_auto,c_fill,q_auto,w_244,h_244,dpr_2') }} 2x">
  52.                                 <img class="lazyload visual visual--secondary absolute bottom-0 z-2 round w-full" height="244"
  53.                                      width="244"
  54.                                      data-src="{{ cloudinary_media(slice.imageTwo.singleMedia, 'f_auto,q_auto,c_fill,w_244,h_244') }}"
  55.                                      alt="{{ slice.imageTwo.singleMedia.alt }}">
  56.                             </picture>
  57.                         {% else %}
  58.                             <div class="deco absolute bottom-0 z-2 round"></div>
  59.                         {% endif %}
  60.                     </div>
  61.                 </div>
  62.             </div>
  63.             <div class="col-12 lg-col-5 {% if alignment == 'right' %}lg-col-offset-1{% else %}lg-col-offset-6{% endif %} pt-8 md:pt-14">
  64.                 <h2 class="title title--L text-{{ accentColor }} font-weight-semibold mb-6">
  65.                     {% if slice.title is defined and slice.title is not null %}
  66.                         {{ slice.title }}
  67.                     {% endif %}
  68.                 </h2>
  70.                 {% if slice.subTitle is defined and slice.subTitle is not null %}
  71.                     <div class="text-green title title--M mb-6">{{ slice.subTitle }}</div>
  72.                 {% endif %}
  74.                 <div class="paragraph wysiwyg wysiwyg--{{ theme }}">
  75.                     {% if slice.text is defined and slice.text is not null %}
  76.                         {{ slice.text|raw }}
  77.                     {% endif %}
  78.                 </div>
  80.                 {% if slice.cta.label is defined and slice.cta.label is not null %}
  81.                     {% set cta = slice.cta %}
  82.                     {% include 'front/partials/button-arrow.html.twig' with {class: 'mt-6 '  ~ buttonClass} %}
  83.                 {% endif %}
  84.             </div>
  85.         </div>
  86.     </div>
  87. </section>