figure.html 2.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. {{/* Figure Shortcode for Wowchemy. */}}
  2. {{/* Load image from page dir falling back to media library at `assets/media/` and then to remote URI. */}}
  3. {{ $destination := .Get "src" }}
  4. {{ $caption := .Get "caption" | default (.Get "title") | default "" }}{{/* Support legacy `title` option. */}}
  5. {{ $zoom := eq (.Get "lightbox" | default "true") "true" }}
  6. {{ $id := anchorize (.Get "id" | default ($caption | plainify)) }}
  7. {{ $alt := .Get "alt" | default ($caption | plainify) }}
  8. {{- $img := (.Page.Resources.ByType "image").GetMatch $destination -}}
  9. {{- if not $img -}}
  10. {{- $img = resources.Get (path.Join "media" $destination) -}}
  11. {{- end -}}
  12. <figure {{ with .Get "class" }}class="{{.}}"{{ end }} {{ with $id }}id="figure-{{ . }}"{{ end }}>
  13. {{- if $img -}}
  14. {{ $isSVG := eq $img.MediaType.SubType "svg" }}
  15. {{ if $isSVG }}
  16. <img alt="{{ $alt }}"
  17. src="{{ $img.RelPermalink }}"
  18. loading="lazy"
  19. {{ if $zoom }}data-zoomable{{end}}
  20. {{ with .Get "width" }}width="{{.}}"{{end}} {{ with .Get "height" }}height="{{.}}"{{end}} />
  21. {{ else }}
  22. {{- $img_lg := $img.Fit "1200x1200" -}}
  23. {{- $img_md := $img_lg.Fit "760x760" -}}{{/* Match `.docs-article-container` max-width */}}
  24. {{- $img_sm := $img_md.Fit "400x400" -}}
  25. {{- $width := (.Get "width") | default $img_md.Width -}}
  26. {{- $height := (.Get "height") | default $img_md.Height -}}
  27. <img alt="{{ $alt }}" srcset="
  28. {{ $img_sm.RelPermalink }} 400w,
  29. {{ $img_md.RelPermalink }} 760w,
  30. {{ $img_lg.RelPermalink }} 1200w"
  31. src="{{ $img_sm.RelPermalink }}"
  32. width="{{ $width }}"
  33. height="{{ $height }}"
  34. loading="lazy"
  35. {{ if $zoom }}data-zoomable{{end}} />
  36. {{ end }}
  37. {{- else -}}
  38. <img src="{{ $destination | safeURL }}" alt="{{ $alt }}" loading="lazy" {{ if $zoom }}data-zoomable{{end}}
  39. {{ with .Get "width" }}width="{{.}}"{{end}} {{ with .Get "height" }}height="{{.}}"{{end}} />
  40. {{- end -}}
  41. {{ if $caption }}
  42. {{/* Localize the figure numbering (if enabled). */}}
  43. {{ $figure := split (i18n "figure" | default "Figure %d:") "%d" }}
  44. <figcaption{{ if eq (.Get "numbered") "true" }} data-pre="{{- trim (index $figure 0) " " -}}&nbsp;" data-post="{{ index $figure 1 }}&nbsp;" class="numbered"{{ end }}>
  45. {{ $caption | markdownify | emojify }}
  46. </figcaption>
  47. {{ end }}
  48. </figure>