hugo-academic/wowchemy/layouts/shortcodes/figure.html

{{/* Figure Shortcode for Wowchemy. */}}
{{/* Load image from page dir falling back to media library at `assets/images/` and then to remote URI. */}}

{{ $destination := .Get "src" }}
{{ $caption := .Get "title" | default (.Get "caption") | default "" }}
{{ $id := .Get "id" | default $caption }}
{{ $alt := .Get "alt" | default ($caption | plainify) }}

{{- $img := (.Page.Resources.ByType "image").GetMatch $destination -}}
{{- if and (not $img) .Page.File -}}
  {{ $path :=  $destination }}
  {{- $img = resources.Get (path.Join "images" $path) -}}
{{- end -}}

<figure {{ with .Get "class" }}class="{{.}}"{{ end }} {{ with $id }}id="figure-{{ anchorize . }}"{{ end }}>

  {{- if $img -}}
    {{ $isSVG := eq $img.MediaType.SubType "svg" }}
    {{ if $isSVG }}
      {{ $img.Content | safeHTML }}
    {{ else }}
      {{- $img_lg := $img.Fit "1200x1200" -}}
      {{- $img_md := $img_lg.Fit "760x760" -}}{{/* Match `.docs-article-container` max-width */}}
      {{- $img_sm := $img_md.Fit "400x400" -}}
      <img alt="{{ $alt }}" srcset="
           {{ $img_sm.RelPermalink }} 400w,
           {{ $img_md.RelPermalink }} 760w,
           {{ $img_lg.RelPermalink }} 1200w"
           src="{{ $img_sm.RelPermalink }}"
           width="{{ (.Get "width") | default $img_md.Width }}"
           height="{{ (.Get "height") | default $img_md.Height }}"
           loading="lazy"
           data-zoomable />
    {{ end }}
  {{- else -}}
    <img src="{{ $destination | safeURL }}" alt="{{ $alt }}" loading="lazy" data-zoomable
         {{ with .Get "width" }}width="{{.}}"{{end}} {{ with .Get "height" }}height="{{.}}"{{end}} />
  {{- end -}}

  {{ if $caption }}
    {{/* Localize the figure numbering (if enabled). */}}
    {{ $figure := split (i18n "figure" | default "Figure %d:") "%d" }}
    <figcaption{{ if eq (.Get "numbered") "true" }} data-pre="{{- trim (index $figure 0) " " -}}&nbsp;" data-post="{{ index $figure 1 }}&nbsp;" class="numbered"{{ end }}>
      {{ $caption | markdownify | emojify }}
    </figcaption>
  {{ end }}
</figure>