-
Notifications
You must be signed in to change notification settings - Fork 0
/
picture.html
99 lines (97 loc) · 3.28 KB
/
picture.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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
{{ $img := .img }}
{{ $alt := .alt }}
{{ $class := .class }}
{{ $lazy := .lazy }}
{{ $webp := .webp }}
{{ $lqip := .lqip }}
{{ with $img }}
{{ if (eq .MediaType.SubType "svg") }}
{{ $width := ""}}
{{ $height := ""}}
{{ $svgContent := .Content }}
{{ range (findRESubmatch `<svg[^>]*width=["']([.0-9]*)["'a-zA-Z]` $svgContent 1) }}
{{ $width = index . 1 }}
{{ end }}
{{ range (findRESubmatch `<svg[^>]*height=["']([.0-9]*)["'a-zA-Z]` $svgContent 1) }}
{{ $height = index . 1 }}
{{ end }}
{{ if (eq "" $width $height) }}
{{ range (findRESubmatch `<svg[^>]*viewBox=["']?([.0-9]*) ([.0-9]*) ([.0-9]*) ([.0-9]*)` $svgContent 1) }}
{{ $width = index . 3 }}
{{ $height = index . 4 }}
{{ end }}
{{ end }}
{{ if (eq "" $width $height) }}
{{ warnf "Can't detect width and height for SVG %s" .RelPermalink }}
{{/* do not use lazy without dimensions */}}
{{ $lazy = false }}
{{ end }}
<picture {{ with $class }} class="{{ . }}" {{ end }}>
<img
src="{{ .RelPermalink }}"
{{ with $width }} width="{{ . }}" {{ end }}
{{ with $height }} height="{{ . }}" {{ end }}
{{ with $class }} class="{{ . }}" {{ end }}
{{ with $alt }} alt="{{ . }}" {{ end }}
{{ with $lazy }} loading="lazy" decoding="async" {{ end }}
>
</picture>
{{ else }}
{{ $s := newScratch }}
{{ $s.SetInMap "sizes" "330w" 330 }}
{{ $s.SetInMap "sizes" "660w" 660 }}
{{ if gt .Width 1024 }}
{{ $s.SetInMap "sizes" "1024w" 1024 }}
{{ end }}
{{ if gt .Width 1320 }}
{{ $s.SetInMap "sizes" "2x" 1320 }}
{{ end }}
{{ if le .Width 1320 }}
{{ $s.SetInMap "sizes" (printf "%dw" .Width) .Width }}
{{ end }}
<picture
{{ with $class }} class="{{ . }}" {{ end }}
{{ if $lqip }}
{{ $bg := (.Resize "20x webp q20").Content | base64Encode }}
style="background-image:url(data:image/webp;base64,{{ $bg }});background-size:cover"
{{ end }}
>
{{ if (and $webp (ne .MediaType.SubType "webp")) }}
<source
{{ if lt .Width 660 }}
{{ with .Resize (printf "%dx%d webp" .Width .Height) }}
src="{{ .RelPermalink }}"
{{ end }}
{{ else }}
srcset="
{{ range $key, $size := $s.Get "sizes" }}
{{ ($img.Resize (printf "%dx webp" $size)).RelPermalink }} {{ $key }},
{{ end }}"
src="{{ (.Resize "660x webp").RelPermalink }}"
{{ end }}
type="image/webp"
/>
{{ end }}
<img
width="{{ .Width }}"
height="{{ .Height }}"
{{ with $class }} class="{{ . }}" {{ end }}
{{ with $alt }} alt="{{ . }}" {{ end }}
{{ with $lazy }} loading="lazy" decoding="async" {{ end }}
{{ if lt .Width 660 }}
src="{{ .RelPermalink }}"
{{ else }}
srcset="
{{ range $key, $size := $s.Get "sizes" }}
{{ if eq $size $img.Width}}
{{ $img.RelPermalink }} {{ $key }},
{{ else }}
{{ ($img.Resize (printf "%dx" $size)).RelPermalink }} {{ $key }},
{{ end }}
{{ end }}"
src="{{ (.Resize "660x").RelPermalink }}"
{{ end }}
>
</picture>
{{ end }}
{{ end }}