Hugo

Finger-printing image from leaf bundle

I’m trying to add img fingerprinting for cache-busting. The images are associated w/only a single page (in a leaf bundle), so I thought I would imply wrap img inside a shortcode that does fingerprinting, e.g.

 {{< img "logos.gif" >}}

This seems to be straight-forward, and there’s an existing post suggesting that its possible:

However, I get an error when piping the page resource into resources.Fingerprint:
shortcodes/img.html:8:41: executing "shortcodes/img.html" at <resources.Fingerprint>: error calling Fingerprint: resource.Resources is not a Resource.

Is the thinking pipelines can only be used to transform files in assets, moving them to resources/_gen?

Here’s my shortcode:

{{- $imgPath:= .Get 0 -}}
{{- $alt:= .Get 1 -}}
{{- $classes:= .Get 2 -}}
{{- $longDesc:= .Get 3 -}}

{{ $imgPathResArr := .Page.Resources.Match $imgPath }}
{{ $imgPathRes := first 1 $imgPathResArr }}
{{ $imgPathRes =  $imgPathRes | resources.Fingerprint  }}
{{ $imgPathRes }}
<img src="{{$imgPath}}"
     {{if $alt}}alt="{{$alt}}"{{end}}
     {{if $classes}}classes="{{$classes}}"{{end}}
     {{if $longDesc}}$longDesc="{{$longDesc}}"{{end}}
/>

Nevermind. I wasn’t extracting the array correctly; used first instead of index. Now it works fine!

But it begs this question: is there a better approach? This method essentially duplicates all the images into build (one copy w/o fingerprint, and one copy with).

{{- $imgPath:= .Get 0 -}}
{{- $alt:= .Get 1 -}}
{{- $classes:= .Get 2 -}}
{{- $longDesc:= .Get 3 -}}

{{ $imgPathResArr := .Page.Resources.Match $imgPath }}
{{- /* extract from array */ -}}
{{ $imgPathRes := index  $imgPathResArr 0 }}
{{ $imgPathRes =  $imgPathRes | resources.Fingerprint  }}

<img src="{{$imgPathRes.RelPermalink}}"
     {{if $alt}}alt="{{$alt}}"{{end}}
     {{if $classes}}classes="{{$classes}}"{{end}}
     {{if $longDesc}}$longDesc="{{$longDesc}}"{{end}}
/>

Yes, that is the current behaviour for bundled resources (we assume they are linked to, so to speak).

The only current workaround is to put the images inside /assets and load them with resources.Match etc.