diff options
author | Paul Duncan <pabs@pablotron.org> | 2022-01-27 22:42:17 -0500 |
---|---|---|
committer | Paul Duncan <pabs@pablotron.org> | 2022-01-27 22:42:17 -0500 |
commit | 7a9ba59529b4c8004a80bfcaa9e6add91b3ccbf4 (patch) | |
tree | 37f3def814de7c73f6e8a1af36836cac5ae8291d /themes/hugo-pt2021/layouts/shortcodes/pe-figure.html | |
parent | 4aa5a031f47d1f91d9d4295f9a87bf894b1ca3be (diff) | |
download | pablotron.org-7a9ba59529b4c8004a80bfcaa9e6add91b3ccbf4.tar.bz2 pablotron.org-7a9ba59529b4c8004a80bfcaa9e6add91b3ccbf4.zip |
add pe-picture and pe-figure shortcodes
Diffstat (limited to 'themes/hugo-pt2021/layouts/shortcodes/pe-figure.html')
-rw-r--r-- | themes/hugo-pt2021/layouts/shortcodes/pe-figure.html | 104 |
1 files changed, 104 insertions, 0 deletions
diff --git a/themes/hugo-pt2021/layouts/shortcodes/pe-figure.html b/themes/hugo-pt2021/layouts/shortcodes/pe-figure.html new file mode 100644 index 0000000..324d11f --- /dev/null +++ b/themes/hugo-pt2021/layouts/shortcodes/pe-figure.html @@ -0,0 +1,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> |