diff options
| -rw-r--r-- | themes/hugo-pt2021/README.md | 1 | ||||
| -rw-r--r-- | themes/hugo-pt2021/layouts/shortcodes/pe-figure.html | 104 | ||||
| -rw-r--r-- | themes/hugo-pt2021/layouts/shortcodes/pe-picture.html | 102 |
3 files changed, 207 insertions, 0 deletions
diff --git a/themes/hugo-pt2021/README.md b/themes/hugo-pt2021/README.md index a2063de..29e89e8 100644 --- a/themes/hugo-pt2021/README.md +++ b/themes/hugo-pt2021/README.md @@ -1,2 +1,3 @@ bulma-0.9.3 icons from feathericons https://feathericons.com/?query=key +includes hugo-shortcode-table and hugo-shortcode-pe 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> 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> |