- Vidéo en média d'en-tête de la fiche projet quand elle existe (comme la vignette d'index), sinon première image. La grille inclut la 1re image quand l'en-tête est une vidéo pour ne pas la perdre. - Diaporama : images en HD (srcset @Nx via jquery.lazy) au lieu de la version SD 640px ; affichage plein écran sans rognage (object-fit contain, dimensions viewport). - Diaporama : clic sur le fond ferme, navigation clavier (flèches + Échap). Indexation robuste par URL (data-src/src) corrigeant l'ouverture systématique sur l'image d'en-tête. - Cartes projet mobile/tablette : titre ferré à gauche sous l'image au lieu d'être centré. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
13 lines
657 B
Twig
13 lines
657 B
Twig
<div class="swiper">
|
|
<div class="swiper-wrapper">
|
|
{% for image in page.media.images %}
|
|
{% set hd = image.srcset %}
|
|
<div class="swiper-slide">
|
|
<img class="lazy loader" src="{{ url('theme://images/loader/rolling.svg') }}" data-src="{{ image.url }}"{% if hd %} data-srcset="{{ hd }}" data-sizes="100vw"{% endif %} alt="{{ page.title }}" />
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
<div class="swiper-button-prev"></div>
|
|
<div class="swiper-button-next"></div>
|
|
<div id="close-carousel" class="picto" data-src="{{ url('theme://images/pictos/cross.svg') }}" aria-hidden="true"></div>
|
|
</div> |