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,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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue