aboutsummaryrefslogtreecommitdiff
path: root/themes/hugo-pt2021/layouts/shortcodes/pe-picture.html
diff options
context:
space:
mode:
authorPaul Duncan <pabs@pablotron.org>2022-01-27 22:42:17 -0500
committerPaul Duncan <pabs@pablotron.org>2022-01-27 22:42:17 -0500
commit7a9ba59529b4c8004a80bfcaa9e6add91b3ccbf4 (patch)
tree37f3def814de7c73f6e8a1af36836cac5ae8291d /themes/hugo-pt2021/layouts/shortcodes/pe-picture.html
parent4aa5a031f47d1f91d9d4295f9a87bf894b1ca3be (diff)
downloadpablotron.org-7a9ba59529b4c8004a80bfcaa9e6add91b3ccbf4.tar.bz2
pablotron.org-7a9ba59529b4c8004a80bfcaa9e6add91b3ccbf4.zip
add pe-picture and pe-figure shortcodes
Diffstat (limited to 'themes/hugo-pt2021/layouts/shortcodes/pe-picture.html')
-rw-r--r--themes/hugo-pt2021/layouts/shortcodes/pe-picture.html102
1 files changed, 102 insertions, 0 deletions
diff --git a/themes/hugo-pt2021/layouts/shortcodes/pe-picture.html b/themes/hugo-pt2021/layouts/shortcodes/pe-picture.html
new file mode 100644
index 0000000..3135fcf
--- /dev/null
+++ b/themes/hugo-pt2021/layouts/shortcodes/pe-picture.html
@@ -0,0 +1,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>