themes/squirrel
themes/squirrel
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

CHANGE image handling, ADD partials to reuse structure, REFACTOR

Browse source
This commit is contained in:
Hoernschen 2025-04-17 16:22:33 +02:00
parent 1265491dee
commit 01dcf04b8a
Signed by: hoernschen
GPG key ID: 37591FAF4E6D3462
36 changed files with 1181 additions and 864 deletions
Download patch file Download diff file Expand all files Collapse all files

90
layouts/partials/components/image.html Normal file
View file

@ -0,0 +1,90 @@
<!--
id: string
style: string - default empty
url: string
alt: string
caption: string
width: int
height: int
-->
{{ $sizes := slice "320" "640" "960" "1280" }}
{{ $mediaWidthControl := "(max-width: 360px) 320px, (max-width: 680px) 640px, (max-width: 1100px) 960px, 1280px" }}
{{ $id := .id }}
{{ $style := .style }}
{{ $alt := .alt }}
{{ $caption := .caption }}
{{ $width := .width }}
{{ $height := .height }}
{{ $img := .Page.Resources.GetMatch .url }}
{{ if not $img }}
{{ $img = resources.Get .url }}
{{ if not $img }}
{{ $img := resources.GetRemote .url | resources.Copy (path.Join "images" (path.Base .url )) }}
{{ end }}
{{ end }}
{{ with $img }}
{{ $url := .RelPermalink }}
{{ $type := .MediaType.SubType }}
{{ $ext := path.Ext $url }}
{{ $name := path.Base (replace $url $ext "") }}
{{ $dir := path.Dir $url }}
{{ if eq $type "svg" }}
<img
id="{{ $id }}"
class="{{ $style }}"
src="{{ $url }}"
alt="{{ $alt }}"
loading="lazy"
decoding="async"
>
{{ else }}
<picture>
<source
type="image/avif"
srcset="
{{ range $i, $size := $sizes }}
{{ $dir }}/{{ $name }}-{{ $size }}{{ $ext }}.avif {{ $size }}w,
{{ end }}
{{ $url }}.avif {{ $width | default .Width }}w
"
sizes="{{ $mediaWidthControl }}"
/>
<source
type="image/webp"
srcset="
{{ range $i, $size := $sizes }}
{{ $dir }}/{{ $name }}-{{ $size }}{{ $ext }}.webp {{ $size }}w,
{{ end }}
{{ $url }}.webp {{ $width | default .Width }}w
"
sizes="{{ $mediaWidthControl }}"
/>
<img
id="{{ $id }}"
class="{{ $style }}"
width="{{ $width | default .Width }}"
height="{{ $height | default .Height }}"
srcset="
{{ range $i, $size := $sizes }}
{{ $dir }}/{{ $name }}-{{ $size }}{{ $ext }} {{ $size }}w,
{{ end }}
{{ $url }} {{ $width | default .Width }}w
"
src="{{ $url }}"
alt="{{ $alt }}"
loading="lazy"
decoding="async"
>
</picture>
{{ end }}
{{ if $caption }}
<p class="caption">{{ $caption }}</p>
{{ end }}
{{ end }}
{{/* https://www.brycewray.com/posts/2023/05/better-code-image-processing-hugo-render-hook-edition/ */}}