blob: 324d11f20bb58f19b1f8957d138e945f15c696e8 (
plain)
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
|
{{/*
https://github.com/pablotron/hugo-shortcode-ppic
Custom Hugo table shortcode which renders figure elements that support
progressive enhancement.
This short code exists because the figure shortcode in Hugo does not
support the picture element and does not support progressive image
enhancement.
*/}}
{{/* image mime types */}}
{{- $MIME_TYPES := (dict ".webp" "image/webp" ".avif" "image/avif" ".png" "image/png") -}}
{{/* get picture data */}}
{{- $pic := (index $.Page.Params "pics" (.Get 0)) -}}
{{- if (reflect.IsSlice $pic) -}}
{{- $pic = (dict "sources" $pic) -}}
{{- end -}}
<figure
id='{{- $pic.id -}}'
class='{{- $pic.css -}}'
title='{{- $pic.tip -}}'
>
<picture>
{{- if $pic.sources -}}
{{/* get source count */}}
{{- $num_sources := len $pic.sources -}}
{{/* render sources */}}
{{- range $x, $src := $pic.sources -}}
{{- $is_map := reflect.IsMap $src -}}
{{- if $is_map -}}
{{/* source is a map, reference keys */}}
{{- if (lt $x (sub $num_sources 1)) -}}
{{/* emit source tag */}}
<source
{{if $src.src}} src='{{- $src.src -}}'{{- end}}
{{if $src.srcset}} srcset='{{- $src.srcset -}}'{{- end}}
{{if $src.media}} media='{{- $src.media -}}'{{- end}}
{{if $src.type}}
type='{{- $src.type -}}'
{{else}}
{{/* get file extension */}}
{{- $ext := path.Ext $src.srcset -}}
{{if (index $MIME_TYPES $ext)}}
type='{{- index $MIME_TYPES $ext -}}'
{{end}}
{{- end}}
{{if (or $pic.tip $src.tip)}} title='{{- default $pic.tip $src.tip -}}'{{- end}}
{{if (or $pic.tip $src.tip)}} alt='{{- default $pic.tip $src.tip -}}'{{- end}}
/>
{{- else -}}
{{/* emit img tag */}}
<img
{{if $src.src}} src='{{- $src.src -}}'{{- end}}
{{if $src.srcset}} srcset='{{- $src.srcset -}}'{{- end}}
{{if $src.css}} class='{{- $src.css -}}'{{- end}}
{{if $src.width}} width='{{- $src.width -}}'{{- end}}
{{if $src.height}} height='{{- $src.height -}}'{{- end}}
{{if (or $pic.tip $src.tip)}} alt='{{- default $pic.tip $src.tip -}}'{{- end}}
/>
{{- end -}}
{{- else -}}
{{/* src is a string */}}
{{- if (lt $x (sub $num_sources 1)) -}}
{{/* emit source */}}
{{/* get file extension */}}
{{- $ext := path.Ext $src -}}
<source
srcset='{{- $src -}}'
{{/* determine type from extension */}}
{{if (index $MIME_TYPES $ext) -}}
type='{{- index $MIME_TYPES $ext -}}'
{{- end -}}
/>
{{- else -}}
{{/* emit img */}}
<img
src='{{- $src -}}'
{{if $pic.tip}} alt='{{- $pic.tip -}}'{{end}}
/>
{{- end -}}
{{- end -}}
{{- end -}}
{{- end -}}
</picture>
<figcaption>
<p>{{- $pic.tip -}}</p>
</figcaption>
</figure>
|
