Viel

layouts/partials/img.html

@@ -0,0 +1,25 @@
+{{/*
+  Responsives Bild aus static/img (über assets/img gemountet).
+  Parameter: src (z. B. "/img/about/Olly_compressed.jpg"), alt, sizes, widths, class, eager
+*/}}
+{{- $src := .src -}}
+{{- $alt := .alt | default "" -}}
+{{- $sizes := .sizes | default "100vw" -}}
+{{- $widths := .widths | default (slice 480 960 1600) -}}
+{{- $loading := cond (.eager | default false) "eager" "lazy" -}}
+{{- $r := resources.Get (strings.TrimPrefix "/" $src) -}}
+{{- if and $r (in (slice ".jpg" ".jpeg" ".png") (lower (path.Ext $src))) -}}
+  {{- $set := slice -}}
+  {{- $fallback := "" -}}
+  {{- range $widths -}}
+    {{- if le . $r.Width -}}
+      {{- $img := $r.Resize (printf "%dx webp q78" .) -}}
+      {{- $set = $set | append (printf "%s %dw" $img.RelPermalink $img.Width) -}}
+      {{- $fallback = $img -}}
+    {{- end -}}
+  {{- end -}}
+  {{- if not $fallback -}}{{- $fallback = $r -}}{{- end -}}
+  <img src="{{ $fallback.RelPermalink }}"{{ with $set }} srcset="{{ delimit . ", " }}" sizes="{{ $sizes }}"{{ end }} width="{{ $r.Width }}" height="{{ $r.Height }}" alt="{{ $alt }}" loading="{{ $loading }}" decoding="async"{{ with $.class }} class="{{ . }}"{{ end }}>
+{{- else -}}
+  <img src="{{ $src }}" alt="{{ $alt }}" loading="{{ $loading }}"{{ with .class }} class="{{ . }}"{{ end }}>
+{{- end -}}