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

Add srcsets in config:
- cover-hero: 940px fixe ≥1000px, 90vw en dessous
- body-full: 100vw (1 colonne)
- body-half: 50vw ≥768px, 90vw en dessous (2 colonnes)

Apply in templates/snippets:
- Cover hero → snippet picture + cover-hero
- Body 1-col images → snippet picture + body-full
- Body 2-col images → snippet picture + body-half
- gallery.php → snippet picture (sizes/srcset paramétrables)
- beforeafter.php → srcset/sizes sur <img> (pas de <picture> pour ne pas
  casser le JS du slider)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 site/config/config.php                        | 25 ++++++++++++++++
 .../snippets/blocks/beforeafter.php           | 13 ++++++--
 site/snippets/blocks/gallery.php              | 12 ++++++--
 site/templates/investigation.php              | 30 ++++++++++++++++---
 4 files changed, 72 insertions(+), 8 deletions(-)

diff --git a/site/config/config.php b/site/config/config.php
index ef5a16d..1f57aa2 100644
--- a/site/config/config.php
+++ b/site/config/config.php
@@ -32,6 +32,31 @@ return [
         '1000w' => ['width' => 1000, 'format' => 'webp'],
         '1456w' => ['width' => 1456, 'format' => 'webp'],
       ],
+      // Hero cover investigation : 940px fixe ≥1000px, 90vw en dessous
+      'cover-hero' => [680, 940, 1200, 1880],
+      'cover-hero-webp' => [
+        '680w'  => ['width' => 680,  'format' => 'webp'],
+        '940w'  => ['width' => 940,  'format' => 'webp'],
+        '1200w' => ['width' => 1200, 'format' => 'webp'],
+        '1880w' => ['width' => 1880, 'format' => 'webp'],
+      ],
+      // Body 1 colonne : 100vw
+      'body-full' => [750, 1000, 1440, 1880],
+      'body-full-webp' => [
+        '750w'  => ['width' => 750,  'format' => 'webp'],
+        '1000w' => ['width' => 1000, 'format' => 'webp'],
+        '1440w' => ['width' => 1440, 'format' => 'webp'],
+        '1880w' => ['width' => 1880, 'format' => 'webp'],
+      ],
+      // Body 2 colonnes : 50vw ≥768px, 90vw en dessous
+      'body-half' => [680, 720, 1000, 1380, 1440],
+      'body-half-webp' => [
+        '680w'  => ['width' => 680,  'format' => 'webp'],
+        '720w'  => ['width' => 720,  'format' => 'webp'],
+        '1000w' => ['width' => 1000, 'format' => 'webp'],
+        '1380w' => ['width' => 1380, 'format' => 'webp'],
+        '1440w' => ['width' => 1440, 'format' => 'webp'],
+      ],
     ],
   ],
   'panel' => [
diff --git a/site/plugins/beforeafter/snippets/blocks/beforeafter.php b/site/plugins/beforeafter/snippets/blocks/beforeafter.php
index 8718c07..2df4414 100644
--- a/site/plugins/beforeafter/snippets/blocks/beforeafter.php
+++ b/site/plugins/beforeafter/snippets/blocks/beforeafter.php
@@ -1,8 +1,13 @@
 <?php
 /** @var \Kirby\Cms\Block $block */
 $imageBefore = $block->imageBefore()->toFile();
-$imageAfter = $block->imageAfter()->toFile();
-$caption = $block->caption()->value();
+$imageAfter  = $block->imageAfter()->toFile();
+$caption     = $block->caption()->value();
+$imgSizes    = $imgSizes  ?? '(min-width: 768px) 50vw, 90vw';
+$imgSrcset   = $imgSrcset ?? 'body-half';
+
+$kirbyThumbs = kirby()->option('thumbs.srcsets', []);
+$srcsetAttr  = isset($kirbyThumbs[$imgSrcset]) ? fn($f) => $f->srcset($imgSrcset) : fn($f) => $f->srcset();
 ?>
 
 <?php if ($imageBefore || $imageAfter): ?>
@@ -11,12 +16,16 @@ $caption = $block->caption()->value();
         <?php if ($imageBefore): ?>
         <img class="image-before slider-image"
              src="<?= $imageBefore->url() ?>"
+             srcset="<?= $srcsetAttr($imageBefore) ?>"
+             sizes="<?= $imgSizes ?>"
              alt="<?= $imageBefore->alt()->or('Image avant')->esc() ?>" />
         <?php endif ?>
 
         <?php if ($imageAfter): ?>
         <img class="image-after slider-image"
              src="<?= $imageAfter->url() ?>"
+             srcset="<?= $srcsetAttr($imageAfter) ?>"
+             sizes="<?= $imgSizes ?>"
              alt="<?= $imageAfter->alt()->or('Image après')->esc() ?>" />
         <?php endif ?>
     </div>
diff --git a/site/snippets/blocks/gallery.php b/site/snippets/blocks/gallery.php
index 0cfe021..4e03f0c 100644
--- a/site/snippets/blocks/gallery.php
+++ b/site/snippets/blocks/gallery.php
@@ -1,6 +1,8 @@
 <?php
 /** @var \Kirby\Cms\Block $block */
-$images = $block->images()->toFiles();
+$images      = $block->images()->toFiles();
+$imgSizes    = $imgSizes    ?? '(min-width: 768px) 50vw, 90vw';
+$imgSrcset   = $imgSrcset   ?? 'body-half';
 ?>
 
 <div class="swiper">
@@ -8,7 +10,13 @@ $images = $block->images()->toFiles();
         <?php foreach ($images as $image): ?>
         <div class="swiper-slide">
             <figure>
-                <img src="<?= $image->url() ?>" alt="<?= $image->alt()->esc() ?>">
+                <?php snippet('picture', [
+                    'file'       => $image,
+                    'alt'        => $image->alt()->value(),
+                    'sizes'      => $imgSizes,
+                    'srcsetName' => $imgSrcset,
+                    'lazy'       => true,
+                ]) ?>
                 <?php if ($image->caption()->isNotEmpty()): ?>
                 <figcaption><?= $image->caption()->html() ?></figcaption>
                 <?php endif ?>
diff --git a/site/templates/investigation.php b/site/templates/investigation.php
index 678290c..0b23e5d 100644
--- a/site/templates/investigation.php
+++ b/site/templates/investigation.php
@@ -49,7 +49,13 @@ $dateLocale = substr(is_array($locale) ? reset($locale) : $locale, 0, 5);
     <!-- HERO IMAGE (cover) -->
     <div id="investigation__hero">
         <figure>
-            <img src="<?= $cover->url() ?>" alt="<?= $page->title()->esc() ?>">
+            <?php snippet('picture', [
+                'file'       => $cover,
+                'alt'        => $page->title()->value(),
+                'sizes'      => '(min-width: 1000px) 940px, 90vw',
+                'srcsetName' => 'cover-hero',
+                'lazy'       => false,
+            ]) ?>
         </figure>
         <?php if ($page->heroCaption()->isNotEmpty()): ?>
         <figcaption><?= $page->heroCaption()->inline() ?></figcaption>
@@ -199,7 +205,13 @@ $dateLocale = substr(is_array($locale) ? reset($locale) : $locale, 0, 5);
                                 <?php $image = $block->image()->toFile(); ?>
                                 <?php if ($image): ?>
                                     <figure>
-                                        <img src="<?= $image->url() ?>" alt="<?= $image->alt()->esc() ?>">
+                                        <?php snippet('picture', [
+                                            'file'       => $image,
+                                            'alt'        => $image->alt()->value(),
+                                            'sizes'      => '100vw',
+                                            'srcsetName' => 'body-full',
+                                            'lazy'       => true,
+                                        ]) ?>
                                     </figure>
                                     <?php if ($image->caption()->isNotEmpty()): ?>
                                         <p class="caption"><?= $image->caption()->html() ?></p>
@@ -209,7 +221,11 @@ $dateLocale = substr(is_array($locale) ? reset($locale) : $locale, 0, 5);
 
                         <?php elseif ($block->type() === 'beforeafter'): ?>
                             <div class="media">
-                                <?php snippet('blocks/' . $block->type(), ['block' => $block]) ?>
+                                <?php snippet('blocks/' . $block->type(), [
+                                    'block'     => $block,
+                                    'imgSizes'  => '100vw',
+                                    'imgSrcset' => 'body-full',
+                                ]) ?>
                             </div>
 
                         <?php elseif ($block->type() === 'video'): ?>
@@ -242,7 +258,13 @@ $dateLocale = substr(is_array($locale) ? reset($locale) : $locale, 0, 5);
                                         <?php $image = $block->image()->toFile(); ?>
                                         <?php if ($image): ?>
                                             <figure>
-                                                <img src="<?= $image->url() ?>" alt="<?= $image->alt()->esc() ?>">
+                                                <?php snippet('picture', [
+                                                    'file'       => $image,
+                                                    'alt'        => $image->alt()->value(),
+                                                    'sizes'      => '(min-width: 768px) 50vw, 90vw',
+                                                    'srcsetName' => 'body-half',
+                                                    'lazy'       => true,
+                                                ]) ?>
                                             </figure>
                                             <?php if ($image->caption()->isNotEmpty()): ?>
                                                 <p class="caption"><?= $image->caption()->html() ?></p>