From ddc925bfcc85f81c5dbb50f77a78534de1956131 Mon Sep 17 00:00:00 2001
From: Garry Ing <garry@chainguard.dev>
Date: Fri, 5 Apr 2024 17:07:50 -0400
Subject: [PATCH] Fix image resizing quality (#1504)

Fixes https://github.com/chainguard-dev/internal/issues/3646

## Type of change
<!-- Please be sure to add the appropriate label to your PR. -->

### What should this PR do?
- This PR brings in doks' image rendering hook at v0.4.3 here:
https://github.com/gethyas/doks/blob/cf51ea887dd12f79588f950988d0eb6c6895407f/layouts/_default/_markup/render-image.html
- With the modification of using `Lanczos` resampling filter ([Hugo
docs](https://gohugo.io/content-management/image-processing/#resampling-filter))

Signed-off-by: Garry Ing <garry@chainguard.dev>
---
 layouts/_default/_markup/render-image.html | 36 ++++++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 layouts/_default/_markup/render-image.html

diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
new file mode 100644
index 0000000000..3d2e3c7517
--- /dev/null
+++ b/layouts/_default/_markup/render-image.html
@@ -0,0 +1,36 @@
+{{ $image := "" -}}
+{{ if (urls.Parse .Destination).IsAbs }}
+  {{ $image = resources.GetRemote .Destination -}}
+{{ else -}}
+  {{ $image = .Page.Resources.GetMatch .Destination -}}
+{{ end -}}
+{{ with $image -}}
+  {{ $lqip := $image.Resize site.Params.lqipWidth -}}
+
+  {{ $imgSrc := "" -}}
+  {{ $imgSrcSet := slice -}}
+
+  {{ $widths := site.Params.landscapePhotoWidths -}}
+  {{ if gt $image.Height $image.Width -}}
+    {{ $widths = site.Params.portraitPhotoWidths -}}
+  {{ end -}}
+
+  {{ range $widths -}}
+    {{ $srcUrl := (printf "%dx Lanczos" . | $image.Resize).Permalink -}}
+    {{ if eq $imgSrc "" -}}{{ $imgSrc = $srcUrl -}}{{ end -}}
+    {{ $imgSrcSet = $imgSrcSet | append (printf "%s %dw" $srcUrl .) -}}
+  {{ end -}}
+  {{ $imgSrcSet = (delimit $imgSrcSet ",") -}}
+
+  {{ if gt $image.Width site.Params.smallLimit -}}
+    <figure class="figure">
+      <img class="figure-img img-fluid lazyload blur-up" data-sizes="auto" src="{{ $lqip.Permalink }}" data-srcset="{{ $imgSrcSet }}" width="{{ $image.Width }}" height="{{ $image.Height }}" alt="{{ $.Text }}">
+      <noscript><img class="figure-img img-fluid" sizes="100vw" srcset="{{ $imgSrcSet }}" src="{{ $image.Permalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" alt="{{ $.Text }}"></noscript>
+      {{ with $.Title }}<figcaption class="figure-caption">{{ . | safeHTML }}</figcaption>{{ end -}}
+    </figure>
+  {{ else -}}
+    <img class="img-fluid lazyload blur-up" src="{{ $lqip.Permalink }}" data-src="{{ $image.Permalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" alt="{{ $.Text }}">
+  {{ end -}}
+{{ else -}}
+  {{ erroridf "image-not-found" "Image not found" -}}
+{{ end -}}
\ No newline at end of file