From a9d8d4fd24a85d797158a28ecef06140c0141a2a Mon Sep 17 00:00:00 2001
From: Valentin Le Moign <valentin_le_moign@figureslibres.io>
Date: Fri, 11 Sep 2026 17:16:27 +0200
Subject: [PATCH] Grille projet : images en pleine largeur de colonne servies
 en HD
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Dans la grille d'images de la fiche projet, la dernière image d'un
total impair s'étale sur toute la largeur de colonne (grid-column:
span 2) en tablette/desktop. Elle était chargée en SD 640px, donc
pixelisée. Ajout d'un srcset (@Nx) avec sizes adapté à la largeur
d'affichage réelle : 100vw pour l'image pleine largeur, sinon
(min-width: 576px) 50vw, 100vw.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../figureslibres-v2/templates/reader.html.twig  | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/user/themes/figureslibres-v2/templates/reader.html.twig b/user/themes/figureslibres-v2/templates/reader.html.twig
index 06bbc6f..6b6b97d 100644
--- a/user/themes/figureslibres-v2/templates/reader.html.twig
+++ b/user/themes/figureslibres-v2/templates/reader.html.twig
@@ -39,13 +39,15 @@
       </div>
 
       <div id="project-images-grid">
-        {% for image in page.media.images %}
-            {# quand l'en-tête est une vidéo, la 1re image n'est pas affichée ailleurs : on l'inclut dans la grille #}
-            {% if cover_video != null or image != page.media.images | first %}
-              <figure class="{{ class_suffix }}">
-                <img src="{{ url('theme://images/loader/rolling.svg') }}" data-src="{{ image.url }}" alt="{{ page.title }}" class="lazy loader project-image">
-              </figure>
-            {% endif %}
+        {# images affichées dans la grille : toutes, ou toutes sauf la 1re (en-tête) s'il n'y a pas de vidéo #}
+        {% set grid_images = cover_video != null ? page.media.images : page.media.images|slice(1) %}
+        {% set grid_count = grid_images|length %}
+        {% for image in grid_images %}
+            {# dernière image d'un total impair : elle s'étale sur toute la largeur de colonne (grid-column: span 2) → sizes 100vw #}
+            {% set full_width = loop.last and grid_count is odd %}
+            <figure class="{{ class_suffix }}">
+              <img src="{{ url('theme://images/loader/rolling.svg') }}" data-src="{{ image.url }}"{% if image.srcset %} data-srcset="{{ image.srcset }}" data-sizes="{{ full_width ? '100vw' : '(min-width: 576px) 50vw, 100vw' }}"{% endif %} alt="{{ page.title }}" class="lazy loader project-image">
+            </figure>
         {% endfor %}
       </div>