feat: add basic gallery functionality

assets/js/imageGallery.js

@@ -0,0 +1,42 @@
+const gallery = document.querySelector(".m-image-gallery");
+const galleryPictures = gallery.querySelector(".m-image-gallery__pictures");
+
+const nextButton = gallery.querySelector("#next");
+const prevButton = gallery.querySelector("#prev");
+
+// There is an problem with the scroll-snap on mobile devices, so we need to add the gap between the items when scrolling to make it work properly.
+const galleryGap = 15;
+
+const getItemWidth = () =>
+  galleryPictures.children[0]?.getBoundingClientRect().width ??
+  galleryPictures.clientWidth;
+
+const updateButtonState = () => {
+  console.log("updateButtonState");
+  const maxScrollLeft =
+    galleryPictures.scrollWidth - galleryPictures.clientWidth;
+
+  prevButton.disabled = galleryPictures.scrollLeft === 0;
+  nextButton.disabled = galleryPictures.scrollLeft >= maxScrollLeft;
+};
+
+nextButton.addEventListener("click", () => {
+  galleryPictures.scrollTo({
+    left: galleryPictures.scrollLeft + getItemWidth() + galleryGap,
+    behavior: "smooth",
+  });
+});
+
+prevButton.addEventListener("click", () => {
+  galleryPictures.scrollTo({
+    left: galleryPictures.scrollLeft - getItemWidth() - galleryGap,
+    behavior: "smooth",
+  });
+});
+
+galleryPictures.addEventListener("scroll", updateButtonState, {
+  passive: true,
+});
+window.addEventListener("resize", updateButtonState);
+
+updateButtonState();

assets/js/main.js

@@ -11,3 +11,4 @@ import "./expander.js";
 import "./dialog.js";
 import "./fipValidityComparison.js";
 import "./search.js";
+import "./imageGallery.js";

assets/sass/imageGallery.scss

@@ -0,0 +1,47 @@
+.m-image-gallery {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.m-image-gallery__pictures {
+  display: flex;
+  margin: 0;
+  padding: 0;
+  gap: 1.5rem;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  scroll-behavior: smooth;
+  list-style: none;
+  border-radius: var(--border-radius-l);
+
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    scroll-behavior: auto;
+  }
+
+  @include focus-indicator(0.2rem);
+}
+
+.m-image-gallery__item {
+  flex: 0 0 100%;
+  scroll-snap-align: center;
+  list-style: none;
+}
+
+.m-image-gallery__controls {
+  display: flex;
+  gap: 1rem;
+  align-self: center;
+  margin-bottom: 1rem;
+
+  .a-button:disabled {
+    opacity: 0.35;
+  }
+}

assets/sass/main.scss

@@ -22,6 +22,7 @@
 @import "trainCategory.scss";
 @import "tag.scss";
 @import "floatImage.scss";
+@import "imageGallery.scss";
 @import "teamMember.scss";
 @import "dialog.scss";
 @import "fip-validity.scss";

assets/sass/styles.scss

