Image render hook has no access to page resources

support
1

I am trying to write an image render hook that converts the images to data-uris.

As a starting point I’ve used @bep implementation at https://github.com/bep/portable-hugo-links/blob/master/layouts/_default/_markup/render-image.html

Nevertheless my page (here branch) bundles do not find the images when using .Page.Resources.GetMatch .Destination and default back to the normal behavior.

I am using the latest Hugo version with a Goldmark renderer. The site has a multilang setup, the directory structure is:

content
├── basics
    ├── requirements
         ├── _index.en.md
         ├── magic.gif

Code is available (without the image render hook) at https://github.com/McShelby/hugo-theme-relearn

As so many others are writing about image render hooks and using page resources without having issues, I am sure I am doing something wrong - but what?

2

Do you have a branch with the render-hook? It is important for us to see the context.

We also need to see the Markdown for the image to be rendered. If you have ![alt text](/basics/requirements/magic.gif), for example it will not work because the .GetMatch is relative to the bundle (i.e. ![alt text](magic.gif) should work).

3

Here’s a branch with the image render hook https://github.com/McShelby/hugo-theme-relearn/tree/image-render-hook

The page in question is https://raw.githubusercontent.com/McShelby/hugo-theme-relearn/image-render-hook/exampleSite/content/basics/requirements/_index.en.md

4

I’ll answer myself: The reason it doesn’t work are the query-parameters in the image’s url. Removing those makes it work.

5

you can strip the query parameters from the url in the image-render hook so it’ll work whether they are there or not.

in the same way you would strip them, you could also use them in the render hook to pass arguments into various processing functions

1 Like
6

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.