templates/front/partials/cards/publication.html.twig line 1

Open in your IDE?
  1. {% set size = size ?? 'M' %}
  2. {% set picSizes = [[454, 244], [467, 251], [703, 377], [356,191]] %}
  4. {% if size == 'L' %}
  5.     {# same from mobile to lg, more landscape for desktop #}
  6.     {% set picSizes = [[680, 260], [467, 251], [703, 377], [356,191]] %}
  7. {% endif %}
  9. {% set templateType = 'pic' %}
  11. {% if type == 'study' %}
  12.     {% set ctaLabel = 'Lire l\'étude' %}
  13.     {% set tag = 'Étude' %}
  14. {% elseif type == 'activity-report' %}
  15.     {% set ctaLabel = 'Voir le rapport d\'activité' %}
  16.     {% set tag = 'Rapport d\'activité' %}
  17. {% elseif type == 'thematic-brochure' %}
  18.     {% set templateType = 'picto' %}
  19.     {% set ctaLabel = 'Voir la plaquette' %}
  20.     {% set tag = 'Plaquette thématique' %}
  21. {% elseif type == 'practical-guide' %}
  22.     {% set templateType = 'picto' %}
  23.     {% set ctaLabel = 'Voir la note adhérent' %}
  24.     {% set tag = 'Note adhérent' %}
  25. {% elseif type == 'btob-news' %}
  26.     {% set ctaLabel = 'Lire le BtoB news' %}
  27.     {% set tag = 'BtoB news' %}
  28. {% elseif type == 'barometer-activity' %}
  29.     {% set ctaLabel = 'Découvrir le baromètre' %}
  30.     {% set tag = 'Baromètre d\'activité' %}
  31. {% endif %}
  33. <div class="card-common card-common--{{ size }} card-publi card-publi--{{ type }} {{ templateType == 'picto' ? 'card-publi--picto' : '' }}">
  34.     <a href="{{ page_url(publication, "front") }}" class="card-common__wrap">
  35.         <div class="card-common__tags {{ templateType == 'picto' ? 'card-common__tags--picto' : '' }}">
  36.             <span class="tag">{{ tag }}</span>
  37.             {% if publicationProperties.isMemberOnly %}
  38.                 <span class="tag tag--adherent">
  39.                     <svg width="10" height="13" class="mr-1 icon--violet">
  40.                         <use href="#icon-lock" xlink:href="#icon-lock"></use>
  41.                     </svg>
  42.                     Adhérent
  43.                 </span>
  44.             {% endif %}
  45.         </div>
  47.         {% if templateType == 'pic' %}
  48.             <picture class="card-common__pic {{ size == 'L' ?  'card-common__pic--publi-L' : 'card-common__pic--publi' }}">
  49.                 <source media="(max-width:420px)"
  50.                         data-srcset="{{ cloudinary_media(publicationProperties.image.singleMedia, 'c_fill,f_auto,q_auto,w_' ~ picSizes[3][0] ~ ',h_' ~ picSizes[3][1]) }}">
  51.                 <source media="(max-width:767px)"
  52.                         data-srcset="{{ cloudinary_media(publicationProperties.image.singleMedia, 'c_fill,f_auto,q_auto,w_' ~ picSizes[2][0] ~ ',h_' ~ picSizes[2][1]) }}">
  53.                 <source width="{{ picSizes[1][0] }}" height="{{ picSizes[1][1] }}" media="(max-width:1023px)"
  54.                         data-srcset="{{ cloudinary_media(publicationProperties.image.singleMedia, 'c_fill,f_auto,q_auto,w_' ~ picSizes[1][0] ~ ',h_' ~ picSizes[1][1]) }}">
  55.                 <img class="w-full lazyload" width="{{ picSizes[0][0] }}" height="{{ picSizes[0][1] }}"
  56.                      data-src="{{ cloudinary_media(publicationProperties.image.singleMedia, 'c_fill,f_auto,q_auto,w_' ~ picSizes[0][0] ~ ',h_' ~ picSizes[0][1]) }}"
  57.                      alt="{{ publicationProperties.image.singleMedia.alt }}"/>
  58.             </picture>
  59.         {% else %}
  60.             <div class="card-publi__picto {{ type == 'thematic-brochure' ? 'card-publi__picto--orange' : '' }}">
  61.                 {% if type == 'thematic-brochure' %}
  62.                     <svg width="48" height="66" class="mt-8 ml-16">
  63.                         <use href="#icon-publication-brochure" xlink:href="#icon-publication-brochure"></use>
  64.                     </svg>
  65.                 {% else %}
  66.                     <svg width="78" height="57" class="mt-9 ml-11">
  67.                         <use href="#icon-publication-guide" xlink:href="#icon-publication-guide"></use>
  68.                     </svg>
  69.                 {% endif %}
  70.             </div>
  71.         {% endif %}
  73.         <div class="card-common__inner mt-5">
  74.             <div>
  75.                 <p class="card-common__date {{ templateType == 'pic' ? 'text-grey-dark' : 'text-white' }}">
  76.                     <svg width="12" height="12"
  77.                          class="mr-2 {{ type == 'practical-guide' ? 'icon--white' : 'icon--violet' }}">
  78.                         <use href="#icon-hour" xlink:href="#icon-hour"></use>
  79.                     </svg>
  80.                     <span>Publié le <span
  81.                                 class="font-bold {{ templateType == 'pic' ? 'text-violet' : 'text-white' }}">{{ publicationProperties.publicationDate.date|date('d.m.Y') }}</span></span>
  82.                 </p>
  84.                 <p class="title-card {{ size == 'L' ? templateType == 'picto' ? 'title-card--XL' : 'title-card--L' : templateType == 'picto' ? 'title-card--L-pic' : '' }}   {{ templateType == 'pic' ? 'text-violet' : 'text-white' }} mb-3">
  85.                     {{ publication.title }}</p>
  87.                 {% if publication.description is defined and publication.description is not null %}
  88.                 <div class="card-publi__chapo {{ templateType == 'pic' ? 'text-grey-dark' : 'text-white' }}">
  89.                     {{ publication.description|striptags|raw }}
  90.                 </div>
  91.                 {% endif %}
  92.             </div>
  94.             <span class="cta-arrow {{ type == 'thematic-brochure' ? 'cta-arrow--circle-violet' : '' }} {{ templateType == 'pic' ? '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 publicationProperties.document is defined and publicationProperties.document.singleMedia.publicId is not null %}
  107.         {% set isHidden = publicationProperties.isMemberOnly and app.user == null %}
  109.         {% if not isHidden %}
  110.         <a onclick="gtag('event', 'telecharger-cards', {'button_text': 'telecharger-cards'});" href="{{ cloudinary_media(publicationProperties.document.singleMedia) }}" target="_blank" rel="nofollow"
  111.            class="card-common__action {{ type == 'thematic-brochure' ? 'card-common__action--violet' : '' }} icon-center">
  112.             <svg width="20" height="20" class="icon--white">
  113.                 <use href="#icon-download" xlink:href="#icon-download"></use>
  114.             </svg>
  115.             <span class="sr-only">Télécharger le document</span>
  116.         </a>
  117.         {% endif %}
  118.     {% endif %}
  119. </div>