I have a hugo install that gathers projects, so the tree structure is: content/en/projects/project_name/
Content for the site is organised with a python script.
The root folder of a project contains an _index.md file, and for some reason I can’t access some images in that folder.
# Image tests
this doesn't work: `test.png`
this doesn't work: `./test.png`
this works: `./images/test.png`
this works: `images/test.png`
From what I remember in previous conversations here, this is how branch bundles are supposed to work. And I can’t switch these projects to leaf bundles because some of them may have sections of their own.
Is there any way for these links to work through a markdown render hook or something of that sort?
Yes the image is within _index.md and the layout includes .Content.
The problem here is that the content is drafted outside of Hugo, parsed with python so that each project is in its own folder, and then built with Hugo.
The writers don’t know that Hugo doesn’t access images at the same level as _index.md and they don’t have to. My goal was to solve this with render hooks or some other method.
@Tom_Durand this is as much as I can share. What I need is to have all the possible URL to work.
In other projects, the folder would have a bunch of directories and sub-directories within.
Adding a render-image.html in the _markup folder does not seem to impact _index.md files like this one.
Does  work ? With the heading “/”.
Your picture is not clear, but I assume all pictures are under /amaral/images/, so absolute links starting from the root of your project (hence starting with “/”) should work.
thank for pointing that out, it was an oversight when building the example. The problem was still there either way.
On my side I am still trying to deal with this in a straightforward way. The current method still breaks some images and I am thinking if it wouldn’t be better to simply move them all to a fixed location with an absolute path.
It’s possible to run conditionals within the render-image.html template so that you can work around the issue until you can resolve them more elegantly later. One rough example:
<!-- layouts/partials/render-image.html -->
<!-- get image URL from Markdown tag -->
{{- $src := (.Destination | safeURL) -}}
{{ $src = replace $src "./" "" }}
{{- $src = index ($fragments) 0 -}}
<!-- get actual filename -->
{{/*- $src = path.Base $src -*/}}
<!-- check if it exists as a page resource -->
{{- with (.Page.Resources.ByType "image").GetMatch (printf "**%s" $src) -}}
{{- if strings.HasSuffix $src ".svg" -}}
{{ .Content | safeHTML }}
{{- else -}}
{{ with $.Title }}<figure>{{ end }}
<img src="{{ $src.RelPermalink }}"
width="{{ $src.Width }}"
height="{{ $src.Height }}"
alt="{{ $.Text }}" {{ with $.Title }} title="{{ . }}" {{ end }}
loading="lazy" decoding="async" >
{{ with $.Title }}<figcaption>{{ . | markdownify }}</figcaption></figure>{{ end }}
{{- end -}}
<!-- or otherwise simply load the URL -->
{{- else -}}
<img src="{{ .Destination | safeURL }}"
alt="{{ .Text }}" {{ with .Title }} title="{{ . }}" {{ end }}
{{ with index ($fragments ) 1 }}class="{{ . }}" {{ end }}
loading="lazy" decoding="async" data-src="external" >
{{- end -}}
If you can share the path of the image files (where are they eventually placed at?) and the HTML output, that would be helpful for looking into the issue. I haven’t tested the code above, just modified out of a template I use so there may be bugs.
that’s a good approach also. The thing blocking me is in fact the number of different ways the markdown editors reference images.
I Have been looking into moving all the images to the /static/ dir and reference them all from the same location. This means moving away from Hugo and using a build script, which I wanted to avoid.
I personally symlinked my whole Images folder with several Gbs worth of data of all sorts, under assets/, and it’s included whenever referenced by using their real pathname, like “/Images/spirituality/pape_facepalm.webp”
It’s the most maintenance-free scheme I think.
