Finger-printing image from leaf bundle

[Scott_Talsma]

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:

Fingerprint for images (how?)

Howdy there! I’m scratching my head trying to figure out the way to setup and use the fingerprint feature for my website images. I’ve gone through the docs already looking for the answer and while it does mentions images and fingerprinting, it does so very briefly, only showing a real use case for stylesheets (much appreciate for that one!) Can someone lend a hand please? Thanks in advance. Cheers!

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}}
/>

[Scott_Talsma]

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}}
/>

[bep]

@Scott_Talsma

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).

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.