forked from jpanther/congo
/
picture.html
112 lines (111 loc) · 3.9 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
100
101
102
103
104
105
106
107
108
109
110
111
112
{{ $img := .img }}
{{ $alt := .alt }}
{{ $class := .class }}
{{ $lazy := .lazy | default $.Page.Site.Params.enableImageLazyLoading | default true }}
{{ $webp := .webp | default $.Page.Site.Params.enableImageWebp | default true }}
{{ $lqip := .lqip | default false }}
{{ $x2 := .x2 | default false }}
{{ 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 }}
<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 }}
>
{{ $width := .Width }}
{{ $height := .Height }}
{{ if $x2 }}
{{ $width = div .Width 2 }}
{{ $height = div .Height 2 }}
{{ end }}
{{ if $webp }}
<source
{{ if lt .Width 660 }}
{{ with .Resize (printf "%dx%d webp" .Width .Height) }}
src="{{ .RelPermalink }}"
{{ end }}
{{ else }}
srcset="
{{- (.Resize "330x webp").RelPermalink }} 330w,
{{- (.Resize "660x webp").RelPermalink }} 660w
{{ if gt .Width 1024 }}
,{{ (.Resize "1024x webp").RelPermalink }} 1024w
{{ else }}
{{ with .Resize (printf "%dx%d webp" .Width .Height) }}
,{{ .RelPermalink }} {{ .Width }}w
{{ end }}
{{ end }}
{{ if gt .Width 1320 }}
,{{ (.Resize "1320x webp").RelPermalink }} 2x
{{ else }}
{{ with .Resize (printf "%dx%d webp" .Width .Height) }}
,{{ .RelPermalink }} {{ .Width }}w
{{ end }}
{{ end }}"
src="{{ (.Resize "660x webp").RelPermalink }}"
{{ end }}
type="image/webp"
/>
{{ end }}
<img
src="{{ .RelPermalink }}"
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="
{{- (.Resize "330x").RelPermalink }} 330w,
{{- (.Resize "660x").RelPermalink }} 660w
{{ if gt .Width 1024 }}
,{{ (.Resize "1024x").RelPermalink }} 1024w
{{ else }}
,{{ .RelPermalink }} {{ .Width }}w
{{ end }}
{{ if gt .Width 1320 }}
,{{ (.Resize "1320x").RelPermalink }} 2x
{{ else }}
,{{ .RelPermalink }} {{ .Width }}w
{{ end }}"
src="{{ (.Resize "660x").RelPermalink }}"
{{ end }}
>
</picture>
{{ end }}
{{ end }}