figure.html 2.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. {{/* Enable image to be loaded from local page dir or media library at `static/media/`. */}}
  2. {{ $media_dir := $.Scratch.Get "media_dir" }}
  3. {{ $asset := (.Page.Resources.ByType "image").GetMatch (.Get "src") }}
  4. {{ $image_src := (.Get "src") }}
  5. {{ if $asset }}
  6. {{ $asset2 := $asset.Fit "2000x2000" }}
  7. {{ $image_src = $asset2.RelPermalink }}
  8. {{ else if .Get "library" }}
  9. {{ $image_src = printf "%s/%s" $media_dir $image_src | relURL }}
  10. {{ end }}
  11. {{/* Disallow user from opening image in the lightbox? */}}
  12. {{ $lightbox := eq (.Get "lightbox" | default "true") "true" }}
  13. {{/* Get lightbox group for showing multiple images in a lightbox. */}}
  14. {{ $group := .Get "lightbox-group" | default "" }}
  15. {{/* Get caption. Support legacy `title` option. */}}
  16. {{ $caption := .Get "title" | default (.Get "caption") | default "" }}
  17. <figure{{ with .Get "class" }} class="{{.}}"{{ end }} {{ with $caption }}id="figure-{{ anchorize . }}"{{ end }}>
  18. {{ if $lightbox }}
  19. <a data-fancybox="{{$group}}" href="{{$image_src}}" {{ with $caption }}data-caption="{{ .|markdownify|emojify|safeHTMLAttr }}"{{ end }}>
  20. {{ else if .Get "link"}}
  21. <a href="{{ .Get "link" }}"{{ with .Get "target" }} target="{{.}}"{{ end }}{{ with .Get "rel" }} rel="{{.}}"{{ end }}>
  22. {{ end -}}
  23. {{/* Lazy load only when we know image dimensions in order to preserve anchor linking. */}}
  24. {{ if $asset }}
  25. <img data-src="{{$image_src}}" class="lazyload" alt="{{ with .Get "alt" }}{{.}}{{end}}" width="{{ (.Get "width") | default $asset.Width }}" height="{{ (.Get "height") | default $asset.Height }}">
  26. {{ else if and (.Get "width") (.Get "height") }}
  27. <img data-src="{{$image_src}}" class="lazyload" alt="{{ with .Get "alt" }}{{.}}{{end}}" {{ with .Get "width" }}width="{{.}}"{{end}} {{ with .Get "height" }}height="{{.}}"{{end}}>
  28. {{ else }}
  29. <img src="{{$image_src}}" alt="{{ with .Get "alt" }}{{.}}{{end}}" {{ with .Get "width" }}width="{{.}}"{{end}} {{ with .Get "height" }}height="{{.}}"{{end}}>
  30. {{ end }}
  31. {{- if or $lightbox (.Get "link") }}</a>{{ end }}
  32. {{ if $caption }}
  33. {{/* Localize the figure numbering (if enabled). */}}
  34. {{ $figure := split (i18n "figure" | default "Figure %d:") "%d" }}
  35. <figcaption{{ if eq (.Get "numbered") "true" }} data-pre="{{ index $figure 0 }}" data-post="{{ index $figure 1 }}" class="numbered"{{ end }}>
  36. {{ $caption | markdownify | emojify }}
  37. </figcaption>
  38. {{ end }}
  39. </figure>