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
parent
7bdc58a346
commit
df31382a97
4 changed files with 72 additions and 8 deletions
|
|
@ -32,6 +32,31 @@ return [
|
|||
'1000w' => ['width' => 1000, 'format' => 'webp'],
|
||||
'1456w' => ['width' => 1456, 'format' => 'webp'],
|
||||
],
|
||||
// Hero cover investigation : 940px fixe ≥1000px, 90vw en dessous
|
||||
'cover-hero' => [680, 940, 1200, 1880],
|
||||
'cover-hero-webp' => [
|
||||
'680w' => ['width' => 680, 'format' => 'webp'],
|
||||
'940w' => ['width' => 940, 'format' => 'webp'],
|
||||
'1200w' => ['width' => 1200, 'format' => 'webp'],
|
||||
'1880w' => ['width' => 1880, 'format' => 'webp'],
|
||||
],
|
||||
// Body 1 colonne : 100vw
|
||||
'body-full' => [750, 1000, 1440, 1880],
|
||||
'body-full-webp' => [
|
||||
'750w' => ['width' => 750, 'format' => 'webp'],
|
||||
'1000w' => ['width' => 1000, 'format' => 'webp'],
|
||||
'1440w' => ['width' => 1440, 'format' => 'webp'],
|
||||
'1880w' => ['width' => 1880, 'format' => 'webp'],
|
||||
],
|
||||
// Body 2 colonnes : 50vw ≥768px, 90vw en dessous
|
||||
'body-half' => [680, 720, 1000, 1380, 1440],
|
||||
'body-half-webp' => [
|
||||
'680w' => ['width' => 680, 'format' => 'webp'],
|
||||
'720w' => ['width' => 720, 'format' => 'webp'],
|
||||
'1000w' => ['width' => 1000, 'format' => 'webp'],
|
||||
'1380w' => ['width' => 1380, 'format' => 'webp'],
|
||||
'1440w' => ['width' => 1440, 'format' => 'webp'],
|
||||
],
|
||||
],
|
||||
],
|
||||
'panel' => [
|
||||
|
|
|
|||
|
|
@ -3,6 +3,11 @@
|
|||
$imageBefore = $block->imageBefore()->toFile();
|
||||
$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>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
<?php
|
||||
/** @var \Kirby\Cms\Block $block */
|
||||
$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 ?>
|
||||
|
|
|
|||
|
|
@ -49,7 +49,13 @@ $dateLocale = substr(is_array($locale) ? reset($locale) : $locale, 0, 5);
|
|||
<!-- HERO IMAGE (cover) -->
|
||||
<div id="investigation__hero">
|
||||
<figure>
|
||||
<img src="<?= $cover->url() ?>" alt="<?= $page->title()->esc() ?>">
|
||||
<?php snippet('picture', [
|
||||
'file' => $cover,
|
||||
'alt' => $page->title()->value(),
|
||||
'sizes' => '(min-width: 1000px) 940px, 90vw',
|
||||
'srcsetName' => 'cover-hero',
|
||||
'lazy' => false,
|
||||
]) ?>
|
||||
</figure>
|
||||
<?php if ($page->heroCaption()->isNotEmpty()): ?>
|
||||
<figcaption><?= $page->heroCaption()->inline() ?></figcaption>
|
||||
|
|
@ -199,7 +205,13 @@ $dateLocale = substr(is_array($locale) ? reset($locale) : $locale, 0, 5);
|
|||
<?php $image = $block->image()->toFile(); ?>
|
||||
<?php if ($image): ?>
|
||||
<figure>
|
||||
<img src="<?= $image->url() ?>" alt="<?= $image->alt()->esc() ?>">
|
||||
<?php snippet('picture', [
|
||||
'file' => $image,
|
||||
'alt' => $image->alt()->value(),
|
||||
'sizes' => '100vw',
|
||||
'srcsetName' => 'body-full',
|
||||
'lazy' => true,
|
||||
]) ?>
|
||||
</figure>
|
||||
<?php if ($image->caption()->isNotEmpty()): ?>
|
||||
<p class="caption"><?= $image->caption()->html() ?></p>
|
||||
|
|
@ -209,7 +221,11 @@ $dateLocale = substr(is_array($locale) ? reset($locale) : $locale, 0, 5);
|
|||
|
||||
<?php elseif ($block->type() === 'beforeafter'): ?>
|
||||
<div class="media">
|
||||
<?php snippet('blocks/' . $block->type(), ['block' => $block]) ?>
|
||||
<?php snippet('blocks/' . $block->type(), [
|
||||
'block' => $block,
|
||||
'imgSizes' => '100vw',
|
||||
'imgSrcset' => 'body-full',
|
||||
]) ?>
|
||||
</div>
|
||||
|
||||
<?php elseif ($block->type() === 'video'): ?>
|
||||
|
|
@ -242,7 +258,13 @@ $dateLocale = substr(is_array($locale) ? reset($locale) : $locale, 0, 5);
|
|||
<?php $image = $block->image()->toFile(); ?>
|
||||
<?php if ($image): ?>
|
||||
<figure>
|
||||
<img src="<?= $image->url() ?>" alt="<?= $image->alt()->esc() ?>">
|
||||
<?php snippet('picture', [
|
||||
'file' => $image,
|
||||
'alt' => $image->alt()->value(),
|
||||
'sizes' => '(min-width: 768px) 50vw, 90vw',
|
||||
'srcsetName' => 'body-half',
|
||||
'lazy' => true,
|
||||
]) ?>
|
||||
</figure>
|
||||
<?php if ($image->caption()->isNotEmpty()): ?>
|
||||
<p class="caption"><?= $image->caption()->html() ?></p>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue