Seeking leanest way to implement single instance image grid

I’m building a single-page site in Hugo for a friend.

There’s a section with an image grid fed by a partial. There could be as many as 80 images within the grid.

I’d like to range over each image source location and include data for the alt-tag.

I’m thinking I don’t need a new content type to achieve this, but am not sure how to best implement it.

Thoughts:

  1. Put a file in /data that references (a) the local image source, (b) the alt tag

  2. Use a page bundle approach to range over images, but if I do that I’m not sure where the alt-tag data would go, and how to sync the alt tag value with its respective image.

My Hugo skills are a bit above beginner, so if the leanest approach would involve complex match/slice code it would be great if you could include some refs.

Thanks very much for the help!

This is the way to go.

Have a look at Markdown Render Hooks you can combine them with Image Resources and also output any HTML you wish to create the grid.

Hint: to go higher up to the Page context from within the Markdown Render Hook template to access Page Resources you will need to use the dollar sign and the .Page variable for example: $.Page.Resources.GetMatch

1 Like

Thanks @alexandros I’ll check this out in the morrow. Didn’t know about Markdown Render Hooks until now. :slight_smile:

Also search the forum. It contains some very useful posts about the Markdown Render Hooks.

1 Like