You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
47 lines
1.7 KiB
47 lines
1.7 KiB
{{- /*
|
|
Renders an image with the given class, alt, and sizes.
|
|
@contetx {alt} alt text for the image.
|
|
@context {image} the image resource.
|
|
@context {sizes} each size to include in the srcset.
|
|
@context {classes} classes for the image.
|
|
*/}}
|
|
|
|
|
|
{{ $alt := .alt }}
|
|
{{ $image := .image }}
|
|
{{ $sizes := .sizes }}
|
|
{{ $classes := .classes }}
|
|
|
|
<img class="{{ delimit $classes " " }}"
|
|
{{ $srcsetParts := slice }}
|
|
{{ $sizesParts := slice }}
|
|
{{ $len := len $sizes }}
|
|
|
|
{{/* Loop through widths to resize images and build attributes */}}
|
|
{{ range $index, $width := $sizes }}
|
|
{{ $resizeSpec := printf "%dx webp q90" $width }}
|
|
{{ $resized := ($image.Resize $resizeSpec) }}
|
|
|
|
{{ $srcsetParts = $srcsetParts | append (printf "%s %dw" $resized.RelPermalink $width) }}
|
|
|
|
{{/* Build sizes: media query for all but the last width */}}
|
|
{{ if lt $index (sub $len 1) }}
|
|
{{ $nextWidth := index $sizes (add $index 1) }}
|
|
{{ $sizesParts = $sizesParts | append (printf "(max-width: %dpx) %dpx" $nextWidth $width) }}
|
|
{{ else }}
|
|
{{ $sizesParts = $sizesParts | append (printf "%dpx" $width) }}
|
|
{{ end }}
|
|
{{ end }}
|
|
|
|
{{/* Set src to the smallest image */}}
|
|
{{ $smallestWidth := index $sizes 0 }}
|
|
{{ $smallestResizeSpec := printf "%dx webp q90" $smallestWidth }}
|
|
{{ $smallest := ($image.Resize $smallestResizeSpec) }}
|
|
{{ $src := $smallest.RelPermalink }}
|
|
|
|
{{/* Output attributes */}}
|
|
src="{{ $src }}"
|
|
srcset="{{ delimit $srcsetParts ", " }}"
|
|
sizes="{{ delimit $sizesParts ", " }}"
|
|
alt="{{ $alt }}"
|
|
>
|