HUGO

Render-image fails to render both Markdown and HTML at the same time

Hi!

We have a public site, goharbor.io, and we would like to use render-image properly to be able to view the content both in GitHub and on the published site.
I’ve read through numerous posts here, and looked at bep’s https://github.com/bep/portable-hugo-links repo, but I’m a bit lost as to why it’s not working as intended. I can run the example repo just fine, but when trying to apply the same mechanics to our site it fails - it renders either MD or HTML, but not both at the same time.

Our repo is public over at https://github.com/goharbor/website, and you can see an already existing render-image layout at https://github.com/goharbor/website/blob/master/layouts/_default/_markup/render-image.html .

Our docs, when built using Netlify, lives under:

content/docs/<version>

Images are stored under content/docs/<version>/img.

Looking at one example file with images, we have content/docs/1.10/administration/configure-authentication/db-auth.md, it links to an image with ![Database authentication](../../../img/db-auth.png). This renders fine on the website, but fails in markdown. Changing it to ![Database authentication](../../img/db-auth.png) renders fine in Markdown, but fails on the website.

I’ve started diving into page bundles, but it’s a little over my head. Can someone please explain what I need to do to make the images render in both Markdown and on the live site?

Should I just put the images together with the Markdown files in their own directories instead? That is how I interpret it when reading up on page bundles.

So in the example above, db-auth.png would be stored in the same folder as db-auth.md, correct?