layouts/shortcodes/figure.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

<!--
  Usage:
    figure "weird_cat.jpg" "Something that can (or not) be a cat."
    figure src="weird_cat.jpg" alt="Something that can (or not) be a cat."
    figure class="border" src="weird_cat.jpg" alt="Something that can (or not) be a cat."
    figure "weird_cat.jpg" "Something that can (or not) be a cat." "border"
    figure class="border" src="weird_cat.jpg" caption="Something that can (or not) be a cat." alt="Ask someone blind if a caption and alt text are the same thing."

  Default available classes:
    border
    borderless
-->

{{ $file    := .Get "src"     | default (.Get 0) }}
{{ $caption := .Get "caption" | default (.Get 1) | markdownify }}
{{ $class   := .Get "class"   | default (.Get 2) }}
{{ $alt     := .Get "alt"     | default $caption }}

<!-- Image processing options -->
{{ $imageProc := (dict "highRes" (.Site.Params.imageProc.highRes | default .Site.Data.default.imageProc.highRes) "mediumRes" (.Site.Params.imageProc.mediumRes | default .Site.Data.default.imageProc.mediumRes) "lowRes" (.Site.Params.imageProc.lowRes | default .Site.Data.default.imageProc.lowRes)) }}

<!-- Default image path -->
{{ $imgPath := .Page.Param "imgPath" }}

{{ if $imgPath }}
  {{ $file = path.Join $imgPath $file }}
{{ end }}

{{ with $.Page.Resources.GetMatch $file }}

  <!--
    HACK
    Reduce reflow by generating a placeholder with similar size
  -->
  
  {{ $mediumRes := (index $imageProc.mediumRes 0) }}

  {{ $encodedPlaceholder := (printf "data:image/png;base64,%s" (((resources.Get "img/pixel.gif").Resize (printf "%vx%v %s" (.Resize $mediumRes).Width (.Resize $mediumRes).Height "png")).Content | base64Encode)) | safeURL }}
  
  {{ $outputSet := slice }}
  {{ $inputFile := . }}
  
  {{ range $imageProc }}
    {{ $outputSet = $outputSet | append (printf "%s %s" (($inputFile.Resize (index . 0)).RelPermalink) (index . 1)) }}
  {{ end }}

  <figure>
    <img
      class="lazyload {{ $class }}"
      loading="lazy"
      data-srcset='{{ delimit $outputSet ", " }}'
      src="{{ $encodedPlaceholder }}"
      data-src="{{ (.Resize $mediumRes).RelPermalink }}"
      {{ with $alt }}alt="{{ . }}"{{ end }}
    />

    <noscript>
      <img
        {{ with $class }}class="{{ . }}"{{ end }}
        loading="lazy"
        srcset='{{ delimit $outputSet ", " }}'
        src="{{ $encodedPlaceholder }}"
        {{ with $alt }}alt="{{ . }}"{{ end }}
      />
    </noscript>
    
    {{ with $caption }}
      <figcaption>{{ . }}</figcaption>
    {{ end }}
    
  </figure>
{{ end }}