Passing a custom parameter (eg: width) to new render-image hook?

feature
1

I currently render images with a custom {{< image .... />}} shortcode but I’d love to be able to switch to the new render-image hook to make my markdown more universal/compatible. However, I use my shortcode to process images based on a width= parameter that’s passed in. Is there a way to do that in Markdown such that a custom attribute(s) gets passed to render-image.html?

Something like ![alt text](image.jpg){width=450} instead of {{< image src="image.jpg" width="450" >}}, or maybe similar to how .Title gets passed, like ![alt text](image.jpg "Title" "width=450")? Just brainstorming… although I know it’s important to stay in line with Markdown standards too.

2

You do not need to specify the width of an image in the content file. Hugo can detect it for you.

Are you using Page Bundles? Is the contentDir identical to the assetsDir?

If the answer to one -or both- of these questions is affirmative then you should use Hugo’s Image Resources to render .Height and .Width values from within the Render Image Hook template.

Hint:
Within the image resource range entering something like $image.Width will render that value ($image stands for a variable that contains the Image Resource).

3

Sorry, I should have been more specific. I only pass width when I want to resize (downscale) an image, mainly for speed reasons (instead of going into Photoshop and manually resizing insanely large images before uploading). Otherwise, if the original doesn’t need any processing, I do simply call .Width on the image to detect its size as you suggested.

Here’s my image shortcode which I have no problem continuing to use (it’s incredibly messy/hacky though, don’t judge :wink: ) but I’m just curious if it’s possible to do the same using the new image hook.

4

I haven’t quite had the time to play with Hugo’s Image Processing from within the new Render Image Hook but I expect it to be doable.

And by the way here is another -simpler- example of generating various image sizes for responsive images:

1 Like
5

You currently cannot pass arguments to the hooks (you can encode it into the URLs if you want (“myimage.jpg?width=200px”), but that sounds hacky). CommonMark has a draft spec of attributes – Goldmark has implemented it for titles, but not for images, I think. Even if that was the case, we would need to expand the API.

You could put processing instructions in front matter (params).

2 Likes