github.io/layouts/shortcodes/img.html

{{ $img := resources.Get (.Get "src") }}
{{ $hint := "photo" }}
{{ $q := 69 }}
{{ if (.Get "quality" )}}
  {{ $q = .Get "quality" }}
{{ end }}
{{ if (.Get "hint" )}}
  {{ $hint = .Get "hint" }}
{{ end }}

{{ if ne $img.MediaType.SubType "svg" }}
  {{ $w := "" }}
  {{ $h := "" }}

  {{ if (.Get "width") }}
    {{ $w = .Get "width" }}
  {{ else }}
    {{ $w = $img.Width | string }}
  {{ end }}
  {{ if (.Get "height") }}
    {{ $h = .Get "height" }}
  {{ end }}

  {{ $img = $img.Resize (printf "%sx%s webp %s q%d"  $w $h $hint $q) }}
{{ end }}

<figure {{ with .Get "class" }}class='{{.}}'{{ end }}>
  {{ with $img | fingerprint }}
  <a href='{{ with $.Get "link" }}{{ . }}{{ else }}{{ .RelPermalink }}{{ end }}' target='_blank'>
    <img src='{{ .RelPermalink }}' integrity='{{ .Data.Integrity }}'
      {{ if or ($.Get "alt") ($.Get "caption") }}alt='{{ with $.Get "alt" }}{{ . }}
      {{ else }}{{ $.Get "caption" }}{{ end }}'{{ end }} />
  </a>
  {{ end }}
  {{ if or (or (.Get "title") (.Get "caption")) (.Get "attr") }}
  <figcaption>{{ if isset .Params "title" }}
    <h4>{{ .Get "title" }}</h4>{{ end }}
    {{ if or (.Get "caption") (.Get "attr") }}<p>
    {{ .Get "caption" | markdownify }}
    {{ with .Get "attrlink" }}<a href="{{ . }}"> {{ end }}
    {{ .Get "attr" }}
    {{ if .Get "attrlink" }}</a> {{ end }}
    </p> {{ end }}
  </figcaption>
  {{ end }}
</figure>