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

Open in your IDE?
  1. <section class="slice fed-testimonies">
  2.     <div class="fluid-grid">
  3.         <div class="row">
  4.             <div class="col-12 lg-col-5 xl-col-4 xl-col-offset-1">
  5.                 <h2 class="font-light title title--XL text-violet mb-6 md:mb-8">
  6.                     {% if slice.title is defined and slice.title is not null %}
  7.                         {{ slice.title|highlight_word|raw }}
  8.                     {% endif %}
  9.                 </h2>
  11.                 <div class="paragraph paragraph--M-bis">
  12.                     {% if slice.description is defined and slice.description is not null %}
  13.                         {{ slice.description|raw }}
  14.                     {% endif %}
  15.                 </div>
  17.                 {% if slice.cta.label is defined and slice.cta.label is not null %}
  18.                     {% set cta = slice.cta %}
  19.                     {% include 'front/partials/button-arrow.html.twig' with {class: 'button--violet mt-6 md:mt-8'} %}
  20.                 {% endif %}
  21.             </div>
  22.             <div class="col-12 lg-col-offset-6 lg-col-6 xl-col-5 xl-col-offset-7 relative">
  23.                 <p class="title--XS uppercase font-extrabold text-grey-lighter fed-testimonies__side-title">Ils en
  24.                     parlent pour nous</p>
  26.                 <div class="fed-testimonies__right" js-slider="{options: { slidesPerView: 1 }}">
  27.                     {# list of testimonies #}
  28.                     <div class="swiper-container overflow-hidden" js-slider-el>
  29.                         <ul class="swiper-wrapper">
  30.                             {% for testimony in slice.testimonies %}
  31.                                 {% set isLogo = false %}
  32.                                 {% set isPic =  true %}
  33.                                 {% if testimony.isLogo %}
  34.                                     {% set isLogo = true %}
  35.                                     {% set isPic =  false %}
  36.                                 {% endif %}
  38.                                 <li class="swiper-slide">
  39.                                     <div class="fed-testimonies__item">
  40.                                         <div class="flex {{ not isLogo and not isPic ? 'mb-6 items-start' : isPic ? '-mt-2 md:-mt-8 items-center mb-8' : '' }}">
  41.                                             {% if isLogo %}
  42.                                                 <div class="fed-testimonies__logo-wrap mr-6">
  43.                                                     <source media="(min-width:300px)"
  44.                                                             data-srcset="{{ cloudinary_media(testimony.image.singleMedia, 'c_limit,w_200') }} 1x, {{ cloudinary_media(testimony.image.singleMedia, 'c_limit,w_200,dpr_2') }} 2x">
  45.                                                     <img class="lazyload" data-src="{{ cloudinary_media(testimony.image.singleMedia, 'c_limit,w_200') }}" alt="{{ testimony.image.singleMedia.alt }}"/>
  46.                                                 </div>
  47.                                             {% elseif isPic %}
  48.                                                 <picture class="fed-testimonies__pic mr-6">
  49.                                                     <source media="(max-width:767px)"
  50.                                                             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">
  51.                                                     <source media="(min-width:768px)"
  52.                                                             data-srcset="{{ cloudinary_media(testimony.image.singleMedia, 'f_auto,c_fill,q_auto,w_182,h_182,g_face') }} 1x, {{ cloudinary_media(testimony.image.singleMedia, 'f_auto,c_fill,q_auto,w_182,h_182,g_face,dpr_2') }} 2x">
  53.                                                     <img class="lazyload" width="182" height="182"
  54.                                                          data-src="{{ cloudinary_media(testimony.image.singleMedia, 'f_auto,c_fill,q_auto,w_182,h_182,g_face') }}" alt="{{ testimony.image.singleMedia.alt }}"/>
  55.                                                 </picture>
  56.                                                 <svg class="icon--orange quote" width="40" height="30">
  57.                                                     <use href="#icon-quotes" xlink:href="#icon-quotes"></use>
  58.                                                 </svg>
  59.                                             {% endif %}
  61.                                             <div>
  62.                                                 <p class="font-extrabold text-base md:text-18 mb-1 md:mb-2">
  63.                                                     {% if testimony.fullName is defined and testimony.fullName is not null %}
  64.                                                         {{ testimony.fullName }}
  65.                                                     {% endif %}
  66.                                                 </p>
  67.                                                 <p class="font-medium text-14 md:text-17">
  68.                                                     {% if testimony.federationName is defined and testimony.federationName is not null %}
  69.                                                         {{ testimony.federationName }}
  70.                                                     {% endif %}
  71.                                                 </p>
  72.                                             </div>
  73.                                         </div>
  75.                                         <div class="relative z-2">
  76.                                             {% if not isPic %}
  77.                                                 <svg class="icon--orange mb-4" width="40" height="30">
  78.                                                     <use href="#icon-quotes" xlink:href="#icon-quotes"></use>
  79.                                                 </svg>
  80.                                             {% endif %}
  82.                                             <blockquote class="font-light paragraph paragraph--XL">
  83.                                                 {{ testimony.quote|raw }}
  84.                                             </blockquote>
  85.                                         </div>
  86.                                     </div>
  87.                                 </li>
  88.                             {% endfor %}
  89.                         </ul>
  90.                     </div>
  92.                     {# bottom: CTA + slider nav #}
  93.                     <div class="md:flex justify-between items-center fed-testimonies__bottom">
  94.                         <a class="button button--rounded button--arrow button--green-light" href="{{ page_url('index', 'front') }}">
  95.                             <span>Annuaire des adhérents</span>
  96.                             <svg width="12" height="12" class="picto icon ml-2 flex-shrink-0">
  97.                                 <use href="#icon-arrow" xlink:href="#icon-arrow"></use>
  98.                             </svg>
  99.                         </a>
  101.                         {% include 'front/partials/slider-nav.html.twig' with { iconColor: 'violet', buttonFirst: 'mr-10', mainClass: 'mt-8 md:mt-0 swiper-navigation flex'} %}
  102.                     </div>
  103.                 </div>
  104.             </div>
  105.         </div>
  106.     </div>
  107. </section>