I have a “languages.php” snippets
<nav class="languages idle" aria-label="<?= t('languages', 'Langues') ?>">
<?php foreach($kirby->languages() as $lang): ?>
<a href="<?= $page->url($lang->code()) ?>" lang="<?= $lang->code() ?>" hreflang="<?= $lang->code() ?>" <?php e($kirby->language() == $lang, ' class="active"') ?>>
<?= html($lang->name()) ?>
</a>
<?php endforeach ?>
</nav>
and a “work.php” template
<?php snippet('header') ?>
<?php $works = $page->parent(); ?>
<main class="main page sc">
<header class="work-header random-fact-container">
<h1 class="work-title"><?= $page->title()->kti() ?></h1>
<h2 class="work-headline"><?= $page->headline()->kti() ?></h2>
<?php if (size($random_tags) > 0): ?>
<p class="random-fact">
<?php foreach($random_tags as $random_tag): ?>
<a href="<?= $works->url().'?q='.$random_tag ?>" hidden><?= t(Str::lower($random_tag), $random_tag); ?></a>
<?php endforeach ?>
</p>
<?php endif ?>
</header>
<div class="cover-container">
<?php if ($cover = $slides->first()): ?>
<figure>
<?php if ($cover->type() === 'image'): ?>
<img src="<?= $cover->crop(480, 320)->url(); ?>"
alt="<?= $cover->caption()->isNotEmpty() ? $cover->caption() : $cover->title(); ?>"
width="480" height="320"
loading="lazy">
<?php elseif ($cover->type() === 'video'): ?>
<video width="480" height="320" src="<?= $cover->url(); ?>" muted autoplay playsinline loop loading="lazy">
<?= t('video_support'); ?>
</video>
<?php endif ?>
<figcaption class="caption">
<div class="pages"><?= '1/'.$count; ?></div>
<div class="infos">
<span class="caption-title"><?= $page->title()->kti(); ?></span>
<span class="caption-client"><a href="<?= $works->url().'?q='.urlencode($page->client()) ?>"><?= $page->client(); ?></a></span>
<ul class="comma-separated caption-tags"><?php foreach ($cover->file_tags()->split() as $tag): ?><li>
<a href="<?= $works->url().'?q='.urlencode($tag) ?>"><?= t(Str::slug($tag), $tag) ?></a></li><?php endforeach ?>
</ul>
<?php if ($cover->caption()->isNotEmpty()): ?>
<span class="caption-desc"><?= $cover->caption()->kti(); ?></span>
<?php endif ?>
<?php if ($cover->credit()->isNotEmpty()): ?>
<span class="caption-credit"><?= $cover->credit()->kti(); ?></span>
<?php endif ?>
</div>
</figcaption>
</figure>
<?php endif ?>
</div>
<div class="swiper-container vertical">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="work-slides">
<?php $i = 1; ?>
<div class="swiper-container gallery">
<div class="swiper-wrapper">
<?php foreach($slides as $slide): ?>
<div class="swiper-slide" data-hash="<?= $i ?>">
<figure>
<?php if ($slide->type() === 'video'): ?>
<video width="480" height="320" src="<?= $slide->url(); ?>" muted autoplay playsinline loop loading="lazy">
<?= t('video_support'); ?>
</video>
<?php elseif ($slide->type() === 'image'): ?>
<?php $sizes = "(min-width: 1600px) 1600px, 100vw"; ?>
<picture>
<?php if ($slide->extension() !== "svg" || $slide->extension() !== "gif"): ?>
<source srcset="<?= $slide->srcset("webp") ?>" sizes="<?= $sizes ?>" type="image/webp">
<?php endif ?>
<img
<?php if ($slide->extension() !== "svg" || $slide->extension() !== "gif"): ?>
src="<?= $slide->crop(360, 240)->url() ?>"
srcset="<?= $slide->srcset() ?>"
sizes="<?= $sizes ?>"
<?php else: ?>
src="<?= $slide->url() ?>"
<?php endif ?>
loading="<?= e($i === 1, "eager", "lazy") ?>"
alt="<?= $slide->caption()->isNotEmpty() ? $slide->caption() : $slide->title(); ?>"
width="480" height="320"
>
</picture>
<?php endif ?>
<?php if (size($slides) > 1): ?>
<div class="thumbs">
<button onclick="toggleThumbs()"><?= t('view_thumbnails', 'Voir les vignettes') ?></button>
</div>
<?php endif ?>
<figcaption class="caption">
<div class="pages"><?= $i.'/'.$count; ?></div>
<div class="infos">
<span class="caption-title"><?= $page->title()->kti(); ?></span>
<span class="caption-client"><a href="<?= $works->url().'?q='.urlencode($page->client()) ?>"><?= $page->client(); ?></a></span>
<ul class="comma-separated caption-tags"><?php foreach ($slide->file_tags()->split() as $tag): ?><li>
<a href="<?= $works->url().'?q='.urlencode($tag) ?>"><?= t(Str::slug($tag), $tag) ?></a></li><?php endforeach ?>
</ul>
<?php if ($slide->caption()->isNotEmpty()): ?>
<span class="caption-desc"><?= $slide->caption()->kti(); ?></span>
<?php endif ?>
<?php if ($slide->credit()->isNotEmpty()): ?>
<span class="caption-credit"><?= $slide->credit()->kti(); ?></span>
<?php endif ?>
</div>
</figcaption>
</figure>
</div>
<?php $i++; ?>
<?php endforeach ?>
</div>
<?php if (size($slides) > 1): ?>
<div class="swiper-button-next">
<svg aria-label="Image suivante" width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
<rect x="0" y="18" width="100%" height="4" />
<rect x="18" y="0" width="4" height="100%" />
</svg>
</div>
<div class="swiper-button-prev">
<svg aria-label="Image précédante" width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
<rect x="0" y="18" width="100%" height="4" />
</svg>
</div>
<?php endif ?>
</div>
</div> <!-- /.work-slides -->
</div>
<div class="swiper-slide">
<article class="work-info">
<div class="overflow-y">
<header class="work-meta">
<button class="btn-close rotate" aria-label="Close" onclick="toggleWorkInfo()"><span>×</span></button>
<h2 class="work-title"><?= $page->title()->kti() ?></h2>
<p class="work-date uppercase"><?php if ($page->date_start()->isNotEmpty()): ?><a href="<?= $works->url().'?q='.urlencode($page->date_start()->toDate("Y")) ?>"><time datetime="<?= $page->date_start()->toDate("Y") ?>"><?= $page->date_start()->toDate("Y") ?></time></a> — <?php endif ?><a href="<?= $works->url().'?q='.urlencode($page->date()->toDate("Y")) ?>"><time datetime="<?= $page->date()->toDate("Y") ?>"><?= $page->date()->toDate("Y") ?></time></a></p>
<p class="work-client"><a href="<?= $works->url().'?q='.urlencode($page->client()) ?>"><?= $page->client() ?></a></p>
<ul class="work-fields comma-separated"><?php foreach ($page->work_field()->split() as $field): ?><li><a href="<?= $works->url().'?q='.urlencode($field) ?>"><?= t($field, $field) ?></a></li><?php endforeach ?>
</ul>
<ul class="work-tags comma-separated"><?php foreach ($page->category_print()->split() as $category_print): ?><li><a href="<?= $works->url().'?q='.urlencode(t($category_print, $category_print)) ?>"><?= t($category_print, $category_print) ?></a></li><?php endforeach ?><?php foreach ($page->category_identity()->split() as $category_identity): ?><li><a href="<?= $works->url().'?q='.urlencode(t($category_identity, $category_identity)) ?>"><?= t($category_identity, $category_identity) ?></a></li><?php endforeach ?><?php foreach ($page->category_digital()->split() as $category_digital): ?><li><a href="<?= $works->url().'?q='.urlencode(t($category_digital, $category_digital)) ?>"><?= t($category_digital, $category_digital) ?></a></li><?php endforeach ?><?php foreach ($page->category_signage()->split() as $category_signage): ?><li><a href="<?= $works->url().'?q='.urlencode(t($category_signage, $category_signage)) ?>"><?= t($category_signage, $category_signage) ?></a></li><?php endforeach ?><?php foreach ($page->category_image()->split() as $category_image): ?><li><a href="<?= $works->url().'?q='.urlencode(t($category_image, $category_image)) ?>"><?= t($category_image, $category_image) ?></a></li><?php endforeach ?>
</ul>
</header>
<div class="work-content">
<p class="work-headline"><?= $page->headline()->kti() ?></p>
<div class="text">
<?= $page->description()->kt() ?>
</div>
<?php if ($page->case_study_ready()->toBool() === true && ($page->case_study()->isNotEmpty() || $page->case_study_blocks()->isNotEmpty())): ?>
<div class="work-content-case-study">
<h3><?= t('case_study') ?></h3>
<div class="text">
<?php if ($page->case_study_blocks()->isNotEmpty()): ?>
<?= $page->case_study_blocks()->toBlocks() ?>
<?php else: ?>
<?= $page->case_study()->kt() ?>
<?php endif ?>
</div>
</div>
<?php endif ?>
<div id="infos" class="work-content-infos">
<h3>infos</h3>
<?php foreach ($infos as $key => $info): ?>
<?php if ($info[0] !== null && strlen($info[0]) > 0): ?>
<span class="grey">
<?php if($info[1]) {
echo t($info[3], $info[3]);
} else {
echo t($info[2], $info[2]);
} ?> :
</span> <?php if ($key == "printing" || $key == "binding") {
$i = 1;
foreach ($info[0]->split(', ') as $value) {
echo t($value, $value); e($i < size($info[0]->split(', ')), ', ');
$i++;
}
} else { echo $info[0]; };
e($key == "surface", ' m²'); e($key == "volume", ' m³') ?><br>
<?php endif ?>
<?php endforeach ?>
</div>
</div>
<aside class="work-aside text">
<div class="work-related">
<?php if ($page->related_works()->isNotEmpty()): ?>
<h3><?= t('related') ?>:</h3>
<ul>
<?php foreach ($page->related_works()->toPages() as $related_work): ?>
<?php if ($related_work->isListed()): ?>
<li><a href="<?= $related_work->url() ?>"><?= $related_work->title()->kti() ?></a></li>
<?php endif ?>
<?php endforeach ?>
</ul>
<?php endif ?>
</div>
<div class="work-prev-next">
<?php if ($collection->isNotEmpty()) : ?>
<?php if($prev = $page->getPrev($collection)): ?>
<?php if ($prev->isListed()): ?>
<a class="work-prev" href="<?= $prev->url() ?>"><?= $prev->title()->kti() ?></a>
<?php endif ?>
<?php endif ?>
<?php if($next = $page->getNext($collection)): ?>
<?php if ($next->isListed()): ?>
<a class="work-next" href="<?= $next->url() ?>"><?= $next->title()->kti() ?></a>
<?php endif ?>
<?php endif ?>
<?php endif ?>
</div>
</aside>
</div>
</article> <!-- /.work-info -->
</div>
</div>
</div>
<section class="work-thumbs">
<div class="swiper-container gallery-thumbs">
<div class="swiper-wrapper hide">
<div class="work-thumbs-container">
<?php $i = 1; ?>
<?php foreach($slides as $slide): ?>
<div class="swiper-slide<?php e($i == 1, ' swiper-slide-thumb-active') ?><?php e($slide->type() == 'video', ' video') ?>" onclick="toggleThumbs()">
<?php if ($slide->type() == 'video'): ?>
<?php
$name = $slide->name();
if ($page->images()->filterBy('name', '==', $name)->first()) {
$slide = $page->images()->filterBy('name', '==', $name)->first();
}
?>
<?php endif ?>
<picture>
<?php if ($slide->extension() !== "svg" || $slide->extension() !== "gif"): ?>
<source srcset="<?= $slide->thumb(["width" => 360, "height" => 240, "format" => "webp"])->url() ?>" type="image/webp">
<?php endif ?>
<img
data-index="<?= $i ?>"
src="<?= $slide->crop(360, 240)->url() ?>"
alt="<?= $slide->caption()->isNotEmpty() ? $slide->caption() : $slide->title(); ?>"
width="360" height="240"
loading="lazy"
>
</picture>
</div>
<div class="caption">
<div class="pages"><?= $i.'/'.$count; ?></div>
<div class="infos">
<span class="caption-title"><?= $page->title()->kti(); ?></span>
<span class="caption-client"><?= $page->client(); ?></span>
<span class="caption-tags">
<?php $j = 1; ?>
<?php foreach ($slide->file_tags()->split() as $tag): ?>
<a href="<?= $works->url().'?q='.urlencode($tag) ?>"><?= t(Str::slug($tag), $tag) ?></a><?= e($j < count($slide->file_tags()->split()), ", ") ?>
<?php $j++ ?>
<?php endforeach ?>
</span>
<?php if ($slide->caption()->isNotEmpty()): ?>
<span class="caption-desc"><?= $slide->caption()->kti(); ?></span>
<?php endif ?>
<?php if ($slide->credit()->isNotEmpty()): ?>
<span class="caption-credit"><?= $slide->credit()->kti(); ?></span>
<?php endif ?>
</div>
</div>
<?php $i++; ?>
<?php endforeach ?>
</div>
</div>
</div>
</section> <!-- /.work-thumbs -->
<footer id="work-info-preview" onclick="toggleWorkInfo()"><h2>Infos</h2></footer>
<footer class="work-aside text">
<div class="work-related">
<?php if ($page->related_works()->isNotEmpty()): ?>
<h3><?= t('related') ?>:</h3>
<ul>
<?php foreach ($page->related_works()->toPages() as $related_work): ?>
<li><a href="<?= $related_work->url() ?>"><?= $related_work->title()->kti() ?></a></li>
<?php endforeach ?>
</ul>
<?php endif ?>
</div>
<div class="work-prev-next">
<?php if ($collection->isNotEmpty()) : ?>
<?php if($prev = $page->getPrev($collection)): ?>
<h3><?= t('prev_project') ?> :</h3>
<a class="work-prev" href="<?= $prev->url() ?>"><?= $prev->title()->kti() ?></a>
<?php endif ?>
<?php if($next = $page->getNext($collection)): ?>
<h3><?= t('next_project') ?> :</h3>
<a class="work-next" href="<?= $next->url() ?>"><?= $next->title()->kti() ?></a>
<?php endif ?>
<?php endif ?>
</div>
</footer>
</main>
<?php snippet('footer') ?>