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

<!-- Read page and image params -->
{{- $max_width := .Page.Params.image_max_width }}
{{- $dir := .Page.Params.image_dir }}

{{- $caption := .Inner }}
{{- $file := .Params.file }}
{{- $class := .Params.class }}
{{- $source := .Params.source }}
{{- $alt := .Params.alt }}

<!-- Get the the image -->
{{- $path := printf "%s/%s" $dir $file}}
{{- $img := resources.Get $path }}

<!-- Decide on the desired 1x and 2x width -->
{{- $raw_width := $img.Width}}
{{- $final1x_width := (cond (gt $max_width $raw_width) $raw_width $max_width) }}
{{- $final2x_width := math.Mul $final1x_width 2}}

<!-- Generate 1x and 2x images -->
{{- $img1xproc := printf "%dx webp q90" $final1x_width }}
{{- $img2xproc := printf "%dx webp q90" $final2x_width }}
{{- $img1x := $img.Resize $img1xproc }}
{{- $img2x := $img.Resize $img2xproc }}

<!-- Generate raw, optimized img -->
{{- $imgproc := printf "x%d webp q90" $raw_width }}
{{- $img_raw := $img.Resize $imgproc }}

<!-- Resulting HTML -->
<figure>
  <a href="{{ $img_raw.Permalink }}">
    <img 
      class="{{ $class }}"
      alt="{{ $alt }}" 
      src="{{ $img1x.Permalink }}" 
      srcset="
              {{ $img1x.Permalink }} 1x,
              {{ $img2x.Permalink }} 2x
              "
      width="{{ $img1x.Width }}" 
      height="{{ $img1x.Height }}"
      loading="lazy"
      >
  </a>
  <figcaption>
    {{ $caption }}

    {{- if $source }}
    <a href="{{ $source }}" target="_blank" title="source">[source]</a>
    {{ end }}
  </figcaption>
</figure>