studio-variable/index-main
4
0
Fork 0
Code Issues 15 Pull requests Projects Releases Packages Wiki Activity Actions

feat: responsive images for investigation cover cards

Browse source 
- Add `cover-card` and `cover-card-webp` srcsets in config
  Widths [465, 728, 930, 1000, 1456] couvrent 1x et 2x (retina)
  pour les 3 breakpoints : ≥1000px fixe 465px, 728–1000px 50vw, <728px 100vw
- Refactor snippet picture.php : accepte $sizes (string complète),
  $srcsetName (srcset nommé), $alt (override), fallback webp automatique
- Update investigations.php : remplace <img> nu par snippet picture
  avec sizes et srcsetName adaptés

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-02-27 11:44:26 +01:00
parent 8d808a87fe
commit ca17be69be
3 changed files with 56 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

18
site/config/config.php
View file

@ -17,10 +17,20 @@ return [
'srcsets' => [
'default' => [200, 400, 600, 800, 1024, 1440, 2048],
'webp' => [
'300w' => ['width' => 300 * 1.2, 'format' => 'webp'],
'600w' => ['width' => 600 * 1.2, 'format' => 'webp'],
'900w' => ['width' => 900 * 1.2, 'format' => 'webp'],
'1200w' => ['width' => 1200 * 1.2, 'format' => 'webp'],
'300w' => ['width' => 300, 'format' => 'webp'],
'600w' => ['width' => 600, 'format' => 'webp'],
'900w' => ['width' => 900, 'format' => 'webp'],
'1200w' => ['width' => 1200, 'format' => 'webp'],
],
// Cover cards investigations : 465px fixe ≥1000px, 50vw 728–1000px, 100vw <728px
// Widths couvrent 1x et 2x (retina) pour chaque breakpoint
'cover-card' => [465, 728, 930, 1000, 1456],
'cover-card-webp' => [
'465w' => ['width' => 465, 'format' => 'webp'],
'728w' => ['width' => 728, 'format' => 'webp'],
'930w' => ['width' => 930, 'format' => 'webp'],
'1000w' => ['width' => 1000, 'format' => 'webp'],
'1456w' => ['width' => 1456, 'format' => 'webp'],
],
],
],

56
site/snippets/picture.php
View file

@ -1,32 +1,46 @@
<?php if (isset($file)): ?>
<?php
$sizes = isset($size) ? '(min-width: 1085px) ' . $size . 'vw, 100vw' : '(min-width: 1085px) 50vw, 100vw';
$alt = $file->alt() ?? '';
$crop = $crop ?? false;
// Sizes : accepte soit une string complète ($sizes), soit un vw simple ($size)
if (isset($sizes)) {
$sizesAttr = $sizes;
} elseif (isset($size)) {
$sizesAttr = '(min-width: 1085px) ' . $size . 'vw, 100vw';
} else {
$sizesAttr = '(min-width: 1085px) 50vw, 100vw';
}
$webPSrcset = $file->srcset('webp');
$srcset = $file->srcset();
$src = $file->url();
$width = $file->resize(1800)->width();
$height = $file->resize(1800)->height();
$class = isset($class) ? 'class="' . $class . '"': '';
$lazy = $lazy ?? true;
$span = isset($span) ? 'style="--span: ' . $span . ';"': '';
$alt = $alt ?? $file->alt() ?? '';
$srcsetName = $srcsetName ?? 'default';
$webpName = $srcsetName . '-webp';
$lazy = $lazy ?? true;
$crop = $crop ?? false;
// Vérifie si un srcset webp nommé existe en config, sinon fallback sur 'webp'
$kirbyThumbs = kirby()->option('thumbs.srcsets', []);
$webpSrcset = isset($kirbyThumbs[$webpName])
? $file->srcset($webpName)
: $file->srcset('webp');
$srcset = $file->srcset($srcsetName);
$src = $file->url();
$resized = $file->resize(1800);
$width = $resized ? $resized->width() : $file->width();
$height = $resized ? $resized->height() : $file->height();
$classAttr = isset($class) ? ' class="' . htmlspecialchars($class) . '"' : '';
$spanAttr = isset($span) ? ' style="--span: ' . htmlspecialchars($span) . ';"' : '';
?>
<picture <?= $class ?> <?= $span ?> data-id="<?= $file->uuid() ?>" orientation="<?= $file->orientation() ?>">
<source srcset="<?= $webPSrcset ?>"
sizes="<?= $sizes ?>" type="image/webp">
<img
<picture<?= $classAttr ?><?= $spanAttr ?> data-id="<?= $file->uuid() ?>" orientation="<?= $file->orientation() ?>">
<source srcset="<?= $webpSrcset ?>" sizes="<?= $sizesAttr ?>" type="image/webp">
<img
src="<?= $src ?>"
srcset="<?= $srcset ?>"
sizes="<?= $sizes ?>"
sizes="<?= $sizesAttr ?>"
width="<?= $width ?>"
height="<?= $height ?>"
alt="<?= $alt?>"
alt="<?= htmlspecialchars($alt) ?>"
loading="<?= $lazy ? 'lazy' : 'eager' ?>"
>
<div class="loader"></div>
</picture>

8
site/templates/investigations.php
View file

@ -42,7 +42,13 @@
<?php if ($cover): ?>
<figure>
<img src="<?= $cover->url() ?>" alt="<?= $investigation->title()->esc() ?>">
<?php snippet('picture', [
'file' => $cover,
'alt' => $investigation->title()->value(),
'sizes' => '(min-width: 1000px) 465px, (min-width: 728px) 50vw, 100vw',
'srcsetName' => 'cover-card',
'lazy' => true,
]) ?>
</figure>
<?php endif ?>