How to reference files in a leaf bundle blog post?

support
1

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

 content/
├── posts
│   ├── post1
│   │   ├── image1.jpg
│   │   └── index.md
│   └── post2
│   │   ├── image2.jpg
│   │   └── index.md

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

![image](image1.jpg)

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!

2

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

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

should work.

3

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
4

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

5

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?)

6

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