event : slideshow Swiper avec srcset WebP pleine largeur

Chargement conditionnel de Swiper (CDN UMD) sur le template event.
Srcset dédié sans crop, 6 largeurs jusqu'à 3200w, toujours WebP.
Première slide en eager, suivantes en lazy.

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

assets/css/src/pages/_event.scss

@@ -0,0 +1,27 @@
+[data-template="event"] {
+  .slideshow {
+    position: relative;
+    width: 100%;
+    height: 80vh;
+    background-color: #000;
+
+    .swiper {
+      height: 100%;
+      .swiper-slide {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        picture {
+          height: 100%;
+          img {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+            border-radius: 0;
+          }
+        }
+      }
+    }
+  }
+}

assets/css/style.scss

@@ -7,3 +7,4 @@
 @import "src/strip";
 @import "src/pages/home";
 @import "src/pages/events";
+@import "src/pages/event";

assets/js/script.js

@@ -1,6 +1,7 @@
 import { initCharacterJump }   from "./characters/jump.js";
 import { initPupilTracking }   from "./characters/pupilTracking.js";
 import { initEventFilters }    from "./filters.js";
+import { initSlideshow }       from "./slideshow.js";
 
 document.addEventListener("DOMContentLoaded", () => {
   const header            = document.querySelector(".main-header");
@@ -92,4 +93,5 @@ document.addEventListener("DOMContentLoaded", () => {
   initCharacterJump();
   initPupilTracking(svg);
   initEventFilters();
+  initSlideshow();
 });

assets/js/slideshow.js

@@ -0,0 +1,9 @@
+export function initSlideshow() {
+  const slideshowElement = document.querySelector(".swiper");
+  if (!slideshowElement) return;
+
+  new Swiper(".swiper", {
+    loop: true,
+    keyboard: { enabled: true },
+  });
+}

site/config/config.php

@@ -8,6 +8,7 @@ return [
     'quality' => 80,
     'srcsets' => array_merge(
       require __DIR__ . '/thumbs/events-grid.php',
+      require __DIR__ . '/thumbs/event-slideshow.php',
     ),
   ],
 ];

site/config/thumbs/event-slideshow.php

@@ -0,0 +1,22 @@
+<?php
+
+// Slideshow pleine largeur : 100vw, ratio natif conservé (pas de crop)
+// Largeurs couvrent 1x et 2x (retina) jusqu'à 1600px d'écran
+return [
+  'event-slideshow' => [
+    '400w'  => ['width' => 400],
+    '800w'  => ['width' => 800],
+    '1200w' => ['width' => 1200],
+    '1600w' => ['width' => 1600],
+    '2400w' => ['width' => 2400],
+    '3200w' => ['width' => 3200],
+  ],
+  'event-slideshow-webp' => [
+    '400w'  => ['width' => 400,  'format' => 'webp'],
+    '800w'  => ['width' => 800,  'format' => 'webp'],
+    '1200w' => ['width' => 1200, 'format' => 'webp'],
+    '1600w' => ['width' => 1600, 'format' => 'webp'],
+    '2400w' => ['width' => 2400, 'format' => 'webp'],
+    '3200w' => ['width' => 3200, 'format' => 'webp'],
+  ],
+];

site/snippets/head.php

@@ -7,5 +7,14 @@
   <meta name="robots" content="none">
   
   <link rel="stylesheet" href="<?= url('assets/css/style.css') ?>">
+  
+  <?php if ($page->intendedTemplate() == 'event'): ?>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.css"
+    />
+
+    <script src="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.js"></script>
+  <?php endif ?>
   <script src="<?= url('assets/js/script.js') ?>" type="module"></script>
 </head>

site/templates/event.php

@@ -1,3 +1,26 @@
 <?php snippet('head') ?>
 <?php snippet('header') ?>
+
+<?php $galleryImages = $page->gallery()->toFiles() ?>
+
+<?php if ($galleryImages->count()): ?>
+  <div class="slideshow">
+    <div class="swiper">
+      <div class="swiper-wrapper">
+        <?php foreach($galleryImages as $index => $image): ?>
+          <div class="swiper-slide">
+            <?php snippet('picture', [
+              'file'       => $image,
+              'srcsetName' => 'event-slideshow',
+              'sizes'      => '100vw',
+              'alt'        => $image->alt()->or($page->title())->value(),
+              'lazy'       => $index > 0,
+            ]) ?>
+          </div>
+        <?php endforeach ?>
+      </div>
+    </div>
+  </div>
+<?php endif ?>
+
 <?php snippet('footer') ?>