figure.html 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  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. {{/* Note: Uses `{{-` to unindent HTML so that Figure shortcode can be nested within a `{{%` Markdown shortcode,
  4. such as Callout, without the HTML being rendered as a Markdown code block. */}}
  5. {{ $destination := .Get "src" }}
  6. {{ $caption := .Get "caption" | default (.Get "title") | default "" }}{{/* Support legacy `title` option. */}}
  7. {{ $zoom := eq (.Get "lightbox" | default "true") "true" }}
  8. {{ $id := anchorize (.Get "id" | default ($caption | plainify)) }}
  9. {{ $alt := .Get "alt" | default ($caption | plainify) }}
  10. {{ $img_class := "" }}
  11. {{ if eq (.Get "theme" | lower) "light" }}{{ $img_class = printf "%s img-light" $img_class }}{{end}}
  12. {{ if eq (.Get "theme" | lower) "dark" }}{{ $img_class = printf "%s img-dark" $img_class }}{{end}}
  13. {{- $img := (.Page.Resources.ByType "image").GetMatch $destination -}}
  14. {{- if not $img -}}
  15. {{- $img = resources.Get (path.Join "media" $destination) -}}
  16. {{- end -}}
  17. <figure {{ with .Get "class" }}class="{{.}}"{{ end }} {{ with $id }}id="figure-{{ . }}"{{ end }}>
  18. <div class="figure-img-wrap" {{ with .Get "max_width" }}style="max-width: {{.}}"{{end}}>
  19. {{- if $img -}}
  20. {{ $isSVG := eq $img.MediaType.SubType "svg" }}
  21. {{ if $isSVG -}}
  22. <img alt="{{ $alt }}"
  23. src="{{ $img.RelPermalink }}"
  24. loading="lazy"
  25. {{- if $zoom }} data-zoomable{{end}}
  26. {{- with .Get "width" }} width="{{.}}"{{end}}
  27. {{- with .Get "height" }} height="{{.}}"{{end}}
  28. {{- with $img_class }} class="{{.}}"{{end}} />
  29. {{- else }}
  30. {{- $img_lg := $img.Fit "1200x1200" -}}
  31. {{- $img_md := $img_lg.Fit "760x760" -}}{{/* Match `.docs-article-container` max-width */}}
  32. {{- $img_sm := $img_md.Fit "400x400" -}}
  33. {{- $width := (.Get "width") | default $img_md.Width -}}
  34. {{- $height := (.Get "height") | default $img_md.Height -}}
  35. <img alt="{{ $alt }}" srcset="
  36. {{ $img_sm.RelPermalink }} 400w,
  37. {{ $img_md.RelPermalink }} 760w,
  38. {{ $img_lg.RelPermalink }} 1200w"
  39. src="{{ $img_sm.RelPermalink }}"
  40. width="{{ $width }}"
  41. height="{{ $height }}"
  42. loading="lazy"
  43. {{- if $zoom }} data-zoomable{{end}}
  44. {{- with $img_class }} class="{{.}}"{{end}} />
  45. {{- end }}
  46. {{- else -}}
  47. <img src="{{ $destination | safeURL }}" alt="{{ $alt }}" loading="lazy" {{ if $zoom }}data-zoomable{{end}}
  48. {{- with .Get "width" }} width="{{.}}"{{end}} {{- with .Get "height" }} height="{{.}}"{{end}}
  49. {{- with $img_class }} class="{{.}}"{{end}} />
  50. {{- end -}}
  51. </div>
  52. {{- if $caption -}}
  53. {{/* Localize the figure numbering (if enabled). */}}
  54. {{- $figure := split (i18n "figure" | default "Figure %d:") "%d" -}}
  55. <figcaption{{ if eq (.Get "numbered") "true" }} data-pre="{{- trim (index $figure 0) " " -}}&nbsp;" data-post="{{ index $figure 1 }}&nbsp;" class="numbered"{{ end }}>
  56. {{ $caption | markdownify | emojify }}
  57. </figcaption>
  58. {{- end -}}
  59. </figure>