hermit-V2/layouts/shortcodes/figure.html

{{/*  Extending upon [https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/embedded/templates/shortcodes/figure.html]  */}}
{{/*  Help from [https://discourse.gohugo.io/t/has-anyone-a-webp-shortcode/35391]  */}}
{{- $path := .Get "src" -}}
{{- $link := .Get "link" -}}
{{- $target := .Get "target" -}}
{{- $rel := .Get "rel" -}}
{{- $class := .Get "class" -}}
{{- $alt := .Get "alt" -}}
{{- $attr := .Get "attr" -}}
{{- $attrlink := .Get "attrlink" -}}
{{- $title := .Get "title" -}}
{{- $width := .Get "width" -}}
{{- $height := .Get "height" -}}
{{- $caption := .Get "caption" -}}
{{- $loading := .Get "loading" -}}
{{- $jpg := "" -}}
{{- $webp := "" -}}
{{- $fitOptionstojpg := printf "%vx%v jpg" $width $height -}}
{{- $fitOptionstowebp := printf "%vx%v webp" $width $height -}}

{{- $msg1 := "The %q shortcode requires a parameter named %q. See %s" -}}
{{- $msg2 := "The resource %q passed to the %q shortcode is not an image. See %s" -}}
{{- $msg3 := "The resource %q passed to the %q shortcode could not be found. See %s" -}}

{{- if not (findRE `http[s]{0,1}://` $path 1) -}}

  {{ if not $path }}
    {{ errorf $msg1 .Name "path" .Position }}
  {{ end }}


  {{- with $i := resources.Get $path -}}
    {{- if eq $i.MediaType.MainType "image" -}}
      {{- if not $width -}}{{- $width = $i.Width -}}{{- end -}}
      {{- if not $height -}}{{- $height = $i.Height -}}{{- end -}}
      {{- if eq $i.MediaType "image/webp" -}}
        {{- $jpg = $i.Fit $fitOptionstojpg -}}
        {{- $webp = $i -}}
      {{- else if eq $i.MediaType "image/jpeg" -}}
        {{- $webp = $i.Fit $fitOptionstowebp -}}
        {{- $jpg = $i -}}
      {{- else -}}
        {{- $fitOptions := printf "%vx%v jpg" $width $height -}}{{- $jpg = $i.Fit $fitOptions -}}
        {{- $fitOptions = printf "%vx%v webp" $width $height -}}{{- $webp = $i.Fit $fitOptions -}}
      {{- end -}}

      <figure{{ with $class }} class="{{ . }}" {{ end }}>
        {{- if $link -}}
          <a href="{{ $link }}"{{ with $target }} target="{{ . }}"{{ end }}{{ with $rel }} rel="{{ . }}"{{ end }}>
        {{- end -}}
        <picture>
          <source srcset="{{ $webp.RelPermalink }}" type="image/webp">
          <source srcset="{{ $jpg.RelPermalink }}" type="image/jpeg">
          <img src="{{ $webp.RelPermalink }}"
          
          {{- if or $alt $caption -}} alt="{{ with $alt }}{{ . }}{{ else }}{{ $caption | markdownify| plainify }}{{ end }}" {{- end -}} 
          {{- with $jpg.Width }}  width="{{ . }}" {{ end -}} 
          {{- with $jpg.Height }} height="{{ . }}" {{ end -}} 
          {{- with $loading }} loading="{{ . }}" {{ end -}} />
        </picture>
        {{- if $link }}</a>{{ end -}}
        {{- if or (or $title $caption) $attr -}}
          <figcaption>
            {{ with $title -}}<h4>{{ . }}</h4>{{- end -}}
            {{- if or $caption $attr -}}<p>
              {{- $caption | markdownify -}}
              {{- with $attrlink }}<a href="{{ . }}">{{- end -}}
                {{- $attr | markdownify -}}
                {{- if $attrlink }}</a>{{ end }}</p>
            {{- end }}
          </figcaption>
        {{- end -}}
      </figure>
    {{- else -}}
      {{- errorf $msg2 $path $.Name $.Position -}}
    {{- end -}}
  {{- else -}}
    {{- errorf $msg3 $path .Name .Position -}}
  {{- end -}}

{{- else -}}
  <figure{{ with $class }} class="{{ . }}" {{ end }}>
    {{- if $link -}}<a href="{{ $link }}"{{ with $target }} target="{{ . }}"{{ end }}{{ with $rel }} rel="{{ . }}"{{ end }}>{{- end -}}
    <img src="{{ $path }}"
    {{- if or $alt $caption -}} alt="{{ with $alt }}{{ . }}{{ else }}{{ $caption | markdownify| plainify }}{{ end }}" {{- end -}} 
    {{- with $width }}  width="{{ . }}" {{ end -}} 
    {{- with $height }} height="{{ . }}" {{ end -}} 
    {{- with $loading }} loading="{{ . }}" {{ end -}} />
    {{- if $link }}</a>{{ end -}}
    {{- if or (or $title $caption) $attr -}}
      <figcaption>
        {{ with $title -}}<h4>{{ . }}</h4>{{- end -}}
        {{- if or $caption $attr -}}<p>
          {{- $caption | markdownify -}}
          {{- with $attrlink }}<a href="{{ . }}">{{- end -}}
            {{- $attr | markdownify -}}
            {{- if $attrlink }}</a>{{ end }}</p>
        {{- end }}
      </figcaption>
    {{- end -}}
  </figure>

{{- end -}}