forked from Sync/hugo-theme-stack
8dc2880a9c
Add `allowedTypes` and `resizableTypes` to `imageProcessing` configuration Prior to this commit, SVG images were not processed by `render-image.html` because SVG does not have a physical dimension like JPEG. This logic was done using a conditional. I have now realised that Hugo can be very slow when resizing `gif` images. So I created this whitelist mechanism: - `allowedTypes`: image types with width and height attributes - `resizableTypes`: image types that can be resized Here's a list of media types: bmp, gif, jpeg, png, svg+xml, tiff, webp https://gohugo.io/templates/output-formats/#media-types
46 lines
1.5 KiB
HTML
46 lines
1.5 KiB
HTML
{{- $image := .Page.Resources.GetMatch (printf "%s" (.Destination | safeURL)) -}}
|
|
{{- $Permalink := .Destination | relURL | safeURL -}}
|
|
{{- $alt := .PlainText | safeHTML -}}
|
|
{{- $Width := 0 -}}
|
|
{{- $Height := 0 -}}
|
|
{{- $Srcset := "" -}}
|
|
{{- $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 -}}
|
|
{{- $small := $image.Resize `480x` -}}
|
|
{{- $big := $image.Resize `1024x` -}}
|
|
{{- $Srcset = printf `%s 480w, %s 1024w` $small.RelPermalink $big.RelPermalink -}}
|
|
{{- end -}}
|
|
{{- end -}}
|
|
{{- end -}}
|
|
|
|
<img src="{{ $Permalink }}"
|
|
{{ with $Width }}width="{{ . }}"{{ end }}
|
|
{{ with $Height }}height="{{ . }}"{{ end }}
|
|
{{ with $Srcset }}srcset="{{ . }}"{{ 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 }}
|
|
>
|