index-main/site/snippets/blocks/gallery.php
isUnknown df31382a97 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>
2026-02-27 13:51:48 +01:00

30 lines
1 KiB
PHP

<?php
/** @var \Kirby\Cms\Block $block */
$images = $block->images()->toFiles();
$imgSizes = $imgSizes ?? '(min-width: 768px) 50vw, 90vw';
$imgSrcset = $imgSrcset ?? 'body-half';
?>
<div class="swiper">
<div class="swiper-wrapper">
<?php foreach ($images as $image): ?>
<div class="swiper-slide">
<figure>
<?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 ?>
</figure>
</div>
<?php endforeach ?>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-pagination"></div>
</div>