hugo-theme-stack/layouts/_default/_markup/render-image.html
Jimmy Cai 47a57a2ad2 feat: avoid image upscaling during image processing
There's now a threshold for each scenario. Images less than x width will not be processed.
2023-10-21 18:24:52 +02:00

53 lines
1.8 KiB
HTML

{{- $image := .Page.Resources.GetMatch (printf "%s" (.Destination | safeURL)) -}}
{{- $Permalink := .Destination | relURL | safeURL -}}
{{- $alt := .PlainText | safeHTML -}}
{{- $Width := 0 -}}
{{- $Height := 0 -}}
{{- $Srcset := slice -}}
{{- $imageProcessing := .Page.Site.Params.imageProcessing.content.enabled -}}
{{- $allowedTypes := .Page.Site.Params.ImageProcessing.AllowedTypes -}}
{{- $resizableTypes := .Page.Site.Params.ImageProcessing.ResizableTypes -}}
{{- $galleryImage := false -}}
{{- if $image -}}
{{- $type := $image.MediaType.SubType -}}
{{- $allowed := in $allowedTypes $type -}}
{{- $resizable := in $resizableTypes $type -}}
{{- $imageProcessing := and $imageProcessing $resizable -}}
{{- $Permalink = $image.RelPermalink -}}
{{- if $allowed -}}
{{- $Width = $image.Width -}}
{{- $Height = $image.Height -}}
{{- $galleryImage = true -}}
{{- if $imageProcessing -}}
{{- $keys := slice "small" "big" -}}
{{- range $keys -}}
{{- with (index $.Page.Site.Params.ImageProcessing.Content .) -}}
{{- if gt $Width .Threshold -}}
{{- $resized := $image.Resize (printf "%dx" .Width) -}}
{{- $Srcset = $Srcset | append (printf `%s %dw` $resized.RelPermalink .Width) -}}
{{- end -}}
{{- end -}}
{{- end -}}
{{- $Srcset = $Srcset | append (printf `%s %dw` $Permalink $Width) -}}
{{- end -}}
{{- end -}}
{{- end -}}
<img src="{{ $Permalink }}"
{{ with $Width }}width="{{ . }}"{{ end }}
{{ with $Height }}height="{{ . }}"{{ end }}
{{ with $Srcset }}srcset="{{ delimit . `, ` }}"{{ end }}
loading="lazy"
{{ with $alt }}
alt="{{ . }}"
{{ end }}
{{ if $galleryImage }}
class="gallery-image"
data-flex-grow="{{ div (mul $image.Width 100) $image.Height }}"
data-flex-basis="{{ div (mul $image.Width 240) $image.Height }}px"
{{ end }}
>