pipeline
47 lines
2.1 KiB
HTML
47 lines
2.1 KiB
HTML
{{- /* responsive-image.html — safe image renderer.
|
|
Resize/Fit only work on raster resources (png/jpg/webp/gif). This partial:
|
|
- resizes + builds srcset for raster Hugo resources,
|
|
- falls back to a plain <img> for SVG resources or static paths,
|
|
- falls back to a CSS gradient placeholder when nothing resolves.
|
|
A missing image can therefore NEVER break the build.
|
|
|
|
Call with a dict. Provide ONE of:
|
|
resource : a Hugo resource (assets/ or page bundle), OR
|
|
src : a string path (e.g. "/images/logo.svg")
|
|
Optional: alt, class, loading ("lazy"|"eager"), sizes, widths (slice of ints). */ -}}
|
|
{{- $r := .resource -}}
|
|
{{- $src := .src -}}
|
|
{{- $alt := .alt | default "" -}}
|
|
{{- $class := .class | default "" -}}
|
|
{{- $loading := .loading | default "lazy" -}}
|
|
{{- $sizes := .sizes | default "100vw" -}}
|
|
{{- $widths := .widths | default (slice 400 800 1200) -}}
|
|
|
|
{{- if $r -}}
|
|
{{- $sub := $r.MediaType.SubType -}}
|
|
{{- if in (slice "png" "jpg" "jpeg" "webp" "gif") $sub -}}
|
|
{{- $ow := $r.Width -}}
|
|
{{- $srcset := slice -}}
|
|
{{- range $widths -}}
|
|
{{- if le . $ow -}}
|
|
{{- $img := $r.Resize (printf "%dx" .) -}}
|
|
{{- $srcset = $srcset | append (printf "%s %dw" $img.RelPermalink $img.Width) -}}
|
|
{{- end -}}
|
|
{{- end -}}
|
|
{{- $fallback := $r -}}
|
|
{{- if gt $ow 1200 -}}{{- $fallback = $r.Resize "1200x" -}}{{- end -}}
|
|
<img
|
|
src="{{ $fallback.RelPermalink }}"
|
|
{{ with $srcset }}srcset="{{ delimit . ", " }}" sizes="{{ $sizes }}"{{ end }}
|
|
width="{{ $fallback.Width }}" height="{{ $fallback.Height }}"
|
|
alt="{{ $alt }}" loading="{{ $loading }}" decoding="async"
|
|
{{ with $class }}class="{{ . }}"{{ end }}>
|
|
{{- else -}}
|
|
<img src="{{ $r.RelPermalink }}" alt="{{ $alt }}" loading="{{ $loading }}" decoding="async"{{ with $class }} class="{{ . }}"{{ end }}>
|
|
{{- end -}}
|
|
{{- else if $src -}}
|
|
<img src="{{ $src | relURL }}" alt="{{ $alt }}" loading="{{ $loading }}" decoding="async"{{ with $class }} class="{{ . }}"{{ end }}>
|
|
{{- else -}}
|
|
<div class="img-placeholder {{ $class }}" role="img" aria-label="{{ $alt }}"></div>
|
|
{{- end -}}
|