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

Open in your IDE?
  1. <section class="slice slice--testimonies text-violet">
  2.     <div class="fluid-grid relative">
  3.         {% if slice.surTitle is defined and slice.surTitle %}
  4.         <h2 class="title--XS font-weight-xbold uppercase lg:absolute">
  5.             {{ slice.surTitle }}
  6.         </h2>
  7.         {% endif %}
  8.         
  9.         <div class="row" js-slider="{options: { slidesPerView: 1, spaceBetween: 16 }}">
  10.             <div class="col-12 lg-col-10 lg-col-offset-1 mt-4 lg:mt-0">
  11.                 <div class="swiper-container bg-green overflow-hidden w-full" js-slider-el>
  12.                     <div class="swiper-wrapper">
  13.                         {% for testimony in slice.testimonies %}
  14.                             {% set hasImage = false %}
  15.                             {% set isLogo = false %}
  17.                             {% if testimony.image.singleMedia is defined and testimony.image.singleMedia.publicId is not null %}
  18.                                 {% set hasImage = true %}
  19.                             {% endif %}
  20.                             {% if testimony.isLogo %}
  21.                                 {% set isLogo = true %}
  22.                             {% endif %}
  23.                             <div class="swiper-slide slice--testimonies__item">
  24.                                 <div class="w-full flex items-center lg:block lg:w-3/8">
  25.                                     {% if hasImage %}
  26.                                         {% if isLogo %}
  27.                                             <picture class="flex-shrink-0">
  28.                                                 <source height="85" media="(max-width:767px)" data-srcset="{{ cloudinary_media(testimony.image.singleMedia, 'f_auto,c_limit,q_auto,w_150,h_85') }} 1x, {{ cloudinary_media(testimony.image.singleMedia, 'f_auto,c_limit,q_auto,w_150,h_85,dpr_2') }} 2x">
  29.                                                 <source media="(min-width:768px)" data-srcset="{{ cloudinary_media(testimony.image.singleMedia, 'f_auto,c_limit,q_auto,w_200,h_115') }} 1x, {{ cloudinary_media(testimony.image.singleMedia, 'f_auto,c_limit,q_auto,w_200,h_115,dpr_2') }} 2x">
  30.                                                 <img height="115" class="lazyload lg:mt-14 lg:mb-4" data-src="{{ cloudinary_media(testimony.image.singleMedia, 'c_limit,w_200,h_115') }}" alt="{{ testimony.image.singleMedia.alt }}"/>
  31.                                             </picture>
  32.                                         {% else %}
  33.                                             <picture class="flex-shrink-0">
  34.                                                 <source media="(max-width:767px)" data-srcset="{{ cloudinary_media(testimony.image.singleMedia, 'f_auto,c_fill,q_auto,w_120,h_120,g_face') }} 1x, {{ cloudinary_media(testimony.image.singleMedia, 'f_auto,c_fill,q_auto,w_120,h_120,g_face,dpr_2') }} 2x">
  35.                                                 <source media="(min-width:768px)" data-srcset="{{ cloudinary_media(testimony.image.singleMedia, 'f_auto,c_fill,q_auto,w_175,h_175,g_face') }} 1x, {{ cloudinary_media(testimony.image.singleMedia, 'f_auto,c_fill,q_auto,w_175,h_175,g_face,dpr_2') }} 2x">
  36.                                                 <img class="visual round w-full lazyload lg:-mt-3 lg:mb-5" height="175" width="175"
  37.                                                      data-src="{{ cloudinary_media(testimony.image.singleMedia, 'f_auto,q_auto,c_fill,g_face,w_175,h_175') }}"
  38.                                                      alt="{{ testimony.image.singleMedia.alt }}">
  39.                                             </picture>
  40.                                         {% endif %}
  41.                                     {% endif %}
  42.                                     <div class="{{ not hasImage ? 'lg:text-right lg:mt-14 lg:pr-10' : 'ml-6 lg:ml-0' }}">
  43.                                         <div class="name paragraph--M font-weight-xbold">
  44.                                             {{ testimony.name }}
  45.                                         </div>
  46.                                         <div class="description paragraph--S mt-1 md:mt-2 font-weight-medium">
  47.                                             {{ testimony.description }}
  48.                                         </div>
  49.                                     </div>
  50.                                 </div>
  51.                                 <div class="w-full lg:w-5/8 lg:pl-8 mt-4 md:mt-8 lg:mt-0">
  52.                                     <svg class="icon icon-quotes icon--orange mb-4">
  53.                                         <use href="#icon-quotes" xlink:href="#icon-quotes"></use>
  54.                                     </svg>
  55.                                     <div class="paragraph--XL md:font-light">
  56.                                         {{ testimony.text|raw }}
  57.                                     </div>
  58.                                     <svg class="icon icon-quotes icon-quotes--close icon--orange mt-4 ml-auto">
  59.                                         <use href="#icon-quotes" xlink:href="#icon-quotes"></use>
  60.                                     </svg>
  61.                                 </div>
  62.                             </div>
  63.                         {% endfor %}
  64.                     </div>
  65.                 </div>
  66.             </div>
  67.             <div class="col-12 lg-col-1 lg-col-offset-11">
  68.                 {% include 'front/partials/slider-nav.html.twig' with {mainClass: 'swiper-navigation relative lg:h-full flex lg:flex-col justify-between lg:justify-center lg:items-end mt-4 lg:mt-0', iconColor: 'violet', buttonFirst: 'lg:mb-6'} %}
  69.             </div>
  70.         </div>
  71.     </div>
  72. </section>