Add logo color transition

public/assets/js/app.js

@@ -11,12 +11,12 @@ const body = document.body;
 // SPLIDE SLIDER
 
 let splideSlider = document.querySelector('.splide');
+const logoIcon = document.querySelector('.logo__icon');
 
 // EXHIBITION IFRAME
 
 const sidebar = document.querySelector('.sidebar');
 const sidebarNavLinks = document.querySelectorAll('.sidebar__nav-link--internal');
-const logoIcon = document.querySelector('.logo__icon');
 const exhibitionIframe = document.querySelector('.exhibition');
 
 // ----------------------------------------------------------------------------
@@ -64,6 +64,30 @@ function goToNextSlideOnClick() {
 	}
 }
 
+function turnLogoIconToWhite() {
+	if (logoIcon) {
+		logoIcon.classList.add('logo__icon--white');
+	}
+}
+
+function turnLogoIconToBlack() {
+	if (logoIcon) {
+		logoIcon.classList.remove('logo__icon--white');
+	}
+}
+
+function editLogoColorOnSlideActive() {
+	if (splideSlider) {
+		splideSlider.on('active', function(e) {
+			if (e.slide.getAttribute('data-logo-color') === 'white') {
+				turnLogoIconToWhite();
+			} else if (e.slide.getAttribute('data-logo-color') === 'black') {
+				turnLogoIconToBlack();
+			}
+		});
+	}
+}
+
 function enableLogoIconRotation() {
 	if (logoIcon) {
 		logoIcon.classList.add('logo__icon--rotate-horizontal-bottom');
@@ -150,6 +174,7 @@ enableActivePseudoClass();
 
 setUpSlider();
 goToNextSlideOnClick();
+editLogoColorOnSlideActive();
 rotateLogoOnSliderMove();
 
 // EXHIBITION IFRAME

site/blueprints/files/full_screen_image.yml

@@ -0,0 +1,29 @@
+title: Image
+accept:
+	mime: image/jpeg, image/png
+fields:
+	alt_text:
+		label:
+			en: Alternative text
+			fr: Texte alternatif
+		type: text
+		help:
+			en: "Short description displayed if the image can't be loaded and used by screen readers."
+			fr: "Courte description affichée si l'image ne peut être chargée et utilisée par les lecteurs d'écran."
+	logo_color:
+		label:
+			en: Logo color
+			fr: Couleur du logo
+		type: select
+		options:
+			black:
+				en: Black
+				fr: Noir
+			white:
+				en: White
+				fr: Blanc
+		default: black
+		help:
+			en: "Favor a black logo for a light image, and a white logo for a dark image."
+			fr: "Privilégier un logo noir pour une image claire, et un logo blanc pour une image sombre."
+		width: 1/4

site/blueprints/files/image.yml

@@ -7,8 +7,14 @@ fields:
 			en: Alternative text
 			fr: Texte alternatif
 		type: text
+		help:
+			en: "Short description displayed if the image can't be loaded and used by screen readers."
+			fr: "Courte description affichée si l'image ne peut être chargée et utilisée par les lecteurs d'écran."
 	caption:
 		label:
 			en: Caption
 			fr: Légende
 		type: text
+		help:
+			en: "Informative text displayed below the image."
+			fr: "Texte informatif affiché sous l'image."

site/blueprints/files/image_or_video.yml

@@ -9,6 +9,9 @@ fields:
 			en: Alternative text
 			fr: Texte alternatif
 		type: text
+		help:
+			en: "Short description displayed if the image can't be loaded and used by screen readers."
+			fr: "Courte description affichée si l'image ne peut être chargée et utilisée par les lecteurs d'écran."
 	poster:
 		when:
 			file_type: video
@@ -32,3 +35,6 @@ fields:
 			en: Caption
 			fr: Légende
 		type: text
+		help:
+			en: "Informative text displayed below the image."
+			fr: "Texte informatif affiché sous l'image."

site/blueprints/sections/gallery_content_images.yml

@@ -2,7 +2,7 @@ headline:
 	en: Artworks
 	fr: Œuvres
 type: files
-template: image
+template: full_screen_image
 min: 2
 layout: cards
 size: small

site/blueprints/tabs/gallery_content.yml

@@ -3,4 +3,4 @@ label:
 	fr: Contenu
 icon: text
 sections:
-	artworks: sections/gallery_content_artworks
+	artworks: sections/gallery_content_images

site/controllers/gallery.php

@@ -6,7 +6,7 @@ return function ($pages, $page) {
 	$exhibitionsPage = $pages->template('exhibitions')->first();
 
 	// Get image files section content
-	$images = $page->files()->template("image")->sortBy('sort');
+	$images = $page->files()->template("full_screen_image")->sortBy('sort');
 
 	return [
 		'exhibitionsPage' => $exhibitionsPage,

site/templates/gallery.twig

@@ -7,8 +7,8 @@
 			<a class="logo__link" href="{{ exhibitionsPage.url }}" target="_self" aria-label="Go to {{ site.title }}'s exhibitions page">
 				<svg class="logo__icon" aria-hidden="true" viewBox="0 0 3814 1912" xmlns="http://www.w3.org/2000/svg">
 					<g transform="matrix(1, 0, 0, -1, 1426.537109, 1153.771606)">
-						<path style="fill:none;stroke:currentColor;stroke-width:93.54299927;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" d="m 0,0 c -290.833,17.312 -697.633,-243.443 -961.355,-441.732 -463.22,-348.289 -491.716,-401.405 -327.464,98.265 42.11,128.104 133.935,713.436 134.825,1065.798 1.49,589.899 147.634,423.095 319.826,16.386 C -107.247,-978.225 558.099,-596.729 789.55,-160.404 800.123,-140.473 836,-55 836,-55 c 0,0 25.705,-95.875 94.192,-196.312 C 1081.909,-473.805 1640,-308 1770,-260 c 53.364,19.704 261,-145 571,-221"/>
+						<path style="fill:none;stroke-width:93.54299927;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" d="m 0,0 c -290.833,17.312 -697.633,-243.443 -961.355,-441.732 -463.22,-348.289 -491.716,-401.405 -327.464,98.265 42.11,128.104 133.935,713.436 134.825,1065.798 1.49,589.899 147.634,423.095 319.826,16.386 C -107.247,-978.225 558.099,-596.729 789.55,-160.404 800.123,-140.473 836,-55 836,-55 c 0,0 25.705,-95.875 94.192,-196.312 C 1081.909,-473.805 1640,-308 1770,-260 c 53.364,19.704 261,-145 571,-221"/>
-						<path style="fill:none;stroke:currentColor;stroke-width:8.50399971;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" d="m 0,0 c -290.833,17.312 -697.633,-243.443 -961.355,-441.732 -463.22,-348.289 -491.716,-401.405 -327.464,98.265 42.11,128.104 133.935,713.436 134.825,1065.798 1.49,589.899 147.634,423.095 319.826,16.386 C -107.247,-978.225 558.099,-596.729 789.55,-160.404 800.123,-140.473 836,-55 836,-55 c 0,0 25.705,-95.875 94.192,-196.312 C 1081.909,-473.805 1640,-308 1770,-260 c 53.364,19.704 261,-145 571,-221"/>
+						<path style="fill:none;stroke-width:8.50399971;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" d="m 0,0 c -290.833,17.312 -697.633,-243.443 -961.355,-441.732 -463.22,-348.289 -491.716,-401.405 -327.464,98.265 42.11,128.104 133.935,713.436 134.825,1065.798 1.49,589.899 147.634,423.095 319.826,16.386 C -107.247,-978.225 558.099,-596.729 789.55,-160.404 800.123,-140.473 836,-55 836,-55 c 0,0 25.705,-95.875 94.192,-196.312 C 1081.909,-473.805 1640,-308 1770,-260 c 53.364,19.704 261,-145 571,-221"/>
 					</g>
 				</svg>
 			</a>
@@ -24,7 +24,7 @@
 		<div class="splide__track">
 			<ul class="splide__list">
 				{% for image in images %}
-					<li class="splide__slide">
+					<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 %}