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>
30 lines
1 KiB
PHP
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>
|