templates/front/heroes/hero-edito.html.twig line 1

Open in your IDE?
  1. {% set breadcrumbTheme = 'reg' %}
  2. {% set isPicto = false %}
  3. {% set mainClass = '' %}
  5. {% if page.type == 'study' %}
  6.     {% set contentType = 'Étude' %}
  7. {% elseif page.type == 'activity-report' %}
  8.     {% set contentType = 'Rapport d\'activité' %}
  9. {% elseif page.type == 'thematic-brochure' %}
  10.     {% set contentType = 'Plaquette thématique' %}
  11.     {% set breadcrumbTheme = 'orange-dark' %}
  12.     {% set bgColor = true %}
  13.     {% set isPicto = true %}
  14.     {% set roundColor = 'bg-orange-hover' %}
  15.     {% set mainClass = 'hero-edito--picto hero-edito--bg bg-orange' %}
  16. {% elseif page.type == 'practical-guide' or page.type == 'faq' %}
  17.     {% set contentType = 'Note adhérent' %}
  18.     {% set breadcrumbTheme = 'white' %}
  19.     {% set bgColor = true %}
  20.     {% set isPicto = true %}
  21.     {% set roundColor = 'bg-violet-darker' %}
  22.     {% set mainClass = 'hero-edito--picto hero-edito--bg bg-violet-dark' %}
  23. {% elseif page.type == 'btob-news' %}
  24.     {% set contentType = 'BtoB news' %}
  25. {% elseif page.type == 'barometer-activity' %}
  26.     {% set contentType = 'Baromètre d\'activité' %}
  27. {% elseif page.type == 'article' %}
  28.     {% set contentType = 'Actualité' %}
  29.     {% set mainClass = 'hero-edito--news' %}
  30. {% elseif page.type == 'event' %}
  31.     {% set breadcrumbTheme = 'white' %}
  32.     {% set bgColor = true %}
  33.     {% set mainClass = 'hero-edito--bg bg-violet hero-edito--event' %}
  34.     {% set contentType = 'événement' %}
  35. {% elseif page.type == 'agenda' %}
  36.     {% set breadcrumbTheme = 'white' %}
  37.     {% set bgColor = true %}
  38.     {% set mainClass = 'hero-edito--bg bg-violet hero-edito--event' %}
  39.     {% set contentType = 'Agenda CGF' %}
  40. {% endif %}
  43. {% set isPublication = page.template == 'publication' %}
  44. {% set isNewsEvent = page.template == 'news' %}
  46. <div class="hero-edito {{ mainClass }}">
  47.     <div class="fluid-grid relative">
  48.         <div class="row">
  49.             <div class="col-12 lg-col-6 lg:py-13 {{ isPublication or isNewsEvent ? 'hero-edito__side-left' ~ page.type == 'event' or page.type == 'agenda' ? ' hero-edito__side-left--bg' : '' : '' }}">
  50.                 {% include 'front/partials/breadcrumb.html.twig' with {theme: breadcrumbTheme } %}
  52.                 <div class="{{ isPublication or isNewsEvent ? 'mt-8 md:mt-16' : 'mt-6 md:mt-12 lg:mt-20' }}">
  53.                     {# tags #}
  54.                     {% if contentType is defined %}
  55.                         <ul class="hero-edito__tags">
  56.                             <li><span class="tag">{{ contentType }}</span></li>
  58.                             {% if page.type == 'faq' %}
  59.                                 <li><span class="tag tag--orange">Communication</span></li>
  60.                             {% endif %}
  62.                             {% for tag in page.tags %}
  63.                             <li><span class="tag tag--orange">{{ tag }}</span></li>
  64.                             {% endfor %}
  66.                             {% if properties.isMemberOnly %}
  67.                             <li>
  68.                                 <span class="tag tag--adherent">
  69.                                     <svg width="10" height="13" class="mr-1 icon--violet">
  70.                                         <use href="#icon-lock" xlink:href="#icon-lock"></use>
  71.                                     </svg>
  72.                                     Adhérent
  73.                                 </span>
  74.                             </li>
  75.                             {% endif %}
  76.                         </ul>
  77.                     {% endif %}
  79.                     {% if page.title is defined and page.title is not null %}
  80.                     <h1 class="title {{ page.type in ['agenda', 'event'] ? 'title--M-bis' : 'title--XL' }} font-weight-semibold {{ bgColor is defined ? 'text-white' : 'text-violet' }}">
  81.                         {{ page.title | remove_brackets | trim }}
  82.                     </h1>
  83.                     {% endif %}
  84.                     
  85.                     {% if page.description is defined and page.description is not null %}
  86.                     <div class="paragraph wysiwyg paragraph--L mt-6 hero-edito__chapo">
  87.                         {{ page.description|raw }}
  88.                     </div>
  89.                     {% endif %}
  91.                     {% if properties.publicationDate is defined and properties.publicationDate is not null and page.type not in ['agenda', 'event'] %}
  92.                         <p class="text-13 flex items-center font-medium mt-5">
  93.                             <svg width="12" height="12"
  94.                                 class="mr-2 {{ page.type == 'practical-guide' ? 'icon--white' :  'icon--violet' }}">
  95.                                 <use href="#icon-hour" xlink:href="#icon-hour"></use>
  96.                             </svg>
  97.                             <span>Publié le <span class="font-bold {{ bgColor is defined ? 'text-white' : 'text-violet' }}">{{ properties.publicationDate.date|date('d.m.Y') }}</span></span>
  98.                         </p>
  99.                     {% endif %}
  101.                     {% if properties.place is defined and properties.place is not null %}
  102.                     <div class="flex mt-5 hero-edito__location">
  103.                         <svg width="14" height="20" class="mr-2 icon--orange flex-shrink-0">
  104.                             <use href="#icon-pin" xlink:href="#icon-pin"></use>
  105.                         </svg>
  106.                         <span class="font-medium text-15">À <span class="font-bold">{{ properties.place }}</span></span>
  107.                     </div>
  108.                     {% endif %}
  109.                 </div>
  110.             </div>
  111.             <div class="col-12 lg-col-6 relative {{ page.type in ['agenda', 'event'] ? 'self-start' : '' }} {{ page.type not in ['article', 'agenda', 'event' ] ? 'hero__right' : '' }} order-first lg:order-last">
  112.                 {% if page.type not in ['article', 'agenda', 'event' ] %}
  113.                 <div class="hero__pic-wrap {{ isPicto ? roundColor : '' }}">
  114.                     {% if properties.image.singleMedia is defined and properties.image.singleMedia.publicId is not null %}
  115.                         <picture>
  116.                             <source media="(max-width: 420px)"
  117.                                     srcset="{{ cloudinary_media(properties.image.singleMedia, 'fl_progressive,f_auto,c_fill,q_auto,w_390,h_282') }} 1x, {{ cloudinary_media(properties.image.singleMedia, 'fl_progressive,f_auto,c_fill,q_auto,w_390,h_282,dpr_2') }} 2x">
  118.                             <source media="(max-width: 767px)"
  119.                                     srcset="{{ cloudinary_media(properties.image.singleMedia, 'fl_progressive,f_auto,c_fill,q_auto,w_740,h_558') }} 1x, {{ cloudinary_media(properties.image.singleMedia, 'fl_progressive,f_auto,c_fill,q_auto,w_740,h_558,dpr_2') }} 2x">
  120.                             <source media="(max-width: 1023px)"
  121.                                     srcset="{{ cloudinary_media(properties.image.singleMedia, 'fl_progressive,f_auto,c_fill,q_auto,w_990,h_758') }} 1x, {{ cloudinary_media(properties.image.singleMedia, 'fl_progressive,f_auto,c_fill,q_auto,w_990,h_758,dpr_2') }} 2x">
  122.                             <source media="(max-width: 1279px)"
  123.                                     srcset="{{ cloudinary_media(properties.image.singleMedia, 'fl_progressive,f_auto,c_fill,q_auto,w_858,h_858') }} 1x, {{ cloudinary_media(properties.image.singleMedia, 'fl_progressive,f_auto,c_fill,q_auto,w_858,h_858,dpr_2') }} 2x">
  124.                             <source media="(min-width: 1280px)"
  125.                                     srcset="{{ cloudinary_media(properties.image.singleMedia, 'fl_progressive,f_auto,c_fill,q_auto,w_962,h_962') }} 1x, {{ cloudinary_media(properties.image.singleMedia, 'fl_progressive,f_auto,c_fill,q_auto,w_962,h_962,dpr_2') }} 2x">
  126.                             <img class="object-fit-image absolute" height="962" width="962"
  127.                                  src="{{ cloudinary_media(properties.image.singleMedia, 'fl_progressive,f_auto,q_auto,c_fill,w_962,h_962') }}"
  128.                                  alt="{{ properties.image.singleMedia.alt }}">
  129.                         </picture>
  130.                     {% endif %}
  132.                     {% if isPublication and page.type == 'thematic-brochure'  or page.type == 'practical-guide' or page.type == 'faq' %}
  133.                         {% if page.type == 'thematic-brochure' %}
  134.                             <svg width="125" height="172">
  135.                                 <use href="#icon-publication-brochure" xlink:href="#icon-publication-brochure"></use>
  136.                             </svg>
  137.                         {% else %}
  138.                             <svg width="185" height="130">
  139.                                 <use href="#icon-publication-guide" xlink:href="#icon-publication-guide"></use>
  140.                             </svg>
  141.                         {% endif %}
  142.                     {% endif %}
  143.                 </div>
  144.                 {% elseif page.type in ['agenda', 'event'] %}
  145.                     <div class="hero-edito__event-wrap">
  146.                         <picture>
  147.                             <source media="(max-width: 420px)"
  148.                                     srcset="{{ cloudinary_media(properties.image.singleMedia, 'fl_progressive,f_auto,c_fill,q_auto,w_388,h_274') }} 1x, {{ cloudinary_media(properties.image.singleMedia, 'fl_progressive,f_auto,c_fill,q_auto,w_388,h_274,dpr_2') }} 2x">
  149.                             <source media="(max-width: 767px)"
  150.                                     srcset="{{ cloudinary_media(properties.image.singleMedia, 'fl_progressive,f_auto,c_fill,q_auto,w_735,h_560') }} 1x, {{ cloudinary_media(properties.image.singleMedia, 'fl_progressive,f_auto,c_fill,q_auto,w_735,h_560,dpr_2') }} 2x">
  151.                             <source media="(max-width: 1023px)"
  152.                                     srcset="{{ cloudinary_media(properties.image.singleMedia, 'fl_progressive,f_auto,c_fill,q_auto,w_991,h_755') }} 1x, {{ cloudinary_media(properties.image.singleMedia, 'fl_progressive,f_auto,c_fill,q_auto,w_991,h_755,dpr_2') }} 2x">
  153.                             <source media="(max-width: 1279px)"
  154.                                     srcset="{{ cloudinary_media(properties.image.singleMedia, 'fl_progressive,f_auto,c_fill,q_auto,w_640,h_488') }} 1x, {{ cloudinary_media(properties.image.singleMedia, 'fl_progressive,f_auto,c_fill,q_auto,w_640,h_488,dpr_2') }} 2x">
  155.                             <source media="(min-width: 1280px)"
  156.                                     srcset="{{ cloudinary_media(properties.image.singleMedia, 'fl_progressive,f_auto,c_fill,q_auto,w_708,h_540') }} 1x, {{ cloudinary_media(properties.image.singleMedia, 'fl_progressive,f_auto,c_fill,q_auto,w_708,h_540,dpr_2') }} 2x">
  157.                             <img class="w-full" height="708" width="540"
  158.                                     src="{{ cloudinary_media(properties.image.singleMedia, 'fl_progressive,f_auto,q_auto,c_fill,w_708,h_540') }}"
  159.                                     alt="{{ properties.image.singleMedia.alt }}">
  160.                         </picture>
  161.                     </div>
  163.                     <div class="hero-edito__date">
  164.                         <span>{{ properties.startEventDate.date|date("d.m") }}</span>
  165.                         {% if properties.endEventDate is defined and properties.endEventDate is not empty %}
  166.                             <span>{{ properties.endEventDate.date|date("d.m") }}</span>
  167.                             <span class="year">{{ properties.endEventDate.date|date("Y") }}</span>
  168.                         {% else %}
  169.                             <span class="year">{{ properties.startEventDate.date|date("Y") }}</span>
  170.                         {% endif %}
  171.                     </div>
  173.                     {% if properties.registerLink is defined and properties.registerLink is not null %}
  174.                         <a href="{{ properties.registerLink }}" target="_blank" rel="nofollow" class="hero-edito__register">
  175.                             <svg width="32" height="29" class="icon--white">
  176.                                 <use href="#icon-calendar" xlink:href="#icon-calendar"></use>
  177.                             </svg>
  178.                             <span class="sr-only">S'inscrire à l'évènement</span>
  179.                         </a>
  180.                     {% endif %}
  181.                 {% else %}
  182.                     <picture>
  183.                         <source media="(max-width: 420px)"
  184.                                 srcset="{{ cloudinary_media(properties.image.singleMedia, 'fl_progressive,f_auto,c_fill,q_auto,w_356,h_356') }} 1x, {{ cloudinary_media(properties.image.singleMedia, 'fl_progressive,f_auto,c_fill,q_auto,w_356,h_356,dpr_2') }} 2x">
  185.                         <source media="(max-width: 767px)"
  186.                                 srcset="{{ cloudinary_media(properties.image.singleMedia, 'fl_progressive,f_auto,c_fill,q_auto,w_703,h_703') }} 1x, {{ cloudinary_media(properties.image.singleMedia, 'fl_progressive,f_auto,c_fill,q_auto,w_703,h_703,dpr_2') }} 2x">
  187.                         <source media="(max-width: 1023px)"
  188.                                 srcset="{{ cloudinary_media(properties.image.singleMedia, 'fl_progressive,f_auto,c_fill,q_auto,w_950,h_950') }} 1x, {{ cloudinary_media(properties.image.singleMedia, 'fl_progressive,f_auto,c_fill,q_auto,w_950,h_950,dpr_2') }} 2x">
  189.                         <source media="(max-width: 1279px)"
  190.                                 srcset="{{ cloudinary_media(properties.image.singleMedia, 'fl_progressive,f_auto,c_fill,q_auto,w_592,h_592') }} 1x, {{ cloudinary_media(properties.image.singleMedia, 'fl_progressive,f_auto,c_fill,q_auto,w_592,h_592,dpr_2') }} 2x">
  191.                         <source media="(min-width: 1280px)"
  192.                                 srcset="{{ cloudinary_media(properties.image.singleMedia, 'fl_progressive,f_auto,c_fill,q_auto,w_664,h_664') }} 1x, {{ cloudinary_media(properties.image.singleMedia, 'fl_progressive,f_auto,c_fill,q_auto,w_664,h_664,dpr_2') }} 2x">
  193.                         <img class="w-full rounded-lg mt-20 md:mt-23" height="664" width="664"
  194.                                 src="{{ cloudinary_media(properties.image.singleMedia, 'fl_progressive,f_auto,q_auto,c_fill,w_664,h_664') }}"
  195.                                 alt="{{ properties.image.singleMedia.alt }}">
  196.                     </picture>
  197.                 {% endif %}
  199.                 {% if properties.document.singleMedia.publicId is defined and properties.document.singleMedia.publicId is not null %}
  200.                     {% set isHidden = properties.isMemberOnly and app.user == null %}
  202.                     {% if not isHidden %}
  203.                     <a onclick="gtag('event', 'telecharger-publication', {'button_text': 'telecharger-publication'});" target="_blank" href="{{ cloudinary_media(properties.document.singleMedia) }}" class="hero-edito__dl {{ isPicto ? 'hero-edito__dl--picto' : '' }}">
  204.                         <span class="icon-center">
  205.                             Télécharger <br/> le document
  206.                         </span>
  207.                         <span class="icon-center">
  208.                             <svg width="30" height="30" class="icon--white">
  209.                                 <use href="#icon-download" xlink:href="#icon-download"></use>
  210.                             </svg>
  211.                         </span>
  212.                     </a>
  213.                     {% endif %}
  214.                 {% endif %}
  215.             </div>
  216.         </div>
  217.     </div>
  218. </div>