host/julienmonnerie
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge gallery and exhibitions pages into home page

Browse source
This commit is contained in:
Paul Nicoué 2022-09-27 16:32:06 +02:00
parent e1654494b3
commit b45fe42a45
13 changed files with 4945 additions and 224 deletions
Download patch file Download diff file Expand all files Collapse all files

169
assets/css/main.scss
View file

@ -50,13 +50,6 @@ em {
font-style: italic;
}
@media screen and (min-width: $desktop-media-query) {
.body--white-background {
background-color: var(--white);
}
}
// Link style
a {
@ -95,71 +88,11 @@ body {
// HEADER
// ----------------------------------------------------------------------------
// Logo
.logo {
width: 100%;
padding: var(--logo-padding);
display: flex;
justify-content: center;
&--fixed-center {
z-index: 2;
width: auto;
padding: 0;
position: fixed;
top: 1rem;
right: calc(50vw - (var(--logo-width) / 2));
display: block;
}
.logo__link {
width: var(--logo-width);
height: var(--logo-height);
display: flex;
justify-content: center;
align-items: center;
}
.logo__icon {
width: 100%;
height: 100%;
&--black {
stroke: var(--black);
transition: stroke 400ms ease-in-out;
}
&--white {
stroke: var(--white);
transition: stroke 400ms ease-in-out;
}
&--rotate-horizontal-bottom {
animation: rotate-horizontal-bottom 800ms ease-in-out infinite;
}
}
}
@media screen and (min-width: $desktop-media-query) {
.logo {
&--fixed-right {
z-index: 2;
width: auto;
padding: 0;
position: fixed;
top: 1rem;
right: 1.5rem;
display: block;
}
}
}
// Sidebar
.sidebar {
position: relative;
z-index: 2;
width: 100%;
padding: var(--sidebar-padding);
display: flex;
@ -167,7 +100,6 @@ body {
justify-content: space-between;
align-items: flex-start;
background-color: transparent;
transition: background-color 400ms ease-in-out;
.sidebar__nav {
max-width: 100%;
@ -186,8 +118,15 @@ body {
overflow-x: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: var(--black);
transition: color 400ms ease-in-out;
transition: color 200ms ease-in-out;
&--white {
color: var(--white);
&:focus-visible {
outline: 1px dashed var(--white);
}
}
}
.sidebar__social {
@ -208,14 +147,24 @@ body {
+ .sidebar__social-link {
margin: 0 0 0 1rem;
}
}
.sidebar__instagram-icon,
.sidebar__email-icon {
svg {
width: 100%;
height: 100%;
fill: var(--black);
transition: fill 400ms ease-in-out;
transition: fill 200ms ease-in-out;
}
&--white {
&:focus-visible {
outline: 1px dashed var(--white);
}
svg {
fill: var(--white);
}
}
}
}
@ -224,9 +173,9 @@ body {
.sidebar {
&--fixed {
z-index: 1;
overflow-y: auto;
position: fixed;
z-index: 3;
overflow-y: auto;
top: 0;
bottom: 0;
left: 0;
@ -240,30 +189,42 @@ body {
color: var(--transparent-black);
}
.sidebar__instagram-icon,
.sidebar__email-icon {
.sidebar__social-link {
svg {
fill: var(--transparent-black);
}
}
&:hover {
background-color: var(--transparent-feldgrau);
.sidebar__nav-link {
color: var(--black);
}
.sidebar__instagram-icon,
.sidebar__email-icon {
.sidebar__social-link {
svg {
fill: var(--black);
}
}
}
&--white-background {
.sidebar__nav-link {
&:hover {
background-color: var(--transparent-white);
&:focus-visible {
color: var(--black);
}
}
.sidebar__social-link {
&:focus-visible {
svg {
fill: var(--black);
}
}
}
}
@ -280,13 +241,30 @@ body {
// Slider section
.splide {
.slider-section {
position: fixed;
z-index: 1;
top: 0;
right: 0;
visibility: visible;
opacity: 1;
transition:
visibility 0ms 400ms,
opacity 400ms ease-in-out;
&__image {
&--hidden {
visibility: hidden;
opacity: 0;
transition:
visibility 0ms,
opacity 400ms ease-in-out;
}
}
.splide__image {
width: 100%;
height: 100%;
object-fit: cover;
}
}
// Exhibition section
@ -298,19 +276,28 @@ body {
@media screen and (min-width: $desktop-media-query) {
.exhibition-section {
position: relative;
z-index: 2;
display: block;
width: 100vw;
height: 100vh;
}
.exhibition {
visibility: hidden;
opacity: 0;
width: 100%;
height: 100%;
transition: opacity 400ms ease-in-out;
transition:
visibility 0ms,
opacity 400ms ease-in-out;
&--visible {
visibility: visible;
opacity: 1;
transition:
visibility 0ms 400ms,
opacity 400ms ease-in-out;
}
}
}

16
assets/css/partials/animations.scss
View file

@ -10,19 +10,3 @@
outline-offset: 2px;
}
}
@keyframes rotate-horizontal-bottom {
0% {
transform: rotateX(0);
transform-origin: bottom;
}
50% {
transform: rotateX(180deg);
transform-origin: bottom;
}
100% {
transform: rotateX(0);
transform-origin: bottom;
}
}

5
assets/css/partials/variables.scss
View file

@ -25,9 +25,6 @@
// Dimensions
--logo-width: 6rem;
--logo-height: 3rem;
--logo-padding: 1rem;
--icon-size: 2.25rem;
--sidebar-padding: 1rem;
@ -37,8 +34,6 @@
--transparent-black: rgba(0, 0, 0, 0.3);
--white: #fff;
--transparent-white: rgba(255, 255, 255, 0.9);
--feldgrau: #4B6259;
--transparent-feldgrau: rgba(75, 98, 89, 0.9);
}
// Media queries

181
assets/js/app.js
View file

@ -1,4 +1,5 @@
import Splide from '@splidejs/splide';
import create from 'swipe-events';
// ----------------------------------------------------------------------------
// DATA
@ -10,14 +11,16 @@ const body = document.body;
// SPLIDE SLIDER
const logo = document.querySelector('.logo__icon');
let slider = document.querySelector('.splide');
const slider = document.querySelector('.slider-section');
let splideSlider;
const slides = document.querySelectorAll('.splide__slide');
// EXHIBITION IFRAME
const sidebar = document.querySelector('.sidebar');
const sidebarNavLinks = document.querySelectorAll('.sidebar__nav-link--iframe');
const sidebarNavLinks = document.querySelectorAll('.sidebar__nav-link');
const sidebarEmbeddedNavLinks = document.querySelectorAll('.sidebar__nav-link--iframe');
const sidebarSocialLinks = document.querySelectorAll('.sidebar__social-link');
const exhibitionIframe = document.querySelector('.exhibition');
// NAV LINKS TARGET
@ -48,7 +51,7 @@ function convertRemToPixels(rem) {
function setUpSlider() {
if (slider) {
slider = new Splide('.splide', {
splideSlider = new Splide('.splide', {
type: 'fade',
rewind: true,
rewindByDrag: true,
@ -58,86 +61,87 @@ function setUpSlider() {
arrows: false,
pagination: false,
easing: 'ease-in-out',
drag: true,
wheel: true
drag: true
});
}
}
function mountSlider() {
if (slider) {
slider.mount();
if (splideSlider) {
splideSlider.mount();
}
}
function goToNextSlideOnClick() {
if (slider) {
slider.on('click', function(e) {
slider.go('>');
if (sidebar && splideSlider) {
sidebar.addEventListener('click', function(e) {
if (!e.target.matches('a') && !e.target.parentElement.matches('a')) {
splideSlider.go('>');
}
});
}
}
function turnLogoToBlack() {
if (logo) {
logo.classList.remove('logo__icon--white');
logo.classList.add('logo__icon--black');
function changeSlideOnSwipe() {
if (sidebar && splideSlider) {
sidebar.addEventListener('swiped', function(e) {
if (e.detail.dir === 'right') {
splideSlider.go('>');
} else if (e.detail.dir === 'left') {
splideSlider.go('<');
}
});
}
}
function turnLogoToWhite() {
if (logo) {
logo.classList.remove('logo__icon--black');
logo.classList.add('logo__icon--white');
function turnSidebarLinksToWhite() {
if (sidebarNavLinks) {
for (let i = 0; i < sidebarNavLinks.length; i++) {
sidebarNavLinks[i].classList.add('sidebar__nav-link--white');
}
}
if (sidebarSocialLinks) {
for (let i = 0; i < sidebarSocialLinks.length; i++) {
sidebarSocialLinks[i].classList.add('sidebar__social-link--white');
}
}
}
function editLogoColor(slide) {
function turnSidebarLinksToBlack() {
if (sidebarNavLinks) {
for (let i = 0; i < sidebarNavLinks.length; i++) {
sidebarNavLinks[i].classList.remove('sidebar__nav-link--white');
}
}
if (sidebarSocialLinks) {
for (let i = 0; i < sidebarSocialLinks.length; i++) {
sidebarSocialLinks[i].classList.remove('sidebar__social-link--white');
}
}
}
function editNavLinksColor(slide) {
if (slide) {
if (slide.getAttribute('data-logo-color') === 'white') {
turnLogoToWhite();
turnSidebarLinksToWhite();
} else if (slide.getAttribute('data-logo-color') === 'black') {
turnLogoToBlack();
turnSidebarLinksToBlack();
}
}
}
function editLogoColorOnSliderMounted() {
if (slider && slides) {
slider.on('mounted', function() {
editLogoColor(slides[0]);
function editNavLinksColorOnSliderMounted() {
if (splideSlider && slides) {
splideSlider.on('mounted', function() {
editNavLinksColor(slides[0]);
})
}
}
function editLogoColorOnSlideActive() {
if (slider) {
slider.on('active', function(e) {
editLogoColor(e.slide);
});
}
}
function enableLogoRotation() {
if (logo) {
logo.classList.add('logo__icon--rotate-horizontal-bottom');
}
}
function disableLogoRotation() {
if (logo) {
logo.classList.remove('logo__icon--rotate-horizontal-bottom');
}
}
function rotateLogoOnSliderMove() {
if (slider && logo) {
slider.on('move', function(e) {
logo.removeEventListener('animationiteration', disableLogoRotation);
enableLogoRotation();
});
slider.on('moved', function(e) {
logo.addEventListener('animationiteration', disableLogoRotation);
function editNavLinksColorOnSlideActive() {
if (splideSlider) {
splideSlider.on('active', function(e) {
editNavLinksColor(e.slide);
});
}
}
@ -150,43 +154,46 @@ function slimDownSidebar() {
}
}
function enableExhibitionIframeVisibility() {
function enlargeSidebar() {
if (sidebar) {
sidebar.classList.remove('sidebar--slimmed');
}
}
function hideSlider() {
if (slider) {
slider.classList.add('slider-section--hidden');
}
}
function showSlider() {
if (slider) {
slider.classList.remove('slider-section--hidden');
}
}
function enableExhibitionIframe() {
if (exhibitionIframe) {
exhibitionIframe.classList.add('exhibition--visible');
}
}
function disableExhibitionIframeVisibility() {
if (exhibitionIframe) {
function disableExhibitionIframe() {
if (exhibitionIframe && slider) {
exhibitionIframe.classList.remove('exhibition--visible');
}
}
function editBackgroundColor(sidebarNavLink) {
if (body && sidebar) {
if (sidebarNavLink.getAttribute('data-background') === 'feldgrau') {
body.classList.remove('body--white-background');
sidebar.classList.remove('sidebar--white-background');
} else if (sidebarNavLink.getAttribute('data-background') === 'white') {
body.classList.add('body--white-background');
sidebar.classList.add('sidebar--white-background');
}
}
}
function loadExhibitionIframe() {
if (sidebarNavLinks.length > 0 && exhibitionIframe) {
for (let i = 0; i < sidebarNavLinks.length; i++) {
sidebarNavLinks[i].addEventListener('click', function(e) {
if (sidebarEmbeddedNavLinks.length > 0 && exhibitionIframe) {
for (let i = 0; i < sidebarEmbeddedNavLinks.length; i++) {
sidebarEmbeddedNavLinks[i].addEventListener('click', function(e) {
if (window.innerWidth >= convertRemToPixels(mediaQueries.remDesktopWidth)) {
logo.removeEventListener('animationiteration', disableLogoRotation);
enableLogoRotation();
disableExhibitionIframeVisibility();
exhibitionIframe.addEventListener('load', function(e) {
logo.addEventListener('animationiteration', disableLogoRotation);
turnSidebarLinksToBlack();
slimDownSidebar();
enableExhibitionIframeVisibility();
editBackgroundColor(sidebarNavLinks[i]);
hideSlider();
enableExhibitionIframe();
});
}
});
@ -197,17 +204,17 @@ function loadExhibitionIframe() {
// NAV LINKS TARGET
function setNavLinksIframeTarget() {
if (sidebarNavLinks) {
for (let i = 0; i < sidebarNavLinks.length; i++) {
sidebarNavLinks[i].setAttribute('target', 'exhibition');
if (sidebarEmbeddedNavLinks) {
for (let i = 0; i < sidebarEmbeddedNavLinks.length; i++) {
sidebarEmbeddedNavLinks[i].setAttribute('target', 'exhibition');
}
}
}
function setNavLinksBlankTarget() {
if (sidebarNavLinks) {
for (let i = 0; i < sidebarNavLinks.length; i++) {
sidebarNavLinks[i].setAttribute('target', '_blank');
if (sidebarEmbeddedNavLinks) {
for (let i = 0; i < sidebarEmbeddedNavLinks.length; i++) {
sidebarEmbeddedNavLinks[i].setAttribute('target', '_blank');
}
}
}
@ -237,11 +244,11 @@ enableActivePseudoClass();
// SPLIDE SLIDER
setUpSlider();
editLogoColorOnSliderMounted();
editNavLinksColorOnSliderMounted();
mountSlider();
goToNextSlideOnClick();
editLogoColorOnSlideActive();
rotateLogoOnSliderMove();
changeSlideOnSwipe();
editNavLinksColorOnSlideActive();
// EXHIBITION IFRAME

13
package-lock.json generated
View file

@ -12,6 +12,7 @@
"postcss-loader": "^7.0.1",
"sass": "^1.53.0",
"sass-loader": "^13.0.2",
"swipe-events": "^1.0.0",
"ts-loader": "^9.3.1",
"typescript": "^4.7.4",
"webpack-notifier": "^1.15.0"
@ -7082,6 +7083,12 @@
"node": ">=10.13.0"
}
},
"node_modules/swipe-events": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/swipe-events/-/swipe-events-1.0.0.tgz",
"integrity": "sha512-Z3HYiIprAP5IkGtj3ollGVsH6QJCXq2UVEiybB6F+UzOvaLerJIaVmu9qLv8Eh7iQXKQKKGWGF7m0RW0CgGHEg==",
"dev": true
},
"node_modules/sync-rpc": {
"version": "1.3.6",
"resolved": "https://registry.npmjs.org/sync-rpc/-/sync-rpc-1.3.6.tgz",
@ -13087,6 +13094,12 @@
"stable": "^0.1.8"
}
},
"swipe-events": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/swipe-events/-/swipe-events-1.0.0.tgz",
"integrity": "sha512-Z3HYiIprAP5IkGtj3ollGVsH6QJCXq2UVEiybB6F+UzOvaLerJIaVmu9qLv8Eh7iQXKQKKGWGF7m0RW0CgGHEg==",
"dev": true
},
"sync-rpc": {
"version": "1.3.6",
"resolved": "https://registry.npmjs.org/sync-rpc/-/sync-rpc-1.3.6.tgz",

1
package.json
View file

@ -13,6 +13,7 @@
"postcss-loader": "^7.0.1",
"sass": "^1.53.0",
"sass-loader": "^13.0.2",
"swipe-events": "^1.0.0",
"ts-loader": "^9.3.1",
"typescript": "^4.7.4",
"webpack-notifier": "^1.15.0"

4155
public/build/app.js
View file

File diff suppressed because one or more lines are too long

6
public/build/app.js.LICENSE.txt
View file

@ -1,6 +0,0 @@
/*!
* Splide.js
* Version : 4.0.7
* License : MIT
* Copyright: 2022 Naotoshi Fujita
*/

492
public/build/main.css
View file

File diff suppressed because one or more lines are too long

14
public/build/panel.css
View file

@ -1 +1,13 @@
.k-textarea-field .k-toolbar .k-dropdown .k-button:nth-of-type(2),.k-textarea-field .k-toolbar .k-dropdown .k-button:nth-of-type(3),.kirby-imagecrop-field .k-column:nth-of-type(2){display:none}
/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[1].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[4].oneOf[1].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[1].use[4]!./assets/css/panel.scss ***!
\*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.k-textarea-field .k-toolbar .k-dropdown .k-button:nth-of-type(2),
.k-textarea-field .k-toolbar .k-dropdown .k-button:nth-of-type(3) {
display: none;
}
.kirby-imagecrop-field .k-column:nth-of-type(2) {
display: none;
}
/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFuZWwuY3NzIiwibWFwcGluZ3MiOiI7OztBQVlZOztFQUVJO0FDWGhCOztBRHFCSTtFQUNJO0FDbEJSLEMiLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9hc3NldHMvY3NzL3BhbmVsLnNjc3MiLCJ3ZWJwYWNrOi8vLy4uLy4uLy4uLy4uL0Rvbm4lQzMlQTllcy9Qcm9ncmFtbWF0aW9uL1Byb2pldHMvanVsaWVubW9ubmVyaWUvYXNzZXRzL2Nzcy9wYW5lbC5zY3NzIl0sInNvdXJjZXNDb250ZW50IjpbIi8vIC0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS1cbi8vIEtJUkJZIFBBTkVMIENVU1RPTUlaQVRJT05cbi8vIC0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS1cblxuLy8gVGV4dGFyZWEgaGVhZGxpbmUgYnV0dG9uc1xuXG4uay10ZXh0YXJlYS1maWVsZCB7XG5cbiAgICAuay10b29sYmFyIHtcblxuICAgICAgICAuay1kcm9wZG93biB7XG5cbiAgICAgICAgICAgIC5rLWJ1dHRvbjpudGgtb2YtdHlwZSgyKSxcbiAgICAgICAgICAgIC5rLWJ1dHRvbjpudGgtb2YtdHlwZSgzKSB7XG4gICAgICAgICAgICAgICAgZGlzcGxheTogbm9uZTtcbiAgICAgICAgICAgIH1cbiAgICAgICAgfVxuICAgIH1cbn1cblxuLy8gVmlzdWFsIGltYWdlIGNyb3AgZmllbGQgcHJvcGVydGllc1xuXG4ua2lyYnktaW1hZ2Vjcm9wLWZpZWxkIHtcblxuICAgIC5rLWNvbHVtbjpudGgtb2YtdHlwZSgyKSB7XG4gICAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgfVxufVxuIiwiLmstdGV4dGFyZWEtZmllbGQgLmstdG9vbGJhciAuay1kcm9wZG93biAuay1idXR0b246bnRoLW9mLXR5cGUoMiksXG4uay10ZXh0YXJlYS1maWVsZCAuay10b29sYmFyIC5rLWRyb3Bkb3duIC5rLWJ1dHRvbjpudGgtb2YtdHlwZSgzKSB7XG4gIGRpc3BsYXk6IG5vbmU7XG59XG5cbi5raXJieS1pbWFnZWNyb3AtZmllbGQgLmstY29sdW1uOm50aC1vZi10eXBlKDIpIHtcbiAgZGlzcGxheTogbm9uZTtcbn0iXSwibmFtZXMiOltdLCJzb3VyY2VSb290IjoiIn0=*/

1
site/config/config.php
View file

@ -2,7 +2,6 @@
return [
// Kirby configuration settings
'home' => 'gallery',
'panel' => [
'language' => 'fr',
'css' => 'build/panel.css'

27
site/controllers/home.php Normal file
View file

@ -0,0 +1,27 @@
<?php
return function ($page) {
// Get exhibitions field content (stored as yaml) and parse it to return an array
$exhibitions = $page->exhibitions()->yaml();
// Add url based title to each exhibition
foreach ($exhibitions as &$exhibition) {
$exhibition['title'] = str_replace(['http://', 'https://', 'www.'], '', $exhibition['url']);
}
// Get contact fields content
$email = $page->email();
$instagram = $page->instagram();
// Get image files section content
// $images = $page->files()->template("full_screen_image")->sortBy('sort');
$images = $page->files()->template("full_screen_image")->shuffle();
return [
'exhibitions' => $exhibitions,
'email' => $email,
'instagram' => $instagram,
'images' => $images
];
};

61
site/templates/home.twig Normal file
View file

@ -0,0 +1,61 @@
{% extends "base.twig" %}
{% block header %}
<header>
<div class="sidebar sidebar--fixed">
<nav class="sidebar__nav" aria-label="Menu">
{% if exhibitions is not empty %}
<ul class="sidebar__nav-menu">
{% for exhibition in exhibitions %}
<li class="sidebar__nav-item">
{% if exhibition.external_link == 'false' %}
<a class="sidebar__nav-link sidebar__nav-link--iframe" href="{{ exhibition.url }}" target="exhibition" data-background="{{ exhibition.background_color }}">{{ exhibition.title }}</a>
{% else %}
<a class="sidebar__nav-link sidebar__nav-link--blank" href="{{ exhibition.url }}" target="_blank">{{ exhibition.title }}</a>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</nav>
<div class="sidebar__social">
<a class="sidebar__social-link" href="{{ instagram }}" target="_blank" aria-label="Go to {{ site.title }}'s Instagram profile">
<svg aria-hidden="true" viewBox="0 0 128 128" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M 128 0 L 0 0 L 0 128 L 128 128 L 128 0 Z M 119.874 119.874 L 8.126 119.874 L 8.126 8.126 L 119.874 8.126 L 119.874 119.874 Z"/>
<path d="M64,93c16,0,29-13,29-29S80,35,64,35S35,48,35,64S48,93,64,93z M64,43c11.6,0,21,9.4,21,21s-9.4,21-21,21s-21-9.4-21-21 S52.4,43,64,43z"/>
<rect height="10" width="10" x="98" y="20"/>
</svg>
</a>
<a class="sidebar__social-link" href="mailto:{{ email }}" target="_blank" aria-label="Write an email to {{ site.title }}">
<svg aria-hidden="true" viewBox="0 0 48 48" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M 0 48 L 0 0 L 48 0 L 48 48 L 0 48 Z M 24 24.35 L 3.1 7.126 L 3.1 44.5 L 44.9 44.5 L 44.9 7.126 L 24 24.35 Z M 24 20.35 L 44.9 3.5 L 3.1 3.5 L 24 20.35 Z M 3.1 7.126 L 3.1 3.5 L 3.1 7.126 Z"/>
</svg>
</a>
</div>
</div>
</header>
{% endblock %}
{% block main %}
<main>
<section class="exhibition-section">
<iframe class="exhibition" name="exhibition" src=""></iframe>
</section>
<section class="slider-section splide" aria-label="{{ site.title }}'s artwork gallery">
<div class="splide__track">
<ul class="splide__list">
{% for image in images %}
<li class="splide__slide" data-logo-color="{{ image.logo_color }}">
<img class="splide__image" src="{{ image.url }}" srcset="{{ image.srcset() }}" alt="{{ image.alt_text }}">
</li>
{% endfor %}
</ul>
</div>
</section>
</main>
{% endblock %}