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:
/content/posts/my-section/my-post/
index.md
images/
my-img-1.jpg
my-img-2.jpg
etc.
I’d like to understand how to reference those images from my-post at index.md. I have tried the following:
{{ with .Resources.ByType "image" }}
<div class="Image">
{{ range . }}
<img src="{{ .RelPermalink }}">
{{ end }}
</div>
{{ end }}
with no luck. Console logging shows a 404 for that image.
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 index.md 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.
