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

Open in your IDE?
  1. <section class="slice speakers">
  2.     <div class="fluid-grid" js-tabs>
  3.         {% if slice.title is defined and slice.title is not null %}
  4.             <h2 class="title title--L title--circle font-weight-light text-violet relative mb-4 lg:mb-6">
  5.                 {{ slice.title|highlight_word|raw }}
  6.             </h2>
  7.         {% endif %}
  9.         {# tabs buttons #}
  10.         {% if slice.groups|length >  1 %}
  11.         <ul class="relative flex lg:flex-wrap speakers__tab-list w-full mb-8">
  12.             {% for group in slice.groups %}
  13.                 <li>
  14.                     <button class="speakers__tab-toggle {% if loop.index == 1 %}is-active{% endif %}"
  15.                             js-tabs-tab="{{ loop.index }}">{{ group.groupName }}
  16.                     </button>
  17.                 </li>
  18.             {% endfor %}
  19.         </ul>
  20.         {% endif %}
  22.         {# panels #}
  23.         {% for group in slice.groups %}
  24.             <div class="speakers__panel {{ slice.groups|length == 1 ? 'lg:mt-8' : '' }} {% if loop.index == 1 %}is-active{% endif %}"
  25.                 js-tabs-content="{{ loop.index }}">
  26.                 <ul class="row gap-y-6">
  27.                     {% for speaker in group.speakers %}
  28.                         {% set speakerProperties = speaker.contentProperties %}
  29.                         {% set hasAdditionalContent = speakerProperties.contact is defined and speakerProperties.contact is not null
  30.                                                     or speakerProperties.address is defined and speakerProperties.address is not null 
  31.                                                     or speakerProperties.website is defined and speakerProperties.website is not null 
  32.                                                     or speakerProperties.email is defined and speakerProperties.email is not null 
  33.                                                     or speakerProperties.phone is defined and speakerProperties.phone is not null 
  34.                                                     or speakerProperties.linkedinLink is defined and speakerProperties.linkedinLink is not null
  35.                                                     or speakerProperties.twitterLink is defined and speakerProperties.twitterLink is not null
  36.                                                     or speakerProperties.facebookLink is defined and speakerProperties.facebookLink is not null
  37.                                                     or speaker.description is defined and speaker.description is not null   %}
  38.                         <li class="col-6 md-col-4 lg-col-3">
  39.                             {% if hasAdditionalContent %}
  40.                             <button class="card card-speaker card-speaker--modal"
  41.                                 js-dynamic-modal="{route: '/ajax/modal', id:'{{ speaker.id }}', position: 'aside-modal', model: 'speaker-modal'}">
  42.                             {% else %}
  43.                                 <div class="card card-speaker">
  44.                             {% endif %}
  45.                                 <div class="visual__wrapper relative overflow-hidden">
  46.                                     {% if speaker.contentProperties.image.singleMedia is defined and speaker.contentProperties.image.singleMedia.publicId is not null %}
  47.                                         {% if speaker.contentProperties.isLogo %}
  48.                                             <picture>
  49.                                                 <source media="(max-width: 420px)" data-srcset="{{ cloudinary_media(speaker.contentProperties.image.singleMedia, 'f_auto,c_limit,q_auto,w_166,h_144') }} 1x, {{ cloudinary_media(speaker.contentProperties.image.singleMedia, 'f_auto,c_limit,q_auto,w_166,h_144,dpr_2') }} 2x"/>
  50.                                                 <source media="(min-width: 420px)" data-srcset="{{ cloudinary_media(speaker.contentProperties.image.singleMedia, 'f_auto,c_limit,q_auto,w_316,h_275') }} 1x, {{ cloudinary_media(speaker.contentProperties.image.singleMedia, 'f_auto,c_limit,q_auto,w_316,h_275,dpr_2') }} 2x"/>
  51.                                                 <img class="abs-center is-logo lazyload"
  52.                                                     data-src="{{ cloudinary_media(speaker.contentProperties.image.singleMedia, 'f_auto,q_auto,c_limit,w_316,h_275') }}"
  53.                                                     alt="{{ speaker.contentProperties.image.singleMedia.alt }}">
  54.                                             </picture>
  55.                                         {% else %}
  56.                                             <picture>
  57.                                                 <source media="(max-width: 420px)" data-srcset="{{ cloudinary_media(speaker.contentProperties.image.singleMedia, 'f_auto,c_fill,g_face,q_auto,w_166,h_144') }} 1x, {{ cloudinary_media(speaker.contentProperties.image.singleMedia, 'f_auto,c_fill,g_face,q_auto,w_166,h_144,dpr_2') }} 2x"/>
  58.                                                 <source media="(max-width: 767px)" data-srcset="{{ cloudinary_media(speaker.contentProperties.image.singleMedia, 'f_auto,c_fill,g_face,q_auto,w_340,h_295') }} 1x, {{ cloudinary_media(speaker.contentProperties.image.singleMedia, 'f_auto,c_fill,g_face,q_auto,w_340,h_295,dpr_2') }} 2x"/>
  59.                                                 <source media="(max-width: 1023px)" data-srcset="{{ cloudinary_media(speaker.contentProperties.image.singleMedia, 'f_auto,c_fill,g_face,q_auto,w_304,h_264') }} 1x, {{ cloudinary_media(speaker.contentProperties.image.singleMedia, 'f_auto,c_fill,g_face,q_auto,w_304,h_264,dpr_2') }} 2x"/>
  60.                                                 <source media="(max-width: 1279px)" data-srcset="{{ cloudinary_media(speaker.contentProperties.image.singleMedia, 'f_auto,c_fill,g_face,q_auto,w_280,h_243') }} 1x, {{ cloudinary_media(speaker.contentProperties.image.singleMedia, 'f_auto,c_fill,g_face,q_auto,w_280,h_243,dpr_2') }} 2x"/>
  61.                                                 <source media="(min-width: 1280px)" data-srcset="{{ cloudinary_media(speaker.contentProperties.image.singleMedia, 'f_auto,c_fill,g_face,q_auto,w_316,h_275') }} 1x, {{ cloudinary_media(speaker.contentProperties.image.singleMedia, 'f_auto,c_fill,g_face,q_auto,w_316,h_275,dpr_2') }} 2x"/>
  62.                                                 <img class="abs-center lazyload" width="316" height="275"
  63.                                                     data-src="{{ cloudinary_media(speaker.contentProperties.image.singleMedia, 'f_auto,q_auto,c_fill,g_face,w_316,h_275') }}"
  64.                                                     alt="{{ speaker.contentProperties.image.singleMedia.alt }}">
  65.                                             </picture>
  66.                                         {% endif %}
  67.                                     {% else %}
  68.                                         <img class="abs-center is-logo lazyload"
  69.                                             data-src="/assets/front/federation-default.svg"
  70.                                             alt="" >
  71.                                     {% endif %}
  72.                                 </div>
  73.                                 <p class="name text-violet font-weight-light text-center mt-4">{{ speaker.title }}</p>
  74.                                 
  75.                                 {% if speaker.contentProperties.subTitle is defined and speaker.contentProperties.subTitle is not null %}
  76.                                 <p class="description text-violet-dark font-weight-semibold text-center mt-2">
  77.                                     {{ speaker.contentProperties.subTitle }}
  78.                                 </p>
  79.                                 {% endif %}
  80.                              {% if hasAdditionalContent %}
  81.                             </button>
  82.                             {% else %}
  83.                             </div>
  84.                             {% endif %}
  85.                         </li>
  86.                     {% endfor %}
  87.                 </ul>
  88.             </div>
  89.         {% endfor %}
  90.     </div>
  91. </section>