feat: Add captions to images

assets/sass/contentNavigation.scss

@@ -112,7 +112,7 @@
   }
 }
 
-.o-related__item img {
+.o-related__item figure {
   border-radius: var(--border-radius-s);
 }
 
@@ -211,7 +211,7 @@
   }
 
   main.o-newspage .o-aside {
-    img {
+    figure {
       display: none;
     }
   }

assets/sass/expander.scss

@@ -74,6 +74,10 @@ details[open] > .o-expander__summary {
   & > *:last-child > *:last-child > *:last-child {
     margin-bottom: 0;
   }
+
+  figure > figcaption {
+    background-color: var(--bg-default);
+  }
 }
 
 details {

assets/sass/floatImage.scss

@@ -2,12 +2,12 @@
   display: flow-root;
   margin-bottom: 1rem;
 
-  &--right > img {
+  &--right > figure {
     float: right;
     margin-left: 2rem;
   }
 
-  &--left > img {
+  &--left > figure {
     float: left;
     margin-right: 2rem;
   }

assets/sass/styles.scss

@@ -145,10 +145,27 @@ main {
   }
 }
 
-img {
-  width: 100%;
-  height: auto;
+figure {
   border-radius: var(--border-radius-l);
+  margin: 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  > img {
+    width: 100%;
+    height: auto;
+  }
+
+  > hr {
+    margin: 0;
+  }
+
+  > figcaption {
+    background-color: var(--bg-neutral);
+    font-size: 0.9em;
+    padding: 0.8rem;
+  }
 
   @media print {
     display: none;

assets/sass/teaser.scss

@@ -46,7 +46,7 @@
       flex-direction: column;
     }
 
-    .m-teaser__image img {
+    .m-teaser__image figure {
       border-radius: var(--border-radius-l) 0 0 var(--border-radius-l);
 
       @media (max-width: #{$breakpoint-md}) {
@@ -83,7 +83,7 @@
   }
 }
 
-.m-teaser__image img {
+.m-teaser__image figure {
   border-radius: var(--border-radius-l) var(--border-radius-l) 0 0;
   object-fit: cover;
   height: 100%;

content/operator/euskotren/index.de.md

@@ -23,6 +23,7 @@ Spezielles "Euskotren FIP Ticket" (für Inhaber & Angehörige): ✅
 {{% float-image
   src="euskotren_fip_ticket.webp"
   alt="Euskotren FIP Ticket"
+  caption="Euskotren FIP Ticket"
   width="30%"
   position="left"
 %}}

content/operator/euskotren/index.en.md

@@ -23,6 +23,7 @@ Special "Euskotren FIP Ticket" (for holders & relatives): ✅
 {{% float-image
   src="euskotren_fip_ticket.webp"
   alt="Euskotren FIP Ticket"
+  caption="Euskotren FIP Ticket"
   width="30%"
   position="left"
 %}}

content/operator/euskotren/index.fr.md

@@ -23,6 +23,7 @@ Billets FIP 50 : ⛔ \
 {{% float-image
   src="euskotren_fip_ticket.webp"
   alt="Euskotren FIP Ticket"
+  caption="Euskotren FIP Ticket"
   width="30%"
   position="left"
 %}}

layouts/_default/_markup/render-image.html

@@ -31,7 +31,7 @@
         loading="lazy"
       />
     {{- else -}}
-      {{- partial "image" (dict "image" $image) -}}
+      {{- partial "image" (dict "image" $image "caption" .PlainText) -}}
     {{- end -}}
   {{- else -}}
     {{- warnf "Image resource '%s' could not be found. Used in '%s'" .Destination $.Page.File.Path -}}

layouts/partials/image.html

@@ -34,24 +34,34 @@
 {{- end -}}
 {{- $srcset = $srcset | append (printf "%s %dw" $image.RelPermalink $image.Width) -}}
 
-{{- $styles := slice -}}
+{{- $imgStyles := slice -}}
 {{- if and $image.Width $image.Height -}}
-  {{- $styles = $styles | append (printf "aspect-ratio: %d / %d" $image.Width $image.Height) -}}
+  {{- $imgStyles = $imgStyles | append (printf "aspect-ratio: %d / %d" $image.Width $image.Height) -}}
 {{- end -}}
+
+{{- $figStyles := slice -}}
 {{- if $width -}}
-  {{- $styles = $styles | append (printf "width: %s" $width) -}}
-{{- end -}}
-
-
-<img
-  src="{{ $image.RelPermalink }}"
-  alt="{{ .alt }}"
-  {{- if not .alt }}
-    data-decorative="true"
-  {{- end }}
-  loading="{{ $loading }}"
-  {{- with .fetchpriority -}}fetchpriority="{{ . }}"{{- end -}}
-  srcset="{{ delimit $srcset ", " }}"
-  sizes="(max-width: 576px) calc(100vw - 3.2rem), (max-width: 768px) 540px, (max-width: 992px) 720px, (max-width: 1200px) 960px, (max-width: 1400px) 1140px, 1320px"
-  style="{{ delimit $styles "; " | safeCSS }}"
-/>
+  {{- $figStyles = $figStyles | append (printf "width: %s" $width) -}}
+{{- end -}}
+
+
+<figure style="{{ delimit $figStyles "; " | safeCSS }}">
+  <img
+    src="{{ $image.RelPermalink }}"
+    alt="{{ .alt }}"
+    {{- if not .alt }}
+      data-decorative="true"
+    {{- end }}
+    loading="{{ $loading }}"
+    {{- with .fetchpriority -}}fetchpriority="{{ . }}"{{- end -}}
+    srcset="{{ delimit $srcset ", " }}"
+    sizes="(max-width: 576px) calc(100vw - 3.2rem), (max-width: 768px) 540px, (max-width: 992px) 720px, (max-width: 1200px) 960px, (max-width: 1400px) 1140px, 1320px"
+    style="{{ delimit $imgStyles "; " | safeCSS }}"
+  />
+  {{- if .caption -}}
+    <hr aria-hidden="true" />
+    <figcaption>
+      {{ .caption }}
+    </figcaption>
+  {{- end -}}
+</figure>

layouts/shortcodes/float-image.html

@@ -1,5 +1,6 @@
 {{- $image := $.Page.Resources.GetMatch (.Get "src") -}}
 {{- $alt := .Get "alt" -}}
+{{- $caption := .Get "caption" -}}
 {{- $width := .Get "width" | default "50%" -}}
 {{- $position := .Get "position" | default "right" -}}
 
@@ -9,6 +10,7 @@
     (dict
     "image" $image
     "alt" $alt
+    "caption" $caption
     "width" $width
     )
   -}}