Skip to content

Commit

Permalink
Fix image resizing quality (chainguard-dev#1504)
Browse files Browse the repository at this point in the history
Fixes chainguard-dev/internal#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 <[email protected]>
  • Loading branch information
garrying authored Apr 5, 2024
1 parent 2877ad6 commit ddc925b
Showing 1 changed file with 36 additions and 0 deletions.
36 changes: 36 additions & 0 deletions layouts/_default/_markup/render-image.html
Original file line number Diff line number Diff line change
@@ -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 -}}

0 comments on commit ddc925b

Please sign in to comment.