diff --git a/layouts/partials/image.html b/layouts/partials/image.html index b12fbe1..507a83a 100644 --- a/layouts/partials/image.html +++ b/layouts/partials/image.html @@ -6,42 +6,38 @@ Renders an image with the given class, alt, and sizes. @context {classes} classes for the image. */}} - -{{ $alt := .alt }} -{{ $image := .image }} -{{ $sizes := .sizes }} -{{ $classes := .classes }} - + {{- $alt := .alt }} + {{- $image := .image }} + {{- $sizes := .sizes }} + {{- $classes := .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 }} + + {{- $smallestWidth := index $sizes 0 }} + {{- $smallestResizeSpec := printf "%dx webp q90" $smallestWidth }} + {{- $smallest := ($image.Resize $smallestResizeSpec) }} + {{- $src := $smallest.RelPermalink }} {{ $alt }} \ No newline at end of file +>