templates/front/partials/cards/news-event.html.twig line 1

Open in your IDE?
  1. {% set size = size ?? 'M' %}
  2. {% set picSizes = [[419, 236], [360, 203], [443, 250], [679, 366], [334,180]] %}
  4. {% if size == 'S' %}
  5.     {% set picSizes = [[316, 212], [360, 203], [443, 250], [679, 366], [334, 180]] %}
  6. {% elseif size == 'L' %}
  7.     {% set picSizes = [[656, 290], [560, 247], [443, 250], [679, 366], [334, 180]] %}
  8. {% endif %}
  10. {% if type == 'article' %}
  11.     {% set ctaLabel = 'Lire l\'actualité' %}
  12.     {% set tag = 'Actualité' %}
  13. {% elseif type == 'event' %}
  14.     {% set ctaLabel = 'Voir l\'événement' %}
  15.     {% set tag = 'événement' %}
  16. {% else %}
  17.     {% set ctaLabel = 'Voir l\'événement' %}
  18.     {% set tag = 'Agenda CGF' %}
  19. {% endif %}
  21. {% set isArticle = type == 'article' %}
  23. <div class="card-common card-common--{{ size }} card-news-event {{ not isArticle ? 'card-news-event--event' : '' }}">
  24.     <a href="{{ page_url(news, "front") }}" class="card-common__wrap">
  25.         <div class="card-common__tags">
  26.             <span class="tag">{{ tag }}</span>
  27.         </div>
  29.         <div class="relative {{ not isArticle ? 'mb-1 md:mb-3' : 'card-news-event__top--article' }} card-news-event__top card-news-event__top--{{ size }}">
  30.             <picture
  31.                     class="card-common__pic  {{ not isArticle ? 'card-common__pic--news card-common__pic--news-' ~ size  : '' }}">
  32.                 <source media="(max-width:420px)"
  33.                         data-srcset="{{ cloudinary_media(newsProperties.image.singleMedia, 'c_fill,f_auto,q_auto,w_' ~ picSizes[4][0] ~ ',h_' ~ picSizes[4][1]) }} 1x, {{ cloudinary_media(newsProperties.image.singleMedia, 'dpr_2,c_fill,f_auto,q_auto,w_' ~ picSizes[4][0] ~ ',h_' ~ picSizes[4][1]) }} 2x">
  34.                 <source media="(max-width:767px)"
  35.                         data-srcset="{{ cloudinary_media(newsProperties.image.singleMedia, 'c_fill,f_auto,q_auto,w_' ~ picSizes[3][0] ~ ',h_' ~ picSizes[3][1]) }} 1x, {{ cloudinary_media(newsProperties.image.singleMedia, 'dpr_2,c_fill,f_auto,q_auto,w_' ~ picSizes[3][0] ~ ',h_' ~ picSizes[3][1]) }} 2x">
  36.                 <source width="{{ picSizes[2][0] }}" height="{{ picSizes[2][1] }}" media="(max-width:1023px)"
  37.                         data-srcset="{{ cloudinary_media(newsProperties.image.singleMedia, 'c_fill,f_auto,q_auto,w_' ~ picSizes[2][0] ~ ',h_' ~ picSizes[2][1]) }} 1x, {{ cloudinary_media(newsProperties.image.singleMedia, 'dpr_2,c_fill,f_auto,q_auto,w_' ~ picSizes[2][0] ~ ',h_' ~ picSizes[2][1]) }} 2x">
  38.                 <source width="{{ picSizes[1][0] }}" height="{{ picSizes[1][1] }}" media="(max-width:1279px)"
  39.                         data-srcset="{{ cloudinary_media(newsProperties.image.singleMedia, 'c_fill,f_auto,q_auto,w_' ~ picSizes[1][0] ~ ',h_' ~ picSizes[1][1]) }} 1x, {{ cloudinary_media(newsProperties.image.singleMedia, 'dpr_2,c_fill,f_auto,q_auto,w_' ~ picSizes[1][0] ~ ',h_' ~ picSizes[1][1]) }} 2x">
  40.                 <source media="(min-width:1280px)"
  41.                         data-srcset="{{ cloudinary_media(newsProperties.image.singleMedia, 'c_fill,f_auto,q_auto,w_' ~ picSizes[0][0] ~ ',h_' ~ picSizes[0][1]) }} 1x, {{ cloudinary_media(newsProperties.image.singleMedia, 'dpr_2,c_fill,f_auto,q_auto,w_' ~ picSizes[0][0] ~ ',h_' ~ picSizes[0][1]) }} 2x">
  42.                 <img class="w-full lazyload" width="{{ picSizes[0][0] }}" height="{{ picSizes[0][1] }}"
  43.                      data-src="{{ cloudinary_media(newsProperties.image.singleMedia, 'c_fill,f_auto,q_auto,w_' ~ picSizes[0][0] ~ ',h_' ~ picSizes[0][1]) }}"
  44.                      alt="{{ newsProperties.image.singleMedia.alt }}"/>
  45.             </picture>
  47.             {% if not isArticle %}
  48.                 <div class="card-news-event__date card-news-event__date--{{ size }}">
  49.                     <span>{{ newsProperties.startEventDate.date|date("d.m") }}</span>
  50.                     {% if newsProperties.endEventDate is defined and newsProperties.endEventDate is not empty %}
  51.                         <span>{{ newsProperties.endEventDate.date|date("d.m") }}</span>
  52.                         <span class="year">{{ newsProperties.endEventDate.date|date("Y") }}</span>
  53.                     {% else %}
  54.                         <span class="year">{{ newsProperties.startEventDate.date|date("Y") }}</span>
  55.                     {% endif %}
  56.                 </div>
  57.             {% endif %}
  58.         </div>
  60.         <div class="card-common__inner {{ size == 'S' ? 'card-common__inner--S' : '' }} mt-5">
  61.             <div>
  62.                 {% if isArticle %}
  63.                     <p class="card-common__date text-grey-dark">
  64.                         <svg width="12" height="12" class="mr-2 icon--violet">
  65.                             <use href="#icon-hour" xlink:href="#icon-hour"></use>
  66.                         </svg>
  67.                         <span>Publié le <span
  68.                                     class="font-bold text-violet">{{ newsProperties.publicationDate.date|date("d.m.Y") }}</span></span>
  69.                     </p>
  70.                 {% endif %}
  72.                 <p class="title-card title-card--{{ size }} {{ isArticle ? 'text-violet' : 'text-white' }} mb-3">
  73.                     {{ news.title }}
  74.                 </p>
  76.                 {% if isArticle %}
  77.                     {% if news.description is defined and news.description is not null %}
  78.                     <div class="card-publi__chapo">
  79.                         {{ news.description|striptags|raw }}
  80.                     </div>
  81.                     {% endif %}
  82.                 {% else %}
  83.                     {% if newsProperties.place is defined and newsProperties.place is not null %}
  84.                     <div class="flex card-news-event__location">
  85.                         <svg width="14" height="20" class="mr-2 icon--orange flex-shrink-0">
  86.                             <use href="#icon-pin" xlink:href="#icon-pin"></use>
  87.                         </svg>
  88.                         {{ newsProperties.place }}
  89.                     </div>
  90.                     {% endif %}
  91.                 {% endif %}
  92.             </div>
  94.             <span class="cta-arrow {{ isArticle ? 'text-violet' : 'text-white' }} mt-5">
  95.                 {{ ctaLabel }}
  97.                 <span class="cta-arrow__circle">
  98.                     <svg width="8" height="8" class="icon--white">
  99.                         <use href="#icon-arrow" xlink:href="#icon-arrow"></use>
  100.                     </svg>
  101.                 </span>
  102.             </span>
  103.         </div>
  104.     </a>
  106.     {% if not isArticle %}
  107.         {% if newsProperties.registerLink is defined and newsProperties.registerLink is not null %}
  108.             <a href="{{ newsProperties.registerLink }}" target="_blank" rel="nofollow" class="card-common__action icon-center">
  109.                 <svg width="20" height="18" class="icon--white">
  110.                     <use href="#icon-calendar" xlink:href="#icon-calendar"></use>
  111.                 </svg>
  112.                 <span class="sr-only">S'inscrire à l'évènement</span>
  113.             </a>
  114.         {% endif %}
  115.     {% endif %}
  116. </div>