Source code of my website
♻️ : add responsive cover image handling with srcset and sizes
+41
-17
+16
-5
layouts/_default/_markup/render-image.html
+16
-5
layouts/_default/_markup/render-image.html
···
1
1
{{- $image := .Page.Resources.GetMatch .Destination -}}
2
-
{{- $width := math.Min 820 $image.Width -}}
3
-
{{- $resizeOpts := printf "%dx webp lossless q100 lanczos" (int $width) -}}
4
-
{{- with $image.Resize $resizeOpts -}}
5
-
<img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}"
2
+
3
+
{{- $width820 := math.Min 820 $image.Width -}}
4
+
{{- $resizeOpts := printf "%dx webp lossless q100 lanczos" (int $width820) -}}
5
+
{{- $img820 := $image.Resize $resizeOpts -}}
6
+
7
+
{{- $width480 := math.Min 480 $image.Width -}}
8
+
{{- $resizeOpts := printf "%dx webp lossless q100 lanczos" (int $width480) -}}
9
+
{{- $img480 := $image.Resize $resizeOpts -}}
10
+
11
+
<img srcset="
12
+
{{ $img820.RelPermalink }} 820w,
13
+
{{ $img480.RelPermalink }} 480w"
14
+
sizes="(max-width: 480px) 480px,
15
+
820px"
16
+
src="{{ $img820.RelPermalink }}"
6
17
{{- with $.PlainText }} alt="{{ . }}"{{ end -}}
7
18
{{ with $.Title }}title="{{ . }}"{{ end }}>
8
-
{{- end -}}
19
+
{{- /* chomp trailing newline */ -}}
+8
-4
layouts/_default/single.html
+8
-4
layouts/_default/single.html
···
32
32
33
33
{{ with .Resources }}
34
34
{{ with .GetMatch "{cover.*}" }}
35
-
{{ $cover := .Resize "820x webp" }}
36
-
{{ with $cover }}
37
-
<img src="{{ .Permalink }}"/>
38
-
{{ end }}
35
+
{{ $cover820 := .Resize "820x webp lossless q100 lanczos" }}
36
+
{{ $cover480 := .Resize "480x webp lossless q100 lanczos" }}
37
+
<img srcset="{{ $cover820.RelPermalink }} 820w,
38
+
{{ $cover480.RelPermalink }} 480w"
39
+
sizes="(max-width: 480px) 480px,
40
+
820px"
41
+
src="{{ $cover820.RelPermalink }}"
42
+
alt="Illustration de couverture"/>
39
43
{{ end }}
40
44
{{ end }}
41
45
+9
-4
layouts/index.html
+9
-4
layouts/index.html
···
33
33
34
34
{{ with .Resources }}
35
35
{{ with .GetMatch "{cover.*}" }}
36
-
{{ $cover := .Fill "820x240 webp" }}
37
-
{{ with $cover }}
38
-
<img loading="lazy" alt="Cover for the article" src="{{ .Permalink }}" width="820" height="240"/>
39
-
{{ end }}
36
+
{{ $cover820 := .Fill "820x240 webp lossless q100 lanczos" }}
37
+
{{ $cover480 := .Fill "480x240 webp lossless q100 lanczos" }}
38
+
<img loading="lazy"
39
+
srcset="{{ $cover820.RelPermalink }} 820w,
40
+
{{ $cover480.RelPermalink }} 480w"
41
+
sizes="(max-width: 480px) 480px,
42
+
820px"
43
+
src="{{ $cover820.RelPermalink }}"
44
+
alt="Cover for the article"/>
40
45
{{ end }}
41
46
{{ end }}
42
47
+8
-4
layouts/posts/single.html
+8
-4
layouts/posts/single.html
···
46
46
47
47
{{ with .Resources }}
48
48
{{ with .GetMatch "{cover.*}" }}
49
-
{{ $cover := .Resize "820x webp" }}
50
-
{{ with $cover }}
51
-
<img src="{{ .Permalink }}"/>
52
-
{{ end }}
49
+
{{ $cover820 := .Resize "820x webp lossless q100 lanczos" }}
50
+
{{ $cover480 := .Resize "480x webp lossless q100 lanczos" }}
51
+
<img srcset="{{ $cover820.RelPermalink }} 820w,
52
+
{{ $cover480.RelPermalink }} 480w"
53
+
sizes="(max-width: 480px) 480px,
54
+
820px"
55
+
src="{{ $cover820.RelPermalink }}"
56
+
alt="Illustration de couverture"/>
53
57
{{ end }}
54
58
{{ end }}
55
59