77 lines
3.9 KiB
PHP
77 lines
3.9 KiB
PHP
<?php snippet('header') ?>
|
|
|
|
<?php snippet('mobile-menu') ?>
|
|
|
|
<ul class="projects-index">
|
|
<li class="filter-menu">
|
|
<ul>
|
|
<?php foreach ($categories as $key => $category): ?>
|
|
<li>
|
|
<button data-filter="<?= Str::slug($category) ?>"><?= $category ?></button>
|
|
</li>
|
|
<?php endforeach; ?>
|
|
</ul>
|
|
</li>
|
|
|
|
<?php foreach ($page->children()->listed()->sortBy('date', 'desc') as $project): ?>
|
|
<?php $slides = $project->slideshow()->toFiles(); ?>
|
|
<li class="project" data-category="<?= Str::slug($project->category()) ?>" data-slug="<?= $project->slug() ?>">
|
|
<div class="fix">
|
|
<button class="project-toggler grid">
|
|
<span> <?= $project->shownTitle() ?> </span>
|
|
<span> <?= $project->tags() ?> </span>
|
|
<span class="date"> <?= $project->date()->toDate('Y') ?> </span>
|
|
</button>
|
|
<span class="slide-number"><span class="current-image">1</span>/<?= $slides->count() ?></span>
|
|
</div>
|
|
<section class="toggle">
|
|
<div class= "project-slideshow-container">
|
|
<div class="project-slideshow">
|
|
<?php foreach ($slides->values() as $i => $slide): ?>
|
|
<?php if ($slide->type() === 'video'): ?>
|
|
<?php
|
|
// Type web fiable basé sur l'extension : le mime() de Kirby
|
|
// peut renvoyer video/quicktime pour un .mp4 (fichier .mov
|
|
// renommé), ce que Chrome/Firefox refusent de lire.
|
|
$videoTypes = [
|
|
'mp4' => 'video/mp4',
|
|
'm4v' => 'video/mp4',
|
|
'mov' => 'video/mp4',
|
|
'webm' => 'video/webm',
|
|
'ogv' => 'video/ogg',
|
|
];
|
|
$videoType = $videoTypes[strtolower($slide->extension())] ?? $slide->mime();
|
|
?>
|
|
<video class="slide<?= $i === 0 ? ' active' : '' ?>" autoplay muted loop playsinline data-id="<?= $slide->uuid() ?>">
|
|
<source src="<?= $slide->url() ?>" type="<?= $videoType ?>">
|
|
</video>
|
|
<?php else: ?>
|
|
<?php snippet('picture', [
|
|
'file' => $slide,
|
|
'srcsetName' => 'project-slideshow',
|
|
'sizes' => '(min-width: 1000px) 50vw, 100vw',
|
|
'lazy' => $i !== 0,
|
|
'class' => $i === 0 ? 'slide active' : 'slide',
|
|
]) ?>
|
|
<?php endif ?>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
<button class="next"></button>
|
|
</div>
|
|
<div class="project-description"><?= $project->description() ?></div>
|
|
<div class="project-description-mobile"><?= $project->descriptionMobile() ?></div>
|
|
<button class="next-project"><br>projet suivant</button>
|
|
<button class="close-button closer"></button>
|
|
</section>
|
|
</li>
|
|
<?php endforeach; ?>
|
|
<button class="all-projects-closer"></button>
|
|
</ul>
|
|
|
|
<script src="/assets/js/router.js"></script>
|
|
<script src="/assets/js/project-slideshow.js"></script>
|
|
<script src="/assets/js/project-toggle.js"></script>
|
|
<script src="/assets/js/filter-menu.js"></script>
|
|
<script src="/assets/js/mobile-menu-toggle.js"></script>
|
|
<?php snippet('footer') ?>
|
|
|