From ca17be69be0e9936024bf10b7c40b29217cb544d Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Fri, 27 Feb 2026 11:44:26 +0100
Subject: [PATCH] feat: responsive images for investigation cover cards
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add `cover-card` and `cover-card-webp` srcsets in config
  Widths [465, 728, 930, 1000, 1456] couvrent 1x et 2x (retina)
  pour les 3 breakpoints : ≥1000px fixe 465px, 728–1000px 50vw, <728px 100vw
- Refactor snippet picture.php : accepte $sizes (string complète),
  $srcsetName (srcset nommé), $alt (override), fallback webp automatique
- Update investigations.php : remplace <img> nu par snippet picture
  avec sizes et srcsetName adaptés

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 site/config/config.php            | 18 +++++++---
 site/snippets/picture.php         | 56 +++++++++++++++++++------------
 site/templates/investigations.php |  8 ++++-
 3 files changed, 56 insertions(+), 26 deletions(-)

diff --git a/site/config/config.php b/site/config/config.php
index 2a6e19e..ef5a16d 100644
--- a/site/config/config.php
+++ b/site/config/config.php
@@ -17,10 +17,20 @@ return [
     'srcsets' => [
       'default' => [200, 400, 600, 800, 1024, 1440, 2048],
       'webp' => [
-        '300w' => ['width' => 300 * 1.2, 'format' => 'webp'],
-        '600w' => ['width' => 600 * 1.2, 'format' => 'webp'],
-        '900w' => ['width' => 900 * 1.2, 'format' => 'webp'],
-        '1200w' => ['width' => 1200 * 1.2, 'format' => 'webp'],
+        '300w'  => ['width' => 300,  'format' => 'webp'],
+        '600w'  => ['width' => 600,  'format' => 'webp'],
+        '900w'  => ['width' => 900,  'format' => 'webp'],
+        '1200w' => ['width' => 1200, 'format' => 'webp'],
+      ],
+      // Cover cards investigations : 465px fixe ≥1000px, 50vw 728–1000px, 100vw <728px
+      // Widths couvrent 1x et 2x (retina) pour chaque breakpoint
+      'cover-card' => [465, 728, 930, 1000, 1456],
+      'cover-card-webp' => [
+        '465w'  => ['width' => 465,  'format' => 'webp'],
+        '728w'  => ['width' => 728,  'format' => 'webp'],
+        '930w'  => ['width' => 930,  'format' => 'webp'],
+        '1000w' => ['width' => 1000, 'format' => 'webp'],
+        '1456w' => ['width' => 1456, 'format' => 'webp'],
       ],
     ],
   ],
diff --git a/site/snippets/picture.php b/site/snippets/picture.php
index ab28a7b..fa9be7e 100644
--- a/site/snippets/picture.php
+++ b/site/snippets/picture.php
@@ -1,32 +1,46 @@
 <?php if (isset($file)): ?>
     <?php
-        $sizes = isset($size) ? '(min-width: 1085px) ' . $size . 'vw, 100vw' : '(min-width: 1085px) 50vw, 100vw';
-        $alt = $file->alt() ?? '';
-        $crop = $crop ?? false;
+        // Sizes : accepte soit une string complète ($sizes), soit un vw simple ($size)
+        if (isset($sizes)) {
+            $sizesAttr = $sizes;
+        } elseif (isset($size)) {
+            $sizesAttr = '(min-width: 1085px) ' . $size . 'vw, 100vw';
+        } else {
+            $sizesAttr = '(min-width: 1085px) 50vw, 100vw';
+        }
 
-        $webPSrcset = $file->srcset('webp');
-        $srcset = $file->srcset();
-        $src = $file->url();
-        $width = $file->resize(1800)->width();
-        $height = $file->resize(1800)->height();
-        $class = isset($class) ? 'class="' . $class . '"': '';
-        $lazy = $lazy ?? true;
-        $span = isset($span) ? 'style="--span: ' . $span . ';"': '';
+        $alt         = $alt ?? $file->alt() ?? '';
+        $srcsetName  = $srcsetName ?? 'default';
+        $webpName    = $srcsetName . '-webp';
+        $lazy        = $lazy ?? true;
+        $crop        = $crop ?? false;
+
+        // Vérifie si un srcset webp nommé existe en config, sinon fallback sur 'webp'
+        $kirbyThumbs = kirby()->option('thumbs.srcsets', []);
+        $webpSrcset  = isset($kirbyThumbs[$webpName])
+            ? $file->srcset($webpName)
+            : $file->srcset('webp');
+
+        $srcset = $file->srcset($srcsetName);
+        $src    = $file->url();
+
+        $resized = $file->resize(1800);
+        $width   = $resized ? $resized->width() : $file->width();
+        $height  = $resized ? $resized->height() : $file->height();
+
+        $classAttr = isset($class) ? ' class="' . htmlspecialchars($class) . '"' : '';
+        $spanAttr  = isset($span)  ? ' style="--span: ' . htmlspecialchars($span) . ';"' : '';
     ?>
-
-
-
-    <picture <?= $class ?> <?= $span ?> data-id="<?= $file->uuid() ?>" orientation="<?= $file->orientation() ?>">
-        
-        <source srcset="<?= $webPSrcset ?>"
-            sizes="<?= $sizes ?>" type="image/webp">
-        <img 
+    <picture<?= $classAttr ?><?= $spanAttr ?> data-id="<?= $file->uuid() ?>" orientation="<?= $file->orientation() ?>">
+        <source srcset="<?= $webpSrcset ?>" sizes="<?= $sizesAttr ?>" type="image/webp">
+        <img
             src="<?= $src ?>"
             srcset="<?= $srcset ?>"
-            sizes="<?= $sizes ?>"
+            sizes="<?= $sizesAttr ?>"
             width="<?= $width ?>"
             height="<?= $height ?>"
-            alt="<?= $alt?>"
+            alt="<?= htmlspecialchars($alt) ?>"
+            loading="<?= $lazy ? 'lazy' : 'eager' ?>"
         >
         <div class="loader"></div>
     </picture>
diff --git a/site/templates/investigations.php b/site/templates/investigations.php
index 4151482..e797c79 100644
--- a/site/templates/investigations.php
+++ b/site/templates/investigations.php
@@ -42,7 +42,13 @@
 
     <?php if ($cover): ?>
     <figure>
-        <img src="<?= $cover->url() ?>" alt="<?= $investigation->title()->esc() ?>">
+        <?php snippet('picture', [
+            'file'       => $cover,
+            'alt'        => $investigation->title()->value(),
+            'sizes'      => '(min-width: 1000px) 465px, (min-width: 728px) 50vw, 100vw',
+            'srcsetName' => 'cover-card',
+            'lazy'       => true,
+        ]) ?>
     </figure>
     <?php endif ?>