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 -}} - - -{{ .alt }} + {{- $figStyles = $figStyles | append (printf "width: %s" $width) -}} +{{- end -}} + + +
+ {{ .alt }} + {{- 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 ) -}}