index-main/site/snippets/picture.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 ?>