feat: responsive images for investigation template

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>
This commit is contained in:
isUnknown 2026-02-27 13:51:48 +01:00
parent 7bdc58a346
commit df31382a97
4 changed files with 72 additions and 8 deletions

View file

@ -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 ?>