Page Bundle Image References

Hi all,

I am having trouble understanding page bundle content organization and would appreciate any guidance / explanation you are able to give. I am trying to transition from using static/images/ to store my images to using page bundles (both because I’d like to use image processing shortcodes and because page bundles seem cleaner as a longterm organizational strategy). I am using Hugo v.0.36.1.

Currently, I have one page organized as follows:


I’d like to understand how to reference those images from my-post at I have tried the following:

{{ with .Resources.ByType "image" }}
    <div class="Image">
    {{ range . }}
        <img src="{{ .RelPermalink }}">
    {{ end }}
{{ end }}

with no luck. Console logging shows a 404 for that image.

What am I doing wrong here?


Try {{ with .Page.Resources.ByType "image" }}

No luck there either. In both cases, I am having the page render the shortcodes out:

Does this help diagnose my issue?

UNTESTED: But considering all your images are in it’s own folder I’d try {{ with .Page.Resources.Match "images/*" }} that should at least grab all the images in that folder.

@regis has a great article on Page Resources that helped me out a lot. Worth checking out if you havent already.


Ahh, that article does help! My issue was simple: I was trying to run my code in my file rather than in the single.html template.

Will I have to build a shortcode which loads and displays images from page bundles in my markdown files? Or is there a built-in (or add-on) shortcode that can load images from page bundles? For example, could I use the figure shortcode with my page bundled images?

I am currently using Hugo Easy Gallery to display images, and appreciate being able to create figures and galleries with shortcodes. I usually want to display images in specific positions throughout my posts, so hard-coding the location of images in my single.html file is not ideal.

Thanks again for the guidance!

1 Like

If you want to run it from the markdown file, yes, make a shortcode. Template codes won’t parse directly in a markdown file.