Fingerprinting image assets with pure markdown templates?

[searls]

Hello! Long-time Hugo user and generally Big Fan™, but first time posting to the forum.

I have a site that is being maintained with Netlify CMS (both for uploading images and for editing markdown with a WYSWIG), so that’s a constraint I’m under.

One of the things I’d like is fingerprinting images that are defined in markdown content pages (e.g. ![](/some/path/test-image.jpg), where the image file resides in assets/some/path/test-image.jpg). I need to specify the images this way (as opposed to with a shortcode), because WYSIWIG markdown editors can help users upload and set images in markdown, but don’t know anything about Hugo specific templating.

I expected this to work with Hugo scanning markdown for image syntax and then doing a Resources.Get under the covers such that the file reference is detected at build-time and a fingerprint is automatically added to the asset and the URL updated in the resulting HTML.

But as far as I can tell is that none of this happens, and if you want fingerprints on images referenced in markdown posts, you must break out of pure markdown and use a shortcode.

Am I way off base here or is this a thing Hugo doesn’t do?

[sephore]

I don’t know much about Netlify CMS, but couldn’t markdown render hooks be an option?

[searls]

Oh yeah? I read the docs but I’m still a little fuzzy on where to start here — does anyone have an example of this used on images? I suspect most sites would have pretty similar operations

[sephore]

Uh? There’s an example of render-image.html being used. You would only need to pipe the .Destination. Something like:

{{ $title := .Title }}
{{ $altTxt := .Text }}

{{ with resources.GetMatch .Destination }}
  <img src="{{ (. | fingerprint).Permalink }}" alt="{{ $altTxt }}" {{ with $title }} title="{{ . }}"{{ end }} />
{{ end }}

Can’t really give you an exact answer since I don’t know your project structure.

In this example, ![Some image.](img/some-image.jpg) is picking the assets/img/some-image.jpg, processing and rendering the image file with the fingerprint.