layouts/shortcodes/img.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

<!--
  Usage:
    img "weird_cat.jpg" "Something that can (or not) be a cat."
    img src="weird_cat.jpg" alt="Something that can (or not) be a cat."
    img class="border" src="weird_cat.jpg" alt="Something that can (or not) be a cat."
    img "weird_cat.jpg" "Something that can (or not) be a cat." "border"

  Default available classes:
    border
    borderless
-->

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

<!-- Image processing resolutions -->
{{ $highRes   := .Page.Scratch.Get "highRes" }}
{{ $mediumRes := .Page.Scratch.Get "mediumRes" }}
{{ $lowRes    := .Page.Scratch.Get "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
  -->
  
    {{ $encodedPlaceholder := (printf "data:image/png;base64,%s" (((resources.Get "pixel.gif").Resize (printf "%vx%v %s" (.Resize (index $mediumRes 0)).Width (.Resize (index $mediumRes 0)).Height "png")).Content | base64Encode)) | safeURL }}

  <img
    class="lazyload {{ $class }}"
    loading="lazy"
    data-srcset="{{ (.Resize (index $highRes 0)).RelPermalink }} {{ index $highRes 1 }}, {{ (.Resize (index $mediumRes 0)).RelPermalink }} {{ index $mediumRes 1 }}, {{ (.Resize (index $lowRes 0)).RelPermalink }} {{ index $lowRes 1 }}"
    src="{{ $encodedPlaceholder }}"
    data-src="{{ (.Resize (index $mediumRes 0)).RelPermalink }}"
    {{ with $altText }}alt="{{ . }}"{{ end }}
  />

  <noscript>
    <img
      {{ with $class }}class="{{ . }}"{{ end }}
      loading="lazy"
      srcset="{{ (.Resize (index $highRes 0)).RelPermalink }} {{ index $highRes 1 }}, {{ (.Resize (index $mediumRes 0)).RelPermalink }} {{ index $mediumRes 1 }}, {{ (.Resize (index $lowRes 0)).RelPermalink }} {{ index $lowRes 1 }}"
      src="{{ $encodedPlaceholder }}"
      {{ with $altText }}alt="{{ . }}"{{ end }}
    />
  </noscript>
{{ end }}