Images relative to a page bundle

support
1

@jmooring I have tried the render hook that you posted, thank you for this. But I was not able to use a page bundle relative image. Using ![my-image](../image.png) inside tls.md, I get to the “Unable to get the image …/image.png. See …” error.

My page structure is as follows:

content
├── _index.md
└── docs
    └── reference
        ├── infrastructure
        │   ├── _index.md
        │   ├── image.png
        │   └── tls.md

Related but somewhat intriguing is that I have to reference the image relatively one level up (../) to get an image render in vanilla hugo.

2

Explanation

Let’s look at the content structure:

content/
├── docs/
│   ├── reference/
│   │   ├── infrastructure/
│   │   │   ├── _index.md  <-- page bundle (branch)
│   │   │   ├── image.png  <-- part of the branch bundle
│   │   │   └── tls.md     <-- not a page bundle         
│   │   └── _index.md
│   └── _index.md
└── _index.md

So, from a page resource perspective, image.png is not related to tls.md.

Correct. Without creating a leaf bundle, or without a render hook that looks for resources in its parent branch bundle, you have to link one level up. Why?

Without a render hook, markdown link and image destinations are just dumb URLs. When we publish your example site, look at the structure:

public/
├── docs/
│   ├── reference/
│   │   ├── infrastructure/
│   │   │   ├── tls/
│   │   │   │   └── index.html  <-- from here you need to go one level up
│   │   │   ├── image.png
│   │   │   └── index.html
│   │   └── index.html
│   └── index.html
├── favicon.ico
└── index.html

Solution 1

Make tls.md a leaf bundle, and make image.png a resource of the leaf bundle.

content/
├── docs/
│   ├── reference/
│   │   ├── infrastructure/
│   │   │   ├── tls/
│   │   │   │   ├── image.png
│   │   │   │   └── index.md  <-- any directory with an index.md file is a leaf bundle
│   │   │   └── _index.md
│   │   └── _index.md
│   └── _index.md
└── _index.md

When published your site has this structure:

public/
├── docs/
│   ├── reference/
│   │   ├── infrastructure/
│   │   │   ├── tls/
│   │   │   │   ├── image.png
│   │   │   │   └── index.html  <-- use markdown destination at same level
│   │   │   └── index.html
│   │   └── index.html
│   └── index.html
├── favicon.ico
└── index.html

Solution 2

Keep your existing content structure, and use a render hook that falls back to resources in a parent branch bundle. See the example in this article, and take this example site for a spin:

git clone --single-branch -b hugo-forum-topic-46957 https://github.com/jmooring/hugo-testing hugo-forum-topic-46957
cd hugo-forum-topic-46957
hugo server
1 Like
3

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