hic-et-nunc/site/templates/index.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">
                    <button class="closer"></button>
                    <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; ?>
                        <button class="prev"></button>
                        <button class="next"></button>
                    </div>
                </div>
                <div class="project-description"><?= $project->description() ?></div>
                <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') ?>