Drop-in replacement for Hugo figure shortcode with img srcset support

figure.html

{{/*

- Change viewport sizes, lazy-loading,async & width,alt,link,caption in the shortcode call
- Hardcode sizes in this file
- If an image should not be resized or changed - e.g. because it is low quality -
  simply dont put it in the page bundle but in /static

Example call: {{<figure src="image.jpg" alt="Alt Text" viewport="(max-width:720px) 80vw, (max-width: 1260px) 40vw, 30vw">}}

figure with auto-resizing, webp-conversion and srcset v2021-06-27

Drop-in replacement for Hugo's figure shortcode as of 2020-05-02 that uses
the picture tag, img srcset and webp format
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.

Changes by @georgeblck:
- 2021-06-27 Added picture-tag and optional lazy loading, async and viewport changing
- 2021-06-05 Added webp (only works when hugo version >= 0.83.0) and lazy loading
Changes and initial release by @cpbotha:
- 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

- 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/

*/}}

{{/* 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 }}
    {{ if $src }}
    <picture>
      <source {{ if (isset .Params "viewport") }} {{- with .Get "viewport" }} sizes="{{ . }}" {{ end -}} {{ else }} sizes="(min-width: 35em) 1200px, 100vw" {{ end }} srcset='
      {{ range $sizes }}
        {{ if ge $src.Width . }}{{ ($src.Resize (printf "%sx webp" .)).Permalink }} {{ (printf "%sw" .) }},{{ end }}
      {{ end }}' type="image/webp">
      <source {{ if (isset .Params "viewport") }} {{- with .Get "viewport" }} sizes="{{ . }}" {{ end -}} {{ else }} sizes="(min-width: 35em) 1200px, 100vw" {{ end }} srcset='
      {{ range $sizes }}
        {{ if ge $src.Width . }}{{ ($src.Resize (printf "%sx jpg" .)).Permalink }} {{ (printf "%sw" .) }},{{ end }}
      {{ end }}' type="image/jpeg">
      {{ end }}
      <img {{ if $src }} {{ if (isset .Params "viewport") }} {{- with .Get "viewport" }} sizes="{{ . }}" {{ end -}} {{ else }} sizes="(min-width: 35em) 1200px, 100vw" {{ end }}
        {{/* only srcset images smaller than or equal to the src (original) image size, as Hugo will upscale small images */}} srcset='
            {{ range $sizes }}
                   {{ if ge $src.Width . }}{{ ($src.Resize (printf "%sx webp" .)).Permalink }} {{ (printf "%sw" .) }},{{ end }}
            {{ end }}' {{/* when no support for srcset (old browsers, RSS), we load small (800px) */}} {{/* if image smaller than 800, then load the image itself as jpg */}} {{ if ge $src.Width "800" }}
        src="{{ ($src.Resize "800x webp").Permalink }}" {{ else }}src="{{ ($src.Resize "jpg").Permalink }}" {{ end }} {{ else }} {{/* fall back to stock hugo behaviour when image is not available in bundle */}} src="{{ .Get "src" }}" {{ end }}
        {{ if (isset .Params "async") }} {{- with .Get "async" }} async="{{ . }}" {{ end -}} {{ else }} async="on" {{ end }} {{ if (isset .Params "loading") }} {{- with .Get "loading" }} loading="{{ . }}" {{ end -}} {{ else }} loading="lazy"
        {{ 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 $src }}
    </picture> <!-- Closing picture tag -->
    {{ end }}
    {{- 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>