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

Open in your IDE?
  1. <div class="card card-video w-full"
  2.      js-dynamic-modal="{route: '/ajax/modal/portrait', position: 'center', id:'{{ portrait.id }}', model: 'portrait-video-modal', refreshAttribute: ['js-portrait-video-modal', 'js-video-player']}">
  3.     <div class="tag">Portrait</div>
  4.     {% if portraitProperties.cover is defined and portraitProperties.cover.singleMedia.publicId is not null %}
  5.         <picture>
  6.             <source media="(max-width: 420px)" srcset="{{ cloudinary_media(portraitProperties.cover.singleMedia, 'f_auto,g_face,c_fill,q_auto,w_356,h_500') }} 1x, {{ cloudinary_media(portraitProperties.cover.singleMedia, 'f_auto,g_face,c_fill,q_auto,w_356,h_500,dpr_2') }} 2x">
  7.             <source media="(max-width: 767px)" srcset="{{ cloudinary_media(portraitProperties.cover.singleMedia, 'f_auto,g_face,c_fill,q_auto,w_703,h_500') }} 1x, {{ cloudinary_media(portraitProperties.cover.singleMedia, 'f_auto,g_face,c_fill,q_auto,w_703,h_500,dpr_2') }} 2x">
  8.             <source media="(max-width: 1023px)" srcset="{{ cloudinary_media(portraitProperties.cover.singleMedia, 'f_auto,g_face,c_fill,q_auto,w_464,h_460') }} 1x, {{ cloudinary_media(portraitProperties.cover.singleMedia, 'f_auto,g_face,c_fill,q_auto,w_464,h_460,dpr_2') }} 2x">
  9.             <source media="(max-width: 1279px)" srcset="{{ cloudinary_media(portraitProperties.cover.singleMedia, 'f_auto,g_face,c_fill,q_auto,w_382,h_460') }} 1x, {{ cloudinary_media(portraitProperties.cover.singleMedia, 'f_auto,g_face,c_fill,q_auto,w_382,h_460,dpr_2') }} 2x">
  10.             <source media="(min-width: 1280px)" srcset="{{ cloudinary_media(portraitProperties.cover.singleMedia, 'f_auto,g_face,c_fill,q_auto,w_430,h_540') }} 1x, {{ cloudinary_media(portraitProperties.cover.singleMedia, 'f_auto,g_face,c_fill,q_auto,w_430,h_540,dpr_2') }} 2x">
  11.             <img class="object-fit-image card-video__bg lazyload"
  12.                 data-src="{{ cloudinary_media(portraitProperties.cover.singleMedia, 'f_auto,q_auto,c_fill,g_face,w_430,h_540') }}"
  13.                 alt="{{ portraitProperties.cover.singleMedia.alt }}">
  14.         </picture>
  15.     {% endif %}
  16.     <div class="card-video__content flex flex-nowrap items-center w-full">
  17.         <div class="relative lty-playbtn video__play icon-center">
  18.             <span class="sr-only">Play video</span>
  19.             <svg width="30" height="35" class="icon icon--white">
  20.                 <use href="#icon-play" xlink:href="#icon-play"/>
  21.             </svg>
  22.         </div>
  23.         <div>
  24.             <p class="title title--M text-white font-weight-semibold">
  25.                 {{ portrait.title }}
  26.             </p>
  27.             <p class="description text-white mt-2">{{ portraitProperties.job }}</p>
  28.             {% if portraitProperties.location is defined and portraitProperties.location is not null %}
  29.             <div class="flex items-center">
  30.                 <svg width="11" height="15" class="icon icon--white mr-2">
  31.                     <use href="#icon-pin" xlink:href="#icon-pin"/>
  32.                 </svg>
  33.                 
  34.                 <p class="localisation text-white font-weight-medium">À <span class="font-weight-bold">{{ portraitProperties.location }}</span></p>
  35.             </div>
  36.             {% endif %}
  37.         </div>
  38.     </div>
  39. </div>