home > slideshow : enable

assets/css/src/_home.scss

@@ -0,0 +1,41 @@
+#home-slideshow {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  picture, video {
+    display: none;
+    width: 100%;
+    height: 100%;
+
+    &.active {
+      display: block;
+    }
+  }
+
+  img, video {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .main-infos {
+    width: calc(3 / 4 * var(--index-width));
+    position: relative;
+    float: left;
+  }
+}
+
+.skills {
+  width: calc(2 / 4 * var(--index-width));
+  position: relative;
+  float: left;
+}
+
+.clients {
+  width: calc(2 / 4 * var(--index-width));
+  position: relative;
+  float: left;
+}

assets/css/src/_main.scss

@@ -305,47 +305,6 @@ button.next {
   display: block;
 }
 
-/* HOME SLIDESHOW */
-
-#home-slideshow {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-
-#home-slideshow img {
-  display: none;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-#home-slideshow img:first-child {
-  display: block;
-}
-
-/* HOME */
-
-.main-infos {
-  width: calc(3 / 4 * var(--index-width));
-  position: relative;
-  float: left;
-}
-
-.skills {
-  width: calc(2 / 4 * var(--index-width));
-  position: relative;
-  float: left;
-}
-
-.clients {
-  width: calc(2 / 4 * var(--index-width));
-  position: relative;
-  float: left;
-}
-
 /* INFOS */
 
 [data-template="infos"] div {

assets/css/style.scss

@@ -1,4 +1,5 @@
 @import "src/_reset.scss";
 @import "src/_main.scss";
 @import "src/_nav.scss";
+@import "src/_home.scss";
 @import "src/_mobile.scss";

assets/js/home-slideshow.js

@@ -0,0 +1,18 @@
+const slideshow = document.getElementById('home-slideshow');
+
+if (slideshow) {
+  const items = [...slideshow.querySelectorAll('picture, video')];
+  const prev  = slideshow.querySelector('.prev');
+  const next  = slideshow.querySelector('.next');
+  let current = 0;
+
+  function goTo(index) {
+    items[current].classList.remove('active');
+    current = (index + items.length) % items.length;
+    items[current].classList.add('active');
+  }
+
+  items[0]?.classList.add('active');
+  prev?.addEventListener('click', () => goTo(current - 1));
+  next?.addEventListener('click', () => goTo(current + 1));
+}

site/config/config.php

@@ -1,9 +1,15 @@
 <?php 
 
 return [
-    'debug'=> true,
+    'debug' => true,
     'panel' => [
         'menu' => require_once __DIR__ . '/menu.php',
         'home' => 'pages/home',
     ],
+    'thumbs' => [
+        'quality' => 80,
+        'srcsets' => array_merge(
+            require __DIR__ . '/thumbs/home-slideshow.php',
+        ),
+    ],
 ];

site/config/thumbs/home-slideshow.php

@@ -0,0 +1,20 @@
+<?php
+
+// Slideshow plein écran : toujours 100vw, pas de crop
+// Widths couvrent du mobile (1x) jusqu'à 4K (1x)
+return [
+  'home-slideshow' => [
+    '800w'  => ['width' => 800],
+    '1200w' => ['width' => 1200],
+    '1600w' => ['width' => 1600],
+    '2000w' => ['width' => 2000],
+    '2560w' => ['width' => 2560],
+  ],
+  'home-slideshow-webp' => [
+    '800w'  => ['width' => 800,  'format' => 'webp'],
+    '1200w' => ['width' => 1200, 'format' => 'webp'],
+    '1600w' => ['width' => 1600, 'format' => 'webp'],
+    '2000w' => ['width' => 2000, 'format' => 'webp'],
+    '2560w' => ['width' => 2560, 'format' => 'webp'],
+  ],
+];

site/snippets/picture.php

@@ -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 ?>

site/templates/home.php

@@ -1,12 +1,23 @@
 <?php snippet('header') ?>
 
 <div id="home-slideshow">
-    <?php foreach ($site->images() as $image): ?>
+    <?php foreach ($site->files()->sortBy('sort') as $file): ?>
-        <img src="<?= $image->url() ?>">
+        <?php if ($file->type() === 'video'): ?>
-    <?php endforeach; ?>
+        <video autoplay muted loop playsinline data-id="<?= $file->uuid() ?>">
+            <source src="<?= $file->url() ?>" type="<?= $file->mime() ?>">
+        </video>
+        <?php else: ?>
+        <?php snippet('picture', [
+            'file'       => $file,
+            'srcsetName' => 'home-slideshow',
+            'sizes'      => '100vw',
+            'lazy'       => false,
+        ]) ?>
+        <?php endif ?>
+    <?php endforeach ?>
     <button class="prev"></button>
     <button class="next"></button>
-<div>
+</div>
 
-
+<script src="/assets/js/home-slideshow.js"></script>
-<?php snippet('footer') ?>
+<?php snippet('footer') ?>