@@ -330,7 +330,7 @@ figure {
     display: flex;
     flex-direction: column;
     gap: 1.5rem;
-    overflow-x: auto;
+    overflow-x: visible;
 
     p {
       text-align: justify;

i18n/de.yaml

@@ -152,6 +152,10 @@ fipValidity:
 footer-love:
   aria-label: Made with love in Europe
   text: Made with ♥️ in Europe
+gallery:
+  aria-label: Bildgalerie
+  next: Nächstes Bild
+  previous: Vorheriges Bild
 highlight:
   confusion: Verwechslungsgefahr
   important: Wichtige Information

i18n/en.yaml

@@ -148,6 +148,10 @@ fipValidity:
 footer-love:
   aria-label: Made with love in Europe
   text: Made with ♥️ in Europe
+gallery:
+  aria-label: Image gallery
+  next: Next Image
+  previous: Previous Image
 highlight:
   confusion: Risk of Confusion
   important: Important Information

i18n/fr.yaml

@@ -156,6 +156,10 @@ fipValidity:
 footer-love:
   aria-label: Fait avec amour en Europe
   text: Fait avec ♥️ en Europe
+gallery:
+  aria-label: Galerie d'images
+  next: Image suivante
+  previous: Image précédente
 general: Général
 highlight:
   confusion: Risque de confusion

layouts/_partials/button.html

@@ -3,13 +3,15 @@
     href="{{ .Destination }}"
     target="_blank"
     rel="noopener noreferrer"
+    {{- with .ID }}id="{{ . }}"{{- end -}}
     class="a-button a-button__external o-link__external"
   >
     {{- .Text -}}{{- partial "icon" "arrow_outward" -}}
   </a>
 {{- else -}}
   <button
     class="a-button a-button__internal"
+    {{- with .ID }}id="{{ . }}"{{- end -}}
     {{- with .Title }}title="{{ . }}"{{- end -}}
   >
     {{- .Text -}}

layouts/_partials/helper/contentImage.html

@@ -1,6 +1,15 @@
-{{ $contentImage := .Page.Resources.GetMatch "image.webp" }}
-{{ if not $contentImage }}
-  {{ $contentImage = resources.Get "images/default.webp" }}
+{{ $allImages := .Page.Resources.ByType "image" }}
+{{ $contentImages := slice }}
+{{ range $allImages }}
+  {{ $name := lower .Name }}
+  {{ if and (in $name "image") (eq (lower .MediaType.SubType) "webp") }}
+    {{ $contentImages = $contentImages | append . }}
+  {{ end }}
 {{ end }}
+{{ if not $contentImages }}
+  {{ $contentImages = slice (resources.Get "images/default.webp") }}
+{{ end }}
+
+{{ $firstImage := index $contentImages 0 }}
 
-{{ return dict "image" $contentImage }}
+{{ return dict "image" $firstImage "firstImage" $firstImage "images" $contentImages }}

layouts/_partials/imageGallery.html

@@ -0,0 +1,16 @@
+<div class="m-image-gallery">
+  <ul
+    class="m-image-gallery__pictures"
+    aria-label="{{ i18n "gallery.aria-label" }}"
+  >
+    {{- range .images -}}
+      <li class="m-image-gallery__item">
+        {{ partial "image" (dict "image" .) }}
+      </li>
+    {{- end -}}
+  </ul>
+  <div class="m-image-gallery__controls">
+    {{- partial "button" (dict "Text" (partial "icon" "keyboard_arrow_left") "Title" (i18n "gallery.previous") "ID" "prev") -}}
+    {{- partial "button" (dict "Text" (partial "icon" "keyboard_arrow_right") "Title" (i18n "gallery.next") "ID" "next") -}}
+  </div>
+</div>

layouts/_partials/structuredData.html

@@ -12,7 +12,7 @@
   {{ $mainEntity = "FAQPage" }}
 {{ end }}
 
-{{ $image := (partial "helper/contentImage" .).Permalink }}
+{{ $image := (partial "helper/contentImage" .).firstImage.Permalink }}
 
 <script type="application/ld+json">{
   "@context": "https://schema.org",

layouts/country/single.html

@@ -1,5 +1,6 @@
 {{ define "main" }}
   {{ $related := .Site.RegularPages.RelatedIndices . "country" }}
+  {{ $contentImage := partial "helper/contentImage" . }}
 
 
   <article class="o-single o-single--with-sidemenu">
@@ -41,7 +42,11 @@ <h3 id="operators-without-fip-title">
           </ul>
         {{ end }}
       </div>
-      {{ partial "image" (partial "helper/contentImage" . ) }}
+      {{ if gt (len $contentImage.images) 1 }}
+        {{ partial "imageGallery" (dict "images" $contentImage.images) }}
+      {{ else }}
+        {{ partial "image" $contentImage }}
+      {{ end }}
     </div>
   </article>
 {{ end }}

layouts/operator/single.html

@@ -1,4 +1,5 @@
 {{ define "main" }}
+  {{ $contentImage := partial "helper/contentImage" . }}
   <article class="o-single o-single--with-sidemenu">
     {{ partial "contentNavigation" . }}
     <div class="o-single__content-wrapper">
@@ -18,7 +19,11 @@ <h1 data-pagefind-meta="title">{{ .Title }}</h1>
           {{ partial "content" . }}
         </div>
       </div>
-      {{ partial "image" (partial "helper/contentImage" .) }}
+      {{ if gt (len $contentImage.images) 1 }}
+        {{ partial "imageGallery" (dict "images" $contentImage.images) }}
+      {{ else }}
+        {{ partial "image" $contentImage }}
+      {{ end }}
     </div>
   </article>
 {{ end }}

layouts/rss.xml

@@ -13,7 +13,9 @@
             {{ $cleanedHTML := .Summary | plainify | transform.XMLEscape | safeHTML }}
             <description>{{ $cleanedHTML }}</description>
             <pubDate>{{ .PublishDate.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</pubDate>
-            <enclosure url="{{ (partial "helper/contentImage" . ).Permalink }}" />
+            {{- with (partial "helper/contentImage" .).firstImage -}}
+            <enclosure url="{{- .Permalink -}}" />
+            {{- end -}}
         </item>
         {{ end }}
     </channel>