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

Home > slideshow > videos verticales incluses dans paires
All checks were successful
Deploy / Deploy to Production (push) Successful in 8s
Details

Browse source
This commit is contained in:
Camilledenoray 2026-07-07 20:19:57 +02:00
parent 4412a0a01a
commit 3486ae9c6c
10 changed files with 85 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

11
assets/css/src/_home.scss
View file

@ -24,7 +24,8 @@
height: 100%;
}
&.portrait-pair > picture {
&.portrait-pair > picture,
&.portrait-pair > video {
width: 50%;
height: 100%;
}
@ -37,19 +38,17 @@
object-fit: cover;
}
button{
button {
position: absolute;
width: 50%;
height: 100%;
&.prev{
&.prev {
left: 0;
cursor: w-resize;
}
&.next{
&.next {
right: 0;
cursor: e-resize;
}
}
}

2
assets/css/style.css
View file

@ -314,7 +314,7 @@ button#mobile-menu-toggle {
width: 100%;
height: 100%;
}
#home-slideshow .slide.portrait-pair > picture {
#home-slideshow .slide.portrait-pair > picture, #home-slideshow .slide.portrait-pair > video {
width: 50%;
height: 100%;
}

2
assets/css/style.css.map
View file

File diff suppressed because one or more lines are too long

19
assets/js/home-slideshow.js
View file

@ -26,15 +26,34 @@ if (slideshow) {
return index;
}
function updateVideos(index) {
const el = items[index];
const videos = el.querySelectorAll("video");
videos.forEach((video) => {
video.currentTime = 0;
video.play().catch(() => {});
});
}
function pauseAllVideos() {
items.forEach((el) => {
const videos = el.querySelectorAll("video");
videos.forEach((video) => video.pause());
});
}
function goTo(index) {
items[current].classList.remove("active");
pauseAllVideos();
current = index;
items[current].classList.add("active");
updateVideos(current);
}
const firstVisible = findNext(-1, 1);
items[firstVisible]?.classList.add("active");
current = firstVisible;
updateVideos(current);
prev?.addEventListener("click", () => goTo(findNext(current, -1)));
next?.addEventListener("click", () => goTo(findNext(current, 1)));

5
site/blueprints/files/slideshow-files.yml
View file

@ -7,3 +7,8 @@ fields:
label: Masquer sur mobile
type: toggle
width: 1/6
isPortrait:
label: Vidéo portrait
help: À activer pour les vidéos verticales
type: toggle
width: 1/6

9
site/controllers/home.php
View file

@ -11,8 +11,13 @@ return function($site) {
$file = $files->nth($i);
$nextFile = $files->nth($i + 1);
$isPortrait = $file->type() === 'image' && $file->orientation() === 'portrait';
$nextIsPortrait = $nextFile && $nextFile->type() === 'image' && $nextFile->orientation() === 'portrait';
dump($file->filename() . ' / type=' . $file->type());
dump($file->fileOrientation());
$isPortrait = in_array($file->type(), ['image', 'video'], true)
&& $file->fileOrientation() === 'portrait';
$nextIsPortrait = $nextFile
&& in_array($nextFile->type(), ['image', 'video'], true) && $nextFile->fileOrientation() === 'portrait';
if ($isPortrait && $nextIsPortrait) {
$units[] = ['pair' => true, 'a' => $file, 'b' => $nextFile];

20
site/plugins/file-methods/index.php Normal file
View file

@ -0,0 +1,20 @@
<?php
Kirby::plugin('studio-variable/file-methods', [
'fileMethods' => [
// Orientation utilisable aussi pour les vidéos.
// Kirby ne sait pas lire les dimensions d'une vidéo nativement,
// on se base donc sur le toggle « isPortrait » du panel pour celles-ci.
'fileOrientation' => function () {
if ($this->type() === 'video') {
return $this->isPortrait()->isTrue() ? 'portrait' : 'landscape';
}
if ($this->type() === 'image') {
return $this->orientation();
}
return false;
}
]
]);

4
site/snippets/picture.php
View file

@ -6,7 +6,7 @@
$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() ?>">
<picture<?= $classAttr ?><?= $spanAttr ?> data-id="<?= $file->uuid() ?>" orientation="<?= $file->fileOrientation() ?>" data-mime="<?= $file->mime() ?>">
<img
src="<?= $file->url() ?>"
width="<?= $file->width() ?>"
@ -43,7 +43,7 @@
$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() ?>">
<picture<?= $classAttr ?><?= $spanAttr ?> data-id="<?= $file->uuid() ?>" orientation="<?= $file->fileOrientation() ?>" data-mime="<?= $file->mime() ?>">
<source srcset="<?= $webpSrcset ?>" sizes="<?= $sizesAttr ?>" type="image/webp">
<img
src="<?= $src ?>"

7
site/snippets/slide-media.php Normal file
View file

@ -0,0 +1,7 @@
<?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' => $srcsetName, 'sizes' => $sizes, 'lazy' => false]) ?>
<?php endif ?>

45
site/templates/home.php
View file

@ -1,40 +1,27 @@
<?php snippet('header') ?>
<?php snippet('mobile-menu') ?>
<div id="home-slideshow">
<button class="prev"></button>
<button class="next"></button>
<?php foreach ($slides as $slide): ?>
<?php if ($slide['pair']): ?>
<div class="slide portrait-pair desktop-only">
<?php snippet('picture', ['file' => $slide['a'], 'srcsetName' => 'home-slideshow', 'sizes' => '50vw', 'lazy' => false]) ?>
<?php snippet('picture', ['file' => $slide['b'], 'srcsetName' => 'home-slideshow', 'sizes' => '50vw', 'lazy' => false]) ?>
</div>
<div class="slide mobile-only">
<?php snippet('picture', ['file' => $slide['a'], 'srcsetName' => 'home-slideshow', 'sizes' => '100vw', 'lazy' => false]) ?>
</div>
<div class="slide mobile-only">
<?php snippet('picture', ['file' => $slide['b'], 'srcsetName' => 'home-slideshow', 'sizes' => '100vw', 'lazy' => false]) ?>
</div>
<?php elseif ($slide['file']->type() === 'video'): ?>
<div class="slide">
<video autoplay muted loop playsinline data-id="<?= $slide['file']->uuid() ?>">
<source src="<?= $slide['file']->url() ?>" type="<?= $slide['file']->mime() ?>">
</video>
</div>
<?php else: ?>
<div class="slide<?= e($slide['isHiddenOnMobile'], ' desktop-only') ?>">
<?php snippet('picture', ['file' => $slide['file'], 'srcsetName' => 'home-slideshow', 'sizes' => '100vw', 'lazy' => false]) ?>
</div>
<?php endif ?>
<?php if ($slide['pair']): ?>
<div class="slide portrait-pair desktop-only">
<?php snippet('slide-media', ['file' => $slide['a'], 'srcsetName' => 'home-slideshow', 'sizes' => '50vw']) ?>
<?php snippet('slide-media', ['file' => $slide['b'], 'srcsetName' => 'home-slideshow', 'sizes' => '50vw']) ?>
</div>
<div class="slide mobile-only">
<?php snippet('slide-media', ['file' => $slide['a'], 'srcsetName' => 'home-slideshow', 'sizes' => '100vw']) ?>
</div>
<div class="slide mobile-only">
<?php snippet('slide-media', ['file' => $slide['b'], 'srcsetName' => 'home-slideshow', 'sizes' => '100vw']) ?>
</div>
<?php else: ?>
<div class="slide<?= e($slide['isHiddenOnMobile'], ' desktop-only') ?>">
<?php snippet('slide-media', ['file' => $slide['file'], 'srcsetName' => 'home-slideshow', 'sizes' => '100vw']) ?>
</div>
<?php endif ?>
<?php endforeach ?>
</div>
<script src="/assets/js/home-slideshow.js"></script>
<script src="/assets/js/mobile-menu-toggle.js"></script>
<?php snippet('footer') ?>