# Confusion regarding image render hooks

**URL:** <https://discourse.gohugo.io/t/confusion-regarding-image-render-hooks/24225>\
**Category:** support\
**Created:** [March 24, 2020, 7:31pm UTC](https://discourse.gohugo.io/t/confusion-regarding-image-render-hooks/24225 "2020-03-24T19:31:09Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![YashJipkate](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/yashjipkate/32/10775_2.png) [@YashJipkate](https://discourse.gohugo.io/u/YashJipkate)\
**Post date:** [March 24, 2020, 7:31pm UTC](https://discourse.gohugo.io/t/confusion-regarding-image-render-hooks/24225/1 "2020-03-24T19:31:09Z")

</div>

Hi,

I want to display an image which works both in Github preview and in the site. @bep provided an amazing example [https://portable-hugo-links.netlify.com/](https://portable-hugo-links.netlify.com/) but in the example the image resides in a page bundle and I want to reuse the image in multiple pages so I want something as some directory in `content/`.  
I came across branch bundles but I guess some changes to the [render-image file](https://github.com/bep/portable-hugo-links/blob/master/layouts/_default/_markup/render-image.html) because the branch bundles are to accessed as regularpages and I am not able to achieve that in the render-image. The image-render uses `.Page.Resources` to get the image. but that won’t get the ones outside the page bundle.  
I also came across headless bundles but again I face problems in rendering the image in the preview properly. And also I don’t know if this is the best practice as compared to having resources.

How should I modify the render-image.html so that for an image `contents/images/img.png` can be used in a page like `blogs/blog1.md` by something like this -\> `![Image](../images/img.png)`?

I am very confused as to what is the correct way. Any help is appreciated.

Thanks

---

<div class="post-metadata">

**Author:** ![bep](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bep/32/3332_2.png) [@bep](https://discourse.gohugo.io/u/bep)\
**Post date:** [March 24, 2020, 7:58pm UTC](https://discourse.gohugo.io/t/confusion-regarding-image-render-hooks/24225/2 "2020-03-24T19:58:58Z")

</div>

> [@YashJipkate](#):
>
> The image-render uses `.Page.Resources` to get the image. but that won’t get the ones outside the page bundle.

First, what you want should be possible, but you need to create some kind of scheme for yourself:

1. First look in the current page’s bundle
2. Then use path.Dir and GetPage to find a headless bundle or similar

Or something like that.

---

<div class="post-metadata">

**Author:** ![bep](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bep/32/3332_2.png) [@bep](https://discourse.gohugo.io/u/bep)\
**Post date:** [March 24, 2020, 8:38pm UTC](https://discourse.gohugo.io/t/confusion-regarding-image-render-hooks/24225/3 "2020-03-24T20:38:15Z")

</div>

I have updated the example project with a fallback to /images mounted in /assets, which I guess makes sense. It should also be possible to do this with some headless bundle.

> <https://github.com/bep/portable-hugo-links/blob/e51b1ae7dbd70e252c3711da1ff1fce37de0d28f/config.toml#L25>

---

<div class="post-metadata">

**Author:** ![YashJipkate](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/yashjipkate/32/10775_2.png) [@YashJipkate](https://discourse.gohugo.io/u/YashJipkate)\
**Post date:** [March 25, 2020, 5:58am UTC](https://discourse.gohugo.io/t/confusion-regarding-image-render-hooks/24225/4 "2020-03-25T05:58:36Z")

</div>

Thanks, @bep. I tried using the above workaround. I placed my image in `content/images` and added `source = "content/images"` to the config. Now I include the image in my `content/blogs/blog1.md` as `![Image](../images/imgg.png)` which successfully previews but fails in the site. If I use `![Image](/images/imgg.png)` then it works fine, even without the mount changes but fails to preview.

Is there something I am missing here?

[Here](https://pastebin.com/MwSMdbBi) is the complete config.toml of my project.

This is my directory structure there is any confusion:

```auto
content
     blogs
         blog1.md
     images
         img.png

```

Although I am open to changing the location of the image whichever suits the implementation easily and follows the best practices.

Thanks.

---

<div class="post-metadata">

**Author:** ![bep](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bep/32/3332_2.png) [@bep](https://discourse.gohugo.io/u/bep)\
**Post date:** [March 25, 2020, 8:07am UTC](https://discourse.gohugo.io/t/confusion-regarding-image-render-hooks/24225/5 "2020-03-25T08:07:11Z")

</div>

In my example you would mount them below /assets.

Look at my example:

```auto
[[module.mounts]]
source = "images"
target = "assets/images"

```

Now my example is a little special, as I have all the folders on top level (to simulate a "non Hugo project), but I assume you can do something like this:

```auto
[[module.mounts]]
source = "content/images"
target = "assets/images"

```

Note that I assume the same would be possible with a bundle, but that example would need to wait for another day when I’m less busy. My main point was to demonstrate “fall back lookups”.

---

<div class="post-metadata">

**Author:** ![alexandros](https://avatars.discourse-cdn.com/v4/letter/a/ecc23a/32.png) [@alexandros](https://discourse.gohugo.io/u/alexandros)\
**Post date:** [March 25, 2020, 9:43am UTC](https://discourse.gohugo.io/t/confusion-regarding-image-render-hooks/24225/6 "2020-03-25T09:43:04Z")

</div>

> [@YashJipkate](#):
>
> `![Image](../images/imgg.png)`

Hugo does not support relative paths for assets.  
It used to… some ages ago (around v0.16 -if memory serves me right-) but then this was changed for reasons that the previous or current maintainer only know.

The way I’ m doing what you ask is by specifying the full image PATH in the `.Destination` attribute of the Markdown image…

Hugo publishes image assets globally from withing a Page Bundle.

So if you don’t mind organizing your content in Bundles, then you can do without `GetPage` and Hugo Modules.

For example a file under

```auto
content
└── example
    ├── index.md
    └── 1.jpg

```

Will be available from within its own Page Bundle with both `![alt](1.jpg)` as well as `![alt](example/1.jpg)`

But from the other pages that reside elsewhere under the `contentDir` that image will _always_ be available with: `![alt](example/1.jpg)`

Of course you will not have an image preview generated with a Markdown editor when you link to a Markdown image as I described above but that is a small price to pay.

You should run `hugo server` with the `--navigateToChanged` flag whenever you edit content in Hugo to have instant preview in the browser.

This is how I work in image-heavy projects that I maintain.

I prefer simplicity above all else.

---

<div class="post-metadata">

**Author:** ![bep](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bep/32/3332_2.png) [@bep](https://discourse.gohugo.io/u/bep)\
**Post date:** [March 25, 2020, 11:10am UTC](https://discourse.gohugo.io/t/confusion-regarding-image-render-hooks/24225/7 "2020-03-25T11:10:24Z")

</div>

> [@alexandros](#):
>
> Hugo does not support relative paths for assets.

We do. See my example.

---

<div class="post-metadata">

**Author:** ![alexandros](https://avatars.discourse-cdn.com/v4/letter/a/ecc23a/32.png) [@alexandros](https://discourse.gohugo.io/u/alexandros)\
**Post date:** [March 25, 2020, 12:50pm UTC](https://discourse.gohugo.io/t/confusion-regarding-image-render-hooks/24225/8 "2020-03-25T12:50:43Z")

</div>

> [@bep](#):
>
> We do.

Right. I’m sorry. I used the wrong term.

Let me clarify.

As far as I know Hugo does _not_ support relative links to _Page Resources_ residing under the `contentDir`, hence my answer above.

As you pointed out Hugo _does_ support relative links to image assets that are mounted as Hugo Modules under the `assetDir`.

However please note that for some of us Hugo Modules are _not_ a viable option due to the Go dependency. Projects that I maintain need to be as portable as possible with minimal installation requirements.

That is why I decided to use Hugo in the first place.

---

<div class="post-metadata">

**Author:** ![YashJipkate](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/yashjipkate/32/10775_2.png) [@YashJipkate](https://discourse.gohugo.io/u/YashJipkate)\
**Post date:** [March 25, 2020, 5:28pm UTC](https://discourse.gohugo.io/t/confusion-regarding-image-render-hooks/24225/9 "2020-03-25T17:28:38Z")

</div>

> [@alexandros](#):
>
> Hugo publishes image assets globally from withing a Page Bundle.

@alexandros I too initially came up with the same idea after seeing @bep’s example. But I want the images to be able to share every where. Also whenever I want to add an image to a file which previously did not have it, I need to re-organize the folder structure which is not so dev-friendly in my opinion (a simple image addition should not have this much effect). And the Github previews are important since it is a documentation site.

Also, I noticed that I forgot to do the necessary changes in render-image.html. After doing them, it works like a charm!!!

Thank you both so much for the discussion. I learnt a lot 😃

---

<div class="post-metadata">

**Author:** ![system](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/system/32/1_2.png) [@system](https://discourse.gohugo.io/u/system)\
**Post date:** [March 27, 2020, 5:28pm UTC](https://discourse.gohugo.io/t/confusion-regarding-image-render-hooks/24225/10 "2020-03-27T17:28:41Z")

</div>

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