1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-12-27 10:52:09 +00:00
seirdy.one/layouts/shortcodes/picture.html
Rohan Kumar 1aed7a66d4
Switch to XHTML5 markup
The site now has polygot markup and can handle both XHTML5 and HTML5
parsing rules. My staging site will be XHTML but my main site will be
HTML5, just in case of parse errors.

If other tools (e.g. LightHouse) end up supporting XHTML5, I'll consider
switching the content-type to XHTML.
2022-05-30 17:39:45 -07:00

96 lines
3.4 KiB
HTML

{{ $light_svg := resources.GetMatch (printf "/p/%s.svg" (.Get "name")) -}}
{{ $light_png := resources.GetMatch (printf "/p/%s.png" (.Get "name")) -}}
{{ $light_webp := resources.GetMatch (printf "/p/%s.webp" (.Get "name")) -}}
{{ $light_avif := resources.GetMatch (printf "/p/%s.avif" (.Get "name")) -}}
{{ $light_jxl := resources.GetMatch (printf "/p/%s.jxl" (.Get "name")) -}}
{{ $dark_svg := resources.GetMatch (printf "/p/%s_dark.svg" (.Get "name")) -}}
{{ $dark_png := resources.GetMatch (printf "/p/%s_dark.png" (.Get "name")) -}}
{{ $dark_webp := resources.GetMatch (printf "/p/%s_dark.webp" (.Get "name")) -}}
{{ $dark_avif := resources.GetMatch (printf "/p/%s_dark.avif" (.Get "name")) -}}
{{ $dark_jxl := resources.GetMatch (printf "/p/%s_dark.jxl" (.Get "name")) -}}
{{- $img_width := $light_png.Width -}}
{{- $img_height := $light_png.Height -}}
{{- with (.Get "sf") -}}
{{- $img_width = (mul $img_width . | math.Round) -}}
{{- $img_height = (mul $img_height . | math.Round ) -}}
{{- end -}}
<picture>
{{ with $dark_svg -}}
{{ $dark_svg_src := . | resources.Fingerprint "md5" -}}
<source
srcset="{{ $dark_svg_src.RelPermalink }}"
type="image/svg+xml"
media="screen and (prefers-color-scheme: dark)" />
{{ end -}}
{{ with $dark_jxl -}}
{{ $dark_jxl_src := . | resources.Fingerprint "md5" -}}
<source
srcset="{{ $dark_jxl_src.RelPermalink }}"
type="image/jxl"
media="screen and (prefers-color-scheme: dark)" />
{{ end -}}
{{ with $dark_avif -}}
{{ $dark_avif_src := . | resources.Fingerprint "md5" -}}
<source
srcset="{{ $dark_avif_src.RelPermalink }}"
type="image/avif"
media="screen and (prefers-color-scheme: dark)" />
{{ end -}}
{{ with $dark_webp -}}
{{ $dark_webp_src := . | resources.Fingerprint "md5" -}}
<source
srcset="{{ $dark_webp_src.RelPermalink }}"
type="image/webp"
media="screen and (prefers-color-scheme: dark)" />
{{ end -}}
{{ with $dark_png -}}
{{ $dark_png_src := . | resources.Fingerprint "md5" -}}
<source
srcset="{{ $dark_png_src.RelPermalink }}"
type="image/png"
media="screen and (prefers-color-scheme: dark)" />
{{ end -}}
{{ with $light_svg -}}
{{ $light_svg_src := . | resources.Fingerprint "md5" -}}
<source
srcset="{{ $light_svg_src.RelPermalink }}"
type="image/svg+xml" />
{{ end -}}
{{ with $light_jxl -}}
{{ $light_jxl_src := . | resources.Fingerprint "md5" -}}
<source
srcset="{{ $light_jxl_src.RelPermalink }}"
type="image/jxl" />
{{ end -}}
{{ with $light_avif -}}
{{ $light_avif_src := . | resources.Fingerprint "md5" -}}
<source
srcset="{{ $light_avif_src.RelPermalink }}"
type="image/avif" />
{{ end -}}
{{ with $light_webp -}}
{{ $light_webp_src := . | resources.Fingerprint "md5" -}}
<source
srcset="{{ $light_webp_src.RelPermalink }}"
type="image/webp" />
{{ end -}}
{{ $light_png_src := $light_png | resources.Fingerprint "md5" -}}
<source
srcset="{{ $light_png_src.RelPermalink }}"
type="image/png" />
<img{{ with .Get "class" }} class="{{ . }}"{{ end }}
width="{{ $img_width }}" height="{{ $img_height }}"
src="{{ $light_png.RelPermalink }}" alt='{{ .Get "alt" }}'
{{ with .Parent -}}
{{ if eq .Name "transcribed-image-figure" -}}
{{ with .Get "id" -}}
aria-describedby="transcript-{{ . }}"
{{ end -}}
{{ end -}}
{{ if or (eq .Name "image-figure") (eq .Name "transcribed-image-figure") -}}
itemprop="contentUrl url"
{{ end -}}
{{- end -}}
decoding="async" />
</picture>{{- /* Strip trailing newline: https://github.com/gohugoio/hugo/issues/1753 */ -}}