d3vyce/blog
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: image process

Browse Source
This commit is contained in:
d3vyce 2024-02-18 17:40:53 +01:00
parent aab56d680d
commit ebaff0c72c
1 changed files with 39 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
layouts/_default/_markup/render-image.html Normal file
View File

@ -0,0 +1,39 @@
<picture>
{{- $destination := .Destination -}}
{{- $extension := path.Ext $destination -}}
{{- $resources := .Page.Resources -}}
{{- $avifPath:= replace $destination $extension ".avif" -}}
{{- $avifPathDark:= replace $destination $extension "-dark.avif" -}}
{{- $webpPath:= replace $destination $extension ".webp" -}}
{{- $webpPathDark:= replace $destination $extension "-dark.webp" -}}
{{- $pathDark:= replace $destination $extension (print "-dark" $extension) -}}
{{- $altText := .Text -}}
{{- with $resources.GetMatch $avifPath -}}
<source srcset="{{- $avifPath -}}" type="image/avif" {{- with $resources.GetMatch $avifPathDark -}} media="(prefers-color-scheme: light)" {{- end -}} >
{{- end -}}
{{- with $resources.GetMatch $avifPathDark -}}
<source srcset="{{- $avifPathDark -}}" type="image/avif" {{- with $resources.GetMatch $avifPath -}} media="(prefers-color-scheme: dark)" {{- end -}}>
{{- end -}}
{{- with $resources.GetMatch $webpPath -}}
<source srcset="{{- $webpPath -}}" type="image/webp" {{- with $resources.GetMatch $webpPathDark -}} media="(prefers-color-scheme: light)" {{- end -}} >
{{- end -}}
{{- with $resources.GetMatch $webpPathDark -}}
<source srcset="{{- $webpPathDark -}}" type="image/webp" {{- with $resources.GetMatch $webpPath -}} media="(prefers-color-scheme: dark)" {{- end -}}>
{{- end -}}
{{- with $resources.GetMatch $pathDark -}}
<source srcset="{{- $pathDark -}}" media="(prefers-color-scheme: dark)">
{{- end -}}
{{- with $resources.GetMatch $destination -}}
<img
src="{{- .Permalink -}}"
alt="{{- $altText -}}"
loading="lazy"
decoding="async"
width="{{- .Width -}}"
height="{{- .Height -}}"
/>
{{- end -}}
</picture>