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

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>