blob: 3135fcfd76b5d4c7ea10e1c235a8cd48db1833c2 (
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
|
{{/*
https://github.com/pablotron/hugo-shortcode-ppic
Custom Hugo table shortcode which renders progressive picture elements
from front matter data.
This short code exists because the figure shortcode in Hugo does not
support the picture element and does not support progressive image
enhancement.
Features:
... TODO ...
*/}}
{{/* 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 -}}
<picture
id='{{- $pic.id -}}'
class='{{- $pic.css -}}'
title='{{- $pic.tip -}}'
>
{{- 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>
|
