From 518ffb09df3655bae7963eee6c489d304548d9fe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B6ren=20Weber?= <mail@soeren-weber.de>
Date: Sun, 10 Mar 2024 14:40:23 +0100
Subject: [PATCH] image: support Markdown attributes #795

---
 exampleSite/content/_index.en.md              |  2 +-
 .../content/dev/screenshots/_index.en.md      |  6 ++--
 layouts/_default/_markup/render-image.html    |  1 +
 layouts/partials/shortcodes/image.html        | 29 ++++++++++++++++---
 4 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/exampleSite/content/_index.en.md b/exampleSite/content/_index.en.md
index d2d4774c84..677bffd974 100644
--- a/exampleSite/content/_index.en.md
+++ b/exampleSite/content/_index.en.md
@@ -7,7 +7,7 @@ A theme for [Hugo](https://gohugo.io/) designed for documentation.
 
 [★ What's new in the latest release ★](basics/migration)
 
-![Image of the Relearn theme in light and dark mode on phone, tablet and desktop](/images/hero.png?width=100%&height=100%)
+![Image of the Relearn theme in light and dark mode on phone, tablet and desktop](/images/hero.png)
 
 ## Motivation
 
diff --git a/exampleSite/content/dev/screenshots/_index.en.md b/exampleSite/content/dev/screenshots/_index.en.md
index 37ab3e7145..389e920924 100644
--- a/exampleSite/content/dev/screenshots/_index.en.md
+++ b/exampleSite/content/dev/screenshots/_index.en.md
@@ -43,7 +43,7 @@ The location is mandatory due to Hugo's theme site builder.
 
 **Preview** `images/screenshot.png`:
 
-![Screenshot](/images/screenshot.png?width=100%25&height=100%25)
+![Screenshot](/images/screenshot.png?width=50%25&height=50%25)
 
 ## Hero Image
 
@@ -80,8 +80,8 @@ The location of `images/tn.png` is mandatory due to Hugo's theme site builder.
 
 **Preview** `images/hero.png`:
 
-![Hero](/images/hero.png?width=100%25&height=100%25)
+![Hero](/images/hero.png?width=50%25&height=50%25)
 
 **Preview** `images/tn.png`:
 
-![tn](/images/tn.png?width=100%25&height=100%25)
+![tn](/images/tn.png?width=50%25&height=50%25)
diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
index 65469a4605..ae33ae57a7 100644
--- a/layouts/_default/_markup/render-image.html
+++ b/layouts/_default/_markup/render-image.html
@@ -5,4 +5,5 @@
   "title" .Title
   "alt" .Text
   "id" $id
+  "attributes" .Attributes
 ) }}
\ No newline at end of file
diff --git a/layouts/partials/shortcodes/image.html b/layouts/partials/shortcodes/image.html
index ff3fd920f5..8998843055 100644
--- a/layouts/partials/shortcodes/image.html
+++ b/layouts/partials/shortcodes/image.html
@@ -19,7 +19,10 @@
 {{- $dest_path := $dest_url.Path }}
 {{- $image := "" }}
 {{- if not $dest_url.IsAbs }}
-  {{- with or ($page.Resources.Get $dest_url.Path) (resources.Get $dest_url.Path) }}
+  {{- with or
+    ($page.Resources.Get $dest_url.Path)
+    (resources.Get $dest_url.Path)
+  }}
     {{- $image = . }}
   {{- end }}
   {{- with $image }}
@@ -27,6 +30,9 @@
     {{- with $dest_url.RawQuery }}
       {{- $url = printf "%s?%s" $url . }}
     {{- end }}
+    {{- with $dest_url.Fragment }}
+      {{- $url = printf "%s#%s" $url . }}
+    {{- end }}
   {{- else }}
     {{- if eq $page.Site.Params.image.errorlevel "warning" }}
       {{- warnf "%q: image '%s' is not a resource but linked anyways" $page.File.Filename .url }}
@@ -69,12 +75,27 @@
   {{- $c := printf "%s%s" (cond $v "" "no") $k }}
   {{- $classes = $classes | append $c }}
 {{- end }}
+{{- $attributes := merge .attributes (dict "alt" $alt "src" $url "title" $title "loading" "lazy") }}
 {{- $id := cond (or (eq .id nil) (eq .id "")) (partial "make-random-md5.hugo" $page) .id }}
 {{- if $effects.lightbox -}}
 <a href="#R-image-{{ $id }}" class="lightbox-link">
-{{- end -}}
-<img src="{{ $url | safeURL }}" alt="{{ $alt }}"{{ with $title }} title="{{ . }}"{{ end }} class="figure-image {{ delimit $classes " " }}" style="height: {{ $height }}; width: {{ $width }};" loading="lazy">
+{{- end }}
+{{- $attributes_figure := merge $attributes (dict "class" (delimit (append (index $attributes "class" | default slice) "figure-image" $classes) " ")) }}
+{{- $attributes_figure = merge $attributes_figure (dict "style" (delimit (slice (index $attributes "style") (printf "height: %s; width: %s;" $height $width)) " ")) -}}
+<img
+  {{- range $k, $v := $attributes_figure }}
+    {{- if $v }}
+      {{- printf " %s=%q" $k $v | safeHTMLAttr }}
+    {{- end }}
+  {{- end }}>
 {{- if $effects.lightbox -}}
 </a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-{{ $id }}"><img src="{{ $url | safeURL }}" alt="{{ $alt }}"{{ with $title }} title="{{ . }}"{{ end }} class="lightbox-image {{ delimit $classes " " }}" loading="lazy"></a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-{{ $id }}">
+{{- $attributes_lightbox := merge $attributes (dict "class" (delimit (append (index $attributes "class" | default slice) "lightbox-image" $classes) " ")) -}}
+<img
+  {{- range $k, $v := $attributes_lightbox }}
+    {{- if $v }}
+      {{- printf " %s=%q" $k $v | safeHTMLAttr }}
+    {{- end }}
+  {{- end }}></a>
 {{- end }}
\ No newline at end of file