ca17be69be
- 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>
47 lines
1.9 KiB
PHP
47 lines
1.9 KiB
PHP
<?php if (isset($file)): ?>
|
|
<?php
|
|
// 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';
|
|
}
|
|
|
|
$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<?= $classAttr ?><?= $spanAttr ?> data-id="<?= $file->uuid() ?>" orientation="<?= $file->orientation() ?>">
|
|
<source srcset="<?= $webpSrcset ?>" sizes="<?= $sizesAttr ?>" type="image/webp">
|
|
<img
|
|
src="<?= $src ?>"
|
|
srcset="<?= $srcset ?>"
|
|
sizes="<?= $sizesAttr ?>"
|
|
width="<?= $width ?>"
|
|
height="<?= $height ?>"
|
|
alt="<?= htmlspecialchars($alt) ?>"
|
|
loading="<?= $lazy ? 'lazy' : 'eager' ?>"
|
|
>
|
|
<div class="loader"></div>
|
|
</picture>
|
|
<?php endif ?>
|