gohugo img shortcode

img.html

{{/* https://laurakalbag.com/processing-responsive-images-with-hugo/ */}}
{{/* https://dev.to/stereobooster/responsive-images-for-hugo-dn9 */}}
{{/* get file that matches the filename as specified as src="" in shortcode */}}
{{ $src := .Page.Resources.GetMatch (printf "*%s*" (.Get "src")) }}

{{/* set image sizes, these are hardcoded for now, x dictates that images are resized to this width */}}

{{ $lqipw := default "20x" }}
{{ $tinyw := default "640x" }}
{{ $smallw := default "960x" }}
{{ $mediumw := default "1200x" }}
{{ $largew := default "1600x" }}


{{/* resize the src image to the given sizes */}}
<!-- {{ $lqip := .Scratch.Set "lqip" ($src.Resize $lqipw) }}
{{ $tiny := .Scratch.Set "tiny" ($src.Resize $tinyw) }}
{{ $small := .Scratch.Set "small" ($src.Resize $smallw) }}
{{ $medium := .Scratch.Set "small" ($src.Resize $mediumw) }}
{{ $large := .Scratch.Set "small" ($src.Resize $largew) }} -->

{{ $lqip := $src.Resize $lqipw }}
{{ $tiny := $src.Resize $tinyw }}
{{ $small := $src.Resize $smallw }}
{{ $medium := $src.Resize $mediumw }}
{{ $large := $src.Resize $largew }}


{{/* only use images smaller than or equal to the src (original) image size, as Hugo will upscale small images */}}
{{/* set the sizes attribute to (min-width: 35em) 1200px, 100vw unless overridden in shortcode */}}
<!-- https://gohugo.io/about/new-in-032/ -->
<!-- {{ $lqipimg := .Scratch.Get "lqip" }}
{{ $tinyimg := .Scratch.Get "tiny" }}
{{ $smallimg := .Scratch.Get "small" }}
{{ $mediumimg := .Scratch.Get "medium" }}
{{ $largeimg := .Scratch.Get "large" }}
{{ $originalimg := .Scratch.Get "original" }} -->

{{/* $img := imageConfig ($src.RelPermalink | printf "content/%s" ) */}}

{{/* https://github.com/josephhutch/aether/blob/master/layouts/shortcodes/image.html
      <picture>
        {{ if (fileExists (printf "%s/%s" "content" (replace (.Get "src") (path.Ext (.Get "src")) ".webp"))) -}}
            <source srcset="{{ replace (.Get "src") (path.Ext (.Get "src")) ".webp" | absURL }}" type="image/webp">
        {{- end }}
        {{ $image := $.Page.Resources.GetMatch (.Get "src") }}
        {{ if gt $image.Width 800 -}}
            {{ $resized := $image.Resize "800x Lanczos" }}
            <source srcset="{{ $resized.Permalink }}">
            <img src="{{ $resized.Permalink }}" {{ if isset .Params "alt" -}} alt="{{ .Get "alt"}}" {{- end }}>
        {{ else }}
            <source srcset="{{ $image.Permalink }}">
            <img src="{{ $image.Permalink }}" {{ if isset .Params "alt" -}} alt="{{ .Get "alt"}}" {{- end }}>
        {{- end}}
      </picture>
    https://css-tricks.com/using-webp-images/
      <picture>
      <source srcset="img/awesomeWebPImage.webp" type="image/webp">
      <source srcset="img/creakyOldJPEG.jpg" type="image/jpeg"> 
      <img src="img/creakyOldJPEG.jpg" alt="Alt Text!">
    </picture>

    https://responsivedesign.is/articles/adding-webp-images-progressively/
        <picture>
          <source type="image/webp"
                  srcset="images/worlds-300.webp 300w,
                          images/worlds-600.webp 600w,
                          images/worlds-800.webp 800w,
                          images/worlds.webp 1000w"
                  />
          <source srcset="images/worlds-300.jpg 300w,
                          images/worlds-600.jpg 600w,
                          images/worlds-800.jpg 800w,
                          images/worlds.jpg 1000w"
                  />
          <img src="images/worlds-300.jpg"
          alt="The Speed of Light and the Timing of Eclipses" />
        </picture>
    */}}

{{/* $img := imageConfig ($src.RelPermalink | printf "content/%s" ) */}}

<div class="img" >
  <img
    data-sizes="auto"
    data-srcset='
    {{ if ge $src.Width "640" }}
      {{ with $tiny.RelPermalink  }}{{.}} 640w{{ end }}
    {{ end }}
    {{ if ge $src.Width "960" }}
      {{ with $small.RelPermalink }}, {{.}} 960w{{ end }}
    {{ end }}
    {{ if ge $src.Width "1200" }}
      {{ with $medium.RelPermalink }}, {{.}} 1200w{{ end }}
    {{ end }}
    {{ if ge $src.Width "1600" }}
      {{ with $large.RelPermalink }}, {{.}} 1600w {{ end }}
    {{ end }}'
    {{ if .Get $medium }}
      data-src="{{ $medium.RelPermalink }}"
    {{ else }}
      data-src="{{ $src.RelPermalink }}"
    {{ end }}
    width="{{ $img.Width }}" height="{{ $img.Height }}"
    {{ with .Get "alt" }}alt='{{.}}'{{ end }} uk-img>
  {{/* https://addyosmani.com/blog/lazy-loading/ */}}
  <noscript>
    <img
      loading="lazy"
      {{ with .Get "sizes" }}sizes='{{.}}'{{ else }}{{ end }}
      srcset='
      {{ if ge $src.Width "640" }}
        {{ with $tiny.RelPermalink }}{{.}} 640w{{ end }}
      {{ end }}
      {{ if ge $src.Width "960" }}
        {{ with $small.RelPermalink }}, {{.}} 960w{{ end }}
      {{ end }}
      {{ if ge $src.Width "1200" }}
        {{ with $medium.RelPermalink }}, {{.}} 1200w{{ end }}
      {{ end }}
      {{ if ge $src.Width "1600" }}
        {{ with $large.RelPermalink }}, {{.}} 1600w {{ end }}
      {{ end }}'
      {{ if .Get $medium }}
        src="{{ $medium.RelPermalink }}"
      {{ else }}
        src="{{ $src.RelPermalink }}"
      {{ end }}
      width="{{ $img.Width }}" height="{{ $img.Height }}"
      {{ with .Get "alt" }}alt='{{.}}'{{ end }} uk-img>
  </noscript>
</div>