From 147ee8cf768b0159fe9979e16d873b45dce49093 Mon Sep 17 00:00:00 2001
From: Alan Orth <alan.orth@gmail.com>
Date: Fri, 4 Dec 2020 13:57:37 +0200
Subject: [PATCH] layouts/shortcodes/figure.html: Add srcset support

This overrides Hugo's default figure shortcode to enable img srcset
support, which allows the client to decide which size of image they
want to download based on a CSS media query. During build time Hugo
creates several versions of each image to match several breakpoints.
Unfortunately this only works if the images are in the post's page
bundle, falling back to retrieving images from the static directory
if they aren't found in the bundle.

This shortcode was originally from Charl P. Botha, but I modified
it to automatically rotate images that have orientation EXIF data.

See: https://gohugo.io/content-management/page-bundles/
See: http://www.johann-oberdorfer.eu/blog/2020/01/05/20-01-05_leverage_page_bundles_in_hugo/
See: https://cpbotha.net/2020/05/02/drop-in-replacement-for-hugo-figure-shortcode-with-responsive-img-srcset/
---
 layouts/shortcodes/figure.html | 92 ++++++++++++++++++++++++++++++++++
 1 file changed, 92 insertions(+)
 create mode 100644 layouts/shortcodes/figure.html

diff --git a/layouts/shortcodes/figure.html b/layouts/shortcodes/figure.html
new file mode 100644
index 0000000..e66e322
--- /dev/null
+++ b/layouts/shortcodes/figure.html
@@ -0,0 +1,92 @@
+{{/*
+
+figure with auto-resizing and srcset v2020-11-30
+
+Drop-in replacement for Hugo's figure shortcode as of 2020-05-02 that uses img srcset
+to enable browsers to download only the resolution that they need.
+
+The resizing and srcset magic only works for images that are part of the page
+bundle. It will fall back to stock Hugo figure behaviour otherwise.
+
+Improvements that were initially out of reach of my Hugo template programming "skills"
+but have now been taken care of:
+- [x] gracefully handle images that are not in page bundle, i.e. no image processing available
+- [x] use a single configurable sizes array, and derive everything from there
+
+See https://cpbotha.net/2020/05/02/drop-in-replacement-for-hugo-figure-shortcode-with-img-srcset-support/
+
+- original srcset img shortcode from: https://laurakalbag.com/processing-responsive-images-with-hugo/
+- original hugo figure shortcode from: https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/embedded/templates/shortcodes/figure.html
+- no unnecessary resizes and more nudges by Stéfan van der Walt https://mentat.za.net/
+- mashing together and srcset logic fixes by Charl P. Botha https://cpbotha.net/
+
+Changes:
+- 2020-11-30 handle images that are rotated 90 degrees (should handle more eventually)
+- 2020-05-10 fall back to stock Hugo behaviour when no page bundle found
+- 2020-05-04 no unnecessary resizes, sizes in array
+- 2020-05-02 initial release
+
+*/}}
+
+{{/* hugo will resize to all of these sizes that are smaller than your original. configure if you like! */}}
+{{ $sizes := (slice "480" "800" "1200" "1500") }}
+
+{{/* get file that matches the filename as specified as src="" in shortcode */}}
+{{ $src := .Page.Resources.GetMatch (printf "*%s*" (.Get "src")) }}
+
+<figure{{ with .Get "class" }} class="{{ . }}"{{ end }}>
+    {{- if .Get "link" -}}
+        <a href="{{ .Get "link" }}"{{ with .Get "target" }} target="{{ . }}"{{ end }}{{ with .Get "rel" }} rel="{{ . }}"{{ end }}>
+    {{- end }}
+    <img
+        {{ if $src }}
+            sizes="(min-width: 35em) 1200px, 100vw"
+            {{/* only srcset images smaller than or equal to the src (original) image size, as Hugo will upscale small images */}}  
+            srcset='
+            {{ range $sizes }}
+                   {{ $size := . }}
+                   {{/* https://discourse.gohugo.io/t/image-exif-orientation/22902/7 */}}
+                   {{/* set orientation to 1 just in case it doesnt exist in Exif */}}
+                   {{ $orientation := 1 }}
+                   {{ with $src.Exif }}
+                   {{ $orientation := .Tags.Orientation }}
+                   {{ if and (ge $src.Width $size) (eq $orientation 8) }}
+                       {{ ($src.Resize (printf "%sx r90" $size)).Permalink }} {{ (printf "%sw" $size) }},
+                   {{ else if ge $src.Width $size }}{{ ($src.Resize (printf "%sx" $size)).Permalink }} {{ (printf "%sw" $size) }},{{ end }}
+                   {{ end }}
+            {{ end }}'
+
+            {{/* when no support for srcset (old browsers, RSS), we load small (800px) */}}
+            {{/* if image smaller than 800, then load the image itself */}}
+            {{ if ge $src.Width "800" }}src="{{ ($src.Resize "800x").Permalink }}"
+            {{ else }}src="{{ $src.Permalink }}"
+            {{ end }}
+
+        {{ else }}
+            {{/* fall back to stock hugo behaviour when image is not available in bundle */}}
+            src="{{ .Get "src" }}"
+        {{ end }}
+
+        {{- if or (.Get "alt") (.Get "caption") }}
+            alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" | markdownify| plainify }}{{ end }}"
+        {{- end -}}
+        {{- with .Get "width" }} width="{{ . }}"{{ end -}}
+        {{- with .Get "height" }} height="{{ . }}"{{ end -}}
+    /> <!-- Closing img tag -->
+    {{- if .Get "link" }}</a>{{ end -}}
+    {{- if or (or (.Get "title") (.Get "caption")) (.Get "attr") -}}
+        <figcaption>
+            {{ with (.Get "title") -}}
+                <h4>{{ . }}</h4>
+            {{- end -}}
+            {{- if or (.Get "caption") (.Get "attr") -}}<p>
+                {{- .Get "caption" | markdownify -}}
+                {{- with .Get "attrlink" }}
+                    <a href="{{ . }}">
+                {{- end -}}
+                {{- .Get "attr" | markdownify -}}
+                {{- if .Get "attrlink" }}</a>{{ end }}</p>
+            {{- end }}
+        </figcaption>
+    {{- end }}
+</figure>