studio-variable/hic-et-nunc
5
0
Fork 0
Code Issues 3 Pull requests Projects Releases Packages Wiki Activity Actions

home > slideshow : enable
All checks were successful
Deploy / Deploy to Production (push) Successful in 3s
Details

Browse source
This commit is contained in:
isUnknown 2026-05-26 10:56:17 +02:00
parent dc0c48acc3
commit 13040a9df3
8 changed files with 163 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

41
assets/css/src/_home.scss Normal file
View file

@ -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;
}

41
assets/css/src/_main.scss
View file

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

1
assets/css/style.scss
View file

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

18
assets/js/home-slideshow.js Normal file
View file

@ -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));
}

8
site/config/config.php
View file

@ -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',
),
],
];

20
site/config/thumbs/home-slideshow.php Normal file
View file

@ -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'],
],
];

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

21
site/templates/home.php
View file

@ -1,12 +1,23 @@
<?php snippet('header') ?>
<div id="home-slideshow">
<?php foreach ($site->images() as $image): ?>
<img src="<?= $image->url() ?>">
<?php endforeach; ?>
<?php foreach ($site->files()->sortBy('sort') as $file): ?>
<?php if ($file->type() === 'video'): ?>
<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') ?>