hugo-toha/layouts/shortcodes/rimg.html

{{/* Combination of code taken from: https://alexlakatos.com/web/2020/07/17/hugo-image-processing/ & https://dev.to/stereobooster/responsive-images-for-hugo-dn9}}

{{/* get file that matches the filename as specified as src="" in shortcode */}}
{{ $src := resources.GetMatch (.Get "src") }}

{{ if in (.Get "src") "http" }}
  <img src="{{$src}}" {{ with .Get "alt" }}alt="{{.}}"{{ else }}alt=""{{ end }}>
{{ else }}
  {{ if in (.Get "src") ".gif" }}
    <img src="{{$src.RelPermalink}}" {{ with .Get "alt" }}alt="{{.}}"{{ else }}alt=""{{ end }}>
  {{ else }}
    {{/* set image sizes, these are hardcoded for now */}}

    {{ $tinyw := default "500x" }}
    {{ $smallw := default "800x" }}
    {{ $mediumw := default "1200x" }}
    {{ $largew := default "1500x" }}

    {{/* resize the src image to the given sizes */}}

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

    {{/* add the processed images to the scratch */}}


    {{/* only use images smaller than or equal to the src (original) image size */}}
    <img
    {{ with .Get "sizes" }}sizes='{{.}}'{{ else }}{{ end }}
          srcset='
          {{ if ge $src.Width "500" }}
            {{ with $tiny.RelPermalink }}{{.}} 500w{{ end }}
          {{ end }}
          {{ if ge $src.Width "800" }}
            {{ with $small.RelPermalink }}, {{.}} 800w{{ end }}
          {{ end }}
          {{ if ge $src.Width "1200" }}
            {{ with $medium.RelPermalink }}, {{.}} 1200w{{ end }}
          {{ end }}
          {{ if ge $src.Width "1500" }}
            {{ with $large.RelPermalink }}, {{.}} 1500w {{ end }}
          {{ end }}'
          {{ if .Get (print $medium) }}
            src="{{ $medium.RelPermalink }}"
          {{ else }}
            src="{{ $src.RelPermalink }}"
          {{ end }}

          {{ with .Get "alt" }}alt='{{.}}'{{ end }}>
    {{ end }}
{{ end }}