diff --git a/assets/sass/contentNavigation.scss b/assets/sass/contentNavigation.scss
index c3e2a347..c2548184 100644
--- a/assets/sass/contentNavigation.scss
+++ b/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;
}
}
diff --git a/assets/sass/expander.scss b/assets/sass/expander.scss
index 2eb92583..f75fc4c9 100644
--- a/assets/sass/expander.scss
+++ b/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 {
diff --git a/assets/sass/floatImage.scss b/assets/sass/floatImage.scss
index 62823628..74df275a 100644
--- a/assets/sass/floatImage.scss
+++ b/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;
}
diff --git a/assets/sass/styles.scss b/assets/sass/styles.scss
index b3c17bbc..a61cf7fa 100644
--- a/assets/sass/styles.scss
+++ b/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;
diff --git a/assets/sass/teaser.scss b/assets/sass/teaser.scss
index f97678c2..acc0d86d 100644
--- a/assets/sass/teaser.scss
+++ b/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%;
diff --git a/content/operator/euskotren/index.de.md b/content/operator/euskotren/index.de.md
index f5ef7405..0812c294 100644
--- a/content/operator/euskotren/index.de.md
+++ b/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"
%}}
diff --git a/content/operator/euskotren/index.en.md b/content/operator/euskotren/index.en.md
index a763dd26..92228abc 100644
--- a/content/operator/euskotren/index.en.md
+++ b/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"
%}}
diff --git a/content/operator/euskotren/index.fr.md b/content/operator/euskotren/index.fr.md
index 8b118d41..9fb54898 100644
--- a/content/operator/euskotren/index.fr.md
+++ b/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"
%}}
diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
index 56d13f82..86cbd626 100644
--- a/layouts/_default/_markup/render-image.html
+++ b/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 -}}
diff --git a/layouts/partials/image.html b/layouts/partials/image.html
index b67a18d0..e2cb2a30 100644
--- a/layouts/partials/image.html
+++ b/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 -}}
-
-
-
+ {{- $figStyles = $figStyles | append (printf "width: %s" $width) -}}
+{{- end -}}
+
+
+
+
+ {{- if .caption -}}
+
+
+ {{ .caption }}
+
+ {{- end -}}
+
diff --git a/layouts/shortcodes/float-image.html b/layouts/shortcodes/float-image.html
index 0f9c0735..31e12570 100644
--- a/layouts/shortcodes/float-image.html
+++ b/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
)
-}}