How to reference files in a leaf bundle blog post?

I’m building a blog and bundling images and other files with their respective posts like so:

├── posts
│   ├── post1
│   │   ├── image1.jpg
│   │   └──
│   └── post2
│   │   ├── image2.jpg
│   │   └──

In each of the files, for post1 and post2, what syntax should I use to embed image1.jpg and image2.jpg? When I use this:


The result works on the dedicated post1/post2 pages but not on my homepage which displays recent blog posts in a column. In the latter case the filepath is broken.

I’m struggling to find a clear answer in the documentation — I have a sense that it should involve relURL but can’t figure out the syntax. Thanks!

I think the relref/ref-shortcodes are better suited:

![image]({{< ref "image1.jpg" >}})

should work.

When I try that shortcode, I get an error:

[en] REF_NOT_FOUND: Ref "image1.jpg":

…and the build fails on the localhost server.

1 Like

Please have a look at the Markdown Render Hooks Templates and the Image Resource

Also here is a Simple Render Hook Template for Responsive Images

On the homepage you can render a Page Bundle image with standard Hugo List Page Templates

I was able to get this to work by adapting Laura Kalbag’s img shortcode: Laura Kalbag – Processing Responsive Images with Hugo

It seems like this is not incredibly clear in the Hugo documentation (I keep finding that I have to refer to other ppl’s guides to get answers I can understand, maybe Hugo is just too advanced for me?)

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