product > details : preserve line jump

- Configure thumbs presets in config.php (quality 85%, WebP format)
- Create picture snippet with srcset and WebP support
- Add product-card and product-detail presets
- Update templates to use optimized images
- Implement native lazy loading for product cards
- Add aspect-ratio CSS for layout stability

Improvements over reference project:
- Complete PHPDoc documentation
- Native CSS aspect-ratio support
- Optimized lazy loading strategy
- Product-specific image presets

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

.claude/settings.local.json

@@ -0,0 +1,7 @@
+{
+  "permissions": {
+    "allow": [
+      "WebSearch"
+    ]
+  }
+}

.gitignore

@@ -48,3 +48,7 @@ Icon
 # ---------------
 
 /site/config/.license
+
+# Guide d'intégration (contient des informations sensibles)
+# ---------------
+GUIDE-INTEGRATION-MONDIAL-RELAY.md

assets/css/components/_text.scss

@@ -63,3 +63,12 @@
     margin-bottom: 0.5em;
   }
 }
+
+.section__product {
+  .details {
+    > p,
+    > ul {
+      margin-bottom: 1rem;
+    }
+  }
+}

assets/css/style.css

@@ -475,6 +475,11 @@ main {
   margin-bottom: 0.5em;
 }
 
+.section__product .details > p,
+.section__product .details > ul {
+  margin-bottom: 1rem;
+}
+
 @keyframes add-border {
   from {
     border-bottom-color: transparent;

content/1_tshirt-index-01/product.fr.txt

@@ -14,7 +14,7 @@ Description: T-shirt de soutien à Index, 100% coton
 
 ----
 
-Details: <p>item: 100% cotton - item: Lorem ipsum dolor sit amet</p>
+Details: <p>T-shirt en coton organique avec impression sérigraphique.<br>Marquage sur la face avant : logo « INDEX » de 10 cm de large.</p><ul><li><p>100 % coton biologique</p></li><li><p>Grammage : 180 g/m²</p></li><li><p>Jersey simple au toucher très doux</p></li><li><p>Excellente tenue dans le temps</p></li><li><p>Bande de propreté intérieure au col</p></li><li><p>Surpiqûres doubles en bas de manches et en bas de corps</p></li></ul><p>Envoi uniquement via Mondial Relay vers la France, la Belgique et la Suisse.</p>
 
 ----
 

site/blueprints/pages/product.yml

@@ -34,8 +34,9 @@ tabs:
                 translate: false
                 width: 1/4
               description:
-                label: Description
+                label: Description panier
                 type: writer
+                help: Visible dans le panier seulement.
               details:
                 label:
                   en: Details

site/config/config.php

@@ -5,6 +5,37 @@ return [
 
     'languages' => true,
 
+    'thumbs' => [
+        'quality' => 85,
+        'format' => 'webp',
+        'presets' => [
+            'product-card' => [
+                'width' => 600,
+                'height' => 600,
+                'crop' => true,
+                'format' => 'webp'
+            ],
+            'product-detail' => [
+                'width' => 1200,
+                'format' => 'webp'
+            ],
+            'default' => [
+                'width' => 1024,
+                'format' => 'webp'
+            ],
+        ],
+        'srcsets' => [
+            'default' => [400, 600, 800, 1024, 1440, 2048],
+            'webp' => [
+                '400w' => ['width' => 400, 'format' => 'webp'],
+                '600w' => ['width' => 600, 'format' => 'webp'],
+                '800w' => ['width' => 800, 'format' => 'webp'],
+                '1024w' => ['width' => 1024, 'format' => 'webp'],
+                '1440w' => ['width' => 1440, 'format' => 'webp'],
+            ],
+        ],
+    ],
+
     'routes' => [
         [
             'pattern' => 'snipcart-webhook',

site/snippets/picture.php

@@ -0,0 +1,56 @@
+<?php
+/**
+ * Picture Snippet - Optimized image output with responsive srcset and WebP support
+ *
+ * @param Kirby\Cms\File $file - Required: The image file object
+ * @param string $alt - Optional: Alt text (defaults to file's alt field)
+ * @param string $class - Optional: CSS class for the picture element
+ * @param string|int $size - Optional: Size hint in vw for the sizes attribute (e.g., 50 for 50vw)
+ * @param bool $lazy - Optional: Enable native lazy loading (default: true)
+ * @param string $preset - Optional: Thumb preset to use (default: 'default')
+ * @param bool $crop - Optional: Crop the image (default: false)
+ */
+
+if (!isset($file) || !$file) return;
+
+// Configuration
+$alt = $alt ?? $file->alt()->or($file->filename())->value();
+$class = isset($class) ? 'class="' . $class . '"' : '';
+$lazy = $lazy ?? true;
+$preset = $preset ?? 'default';
+
+// Sizes attribute - determines which image size the browser should load
+if (isset($size)) {
+    $sizes = is_numeric($size)
+        ? "(min-width: 1024px) {$size}vw, 100vw"
+        : $size;
+} else {
+    $sizes = "(min-width: 1024px) 50vw, 100vw";
+}
+
+// Generate srcsets for WebP and fallback
+$webpSrcset = $file->srcset('webp');
+$srcset = $file->srcset('default');
+
+// Get optimized source URL
+$src = $file->thumb($preset)->url();
+
+// Get dimensions to avoid layout shift
+$width = $file->width();
+$height = $file->height();
+$aspectRatio = $height > 0 ? ($height / $width) * 100 : 0;
+?>
+
+<picture <?= $class ?> data-id="<?= $file->uuid() ?>">
+    <source srcset="<?= $webpSrcset ?>" sizes="<?= $sizes ?>" type="image/webp">
+    <img
+        src="<?= $src ?>"
+        srcset="<?= $srcset ?>"
+        sizes="<?= $sizes ?>"
+        width="<?= $width ?>"
+        height="<?= $height ?>"
+        alt="<?= $alt ?>"
+        <?= $lazy ? 'loading="lazy"' : '' ?>
+        style="aspect-ratio: <?= $width ?> / <?= $height ?>;"
+    >
+</picture>

site/templates/home.php

@@ -10,7 +10,13 @@
             <article class="store__product">
                 <figure>
                     <?php if($image = $product->images()->first()): ?>
-                        <img src="<?= $image->url() ?>" alt="<?= $product->title()->html() ?>" />
+                        <?php snippet('picture', [
+                            'file' => $image,
+                            'alt' => $product->title()->html(),
+                            'preset' => 'product-card',
+                            'size' => 25,
+                            'lazy' => true
+                        ]) ?>
                     <?php endif ?>
                 </figure>
                 <p class="line-1"><a href="<?= $product->url() ?>"><?= $product->title()->html() ?></a></p>

site/templates/product.php

@@ -14,7 +14,7 @@
 
                 <div class="details">
                     <?php if($page->details()->isNotEmpty()): ?>
-                        <?= $page->details()->toBlocks() ?>
+                        <?= $page->details()->kt() ?>
                     <?php endif ?>
                 </div>
 
@@ -70,7 +70,13 @@
 
             <figure>
                 <?php if($image = $page->images()->first()): ?>
-                    <img src="<?= $image->url() ?>" alt="<?= $page->title()->html() ?>" />
+                    <?php snippet('picture', [
+                        'file' => $image,
+                        'alt' => $page->title()->html(),
+                        'preset' => 'product-detail',
+                        'size' => 50,
+                        'lazy' => false
+                    ]) ?>
                 <?php endif ?>
             </figure>
         </section>