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:
parent
7bdc58a346
commit
df31382a97
4 changed files with 72 additions and 8 deletions
|
|
@ -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 ?>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue