studio-variable/hecq-et-lesort
5
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages Wiki Activity Actions

images : picture snippet, srcsets events-grid, webp avec fallback jpeg

Browse source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-05-07 07:45:43 +02:00
parent 1f24355dc6
commit eea8068ae1
6 changed files with 97 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

6
site/config/config.php
View file

@ -4,4 +4,10 @@ return [
'debug' => true,
'locale' => 'fr_FR.UTF-8',
'date.handler' => 'intl',
'thumbs' => [
'quality' => 80,
'srcsets' => array_merge(
require __DIR__ . '/thumbs/events-grid.php',
),
],
];

14
site/config/thumbs/events-grid.php Normal file
View file

@ -0,0 +1,14 @@
<?php
// Grille de cards événements : 30vw ≥800px, 100vw <800px
// Widths couvrent 1x et 2x (retina) pour chaque breakpoint
return [
'event-card' => [400, 600, 800, 1200, 1600],
'event-card-webp' => [
'400w' => ['width' => 400, 'format' => 'webp'],
'600w' => ['width' => 600, 'format' => 'webp'],
'800w' => ['width' => 800, 'format' => 'webp'],
'1200w' => ['width' => 1200, 'format' => 'webp'],
'1600w' => ['width' => 1600, 'format' => 'webp'],
],
];

0
site/snippets/events/filters.php Normal file
View file

13
site/snippets/events/grid.php Normal file
View file

@ -0,0 +1,13 @@
<ul class="events-grid">
<?php foreach($page->children() as $event): ?>
<li class="event-card">
<h2><?= $event->title() ?></h2>
<?php snippet('picture', [
'file' => $event->cover()->toFile(),
'srcsetName' => 'event-card',
'sizes' => '(min-width: 800px) 30vw, 100vw',
'alt' => $event->title()->value(),
]) ?>
</li>
<?php endforeach ?>
</ul>

59
site/snippets/picture.php Normal file
View file

@ -0,0 +1,59 @@
<?php if (isset($file)): ?>
<?php
$alt = $alt ?? $file->alt() ?? '';
$lazy = $lazy ?? true;
$classAttr = isset($class) ? ' class="' . htmlspecialchars($class) . '"' : '';
$spanAttr = isset($span) ? ' style="--span: ' . htmlspecialchars($span) . ';"' : '';
?>
<?php if ($file->mime() === 'image/gif'): ?>
<picture<?= $classAttr ?><?= $spanAttr ?> data-id="<?= $file->uuid() ?>" orientation="<?= $file->orientation() ?>" data-mime="<?= $file->mime() ?>">
<img
src="<?= $file->url() ?>"
width="<?= $file->width() ?>"
height="<?= $file->height() ?>"
alt="<?= htmlspecialchars($alt) ?>"
loading="<?= $lazy ? 'lazy' : 'eager' ?>"
>
</picture>
<?php else: ?>
<?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';
}
$srcsetName = $srcsetName ?? 'default';
$webpName = $srcsetName . '-webp';
$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();
?>
<picture<?= $classAttr ?><?= $spanAttr ?> data-id="<?= $file->uuid() ?>" orientation="<?= $file->orientation() ?>" data-mime="<?= $file->mime() ?>">
<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' ?>"
>
</picture>
<?php endif ?>
<?php endif ?>

5
site/templates/events.php
View file

@ -1,3 +1,8 @@
<?php snippet('head') ?>
<?php snippet('header') ?>
<?php snippet('events/filters') ?>
<?php snippet('events/grid') ?>
<?php snippet('footer') ?>