Hugo image urls

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 file, and for some reason I can’t access some images in that folder.

# Image tests

this doesn't work: `test.png`

![johnny five](test.png)

this doesn't work: `./test.png` 

![johnny five](./test.png)

this works: `./images/test.png`

![johnny five](./images/test.png)

this works: `images/test.png`

![johnny five](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?

Try this in the section’s list template

 {{- with .Resources.Get "test.jpg"}}
  <img src="{{ .Permalink}}" width="{{ .Width }}" height="{{ .Height }}">
  {{- end }}]

That might work, but in this case the image is part of the content.

I’ve been trying render hooks but it’s almost as if they don’t trigger for branch pages.

Are you adding the image inside the file? Then add {{ .Content }} in your template.

Yes the image is within 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 and they don’t have to. My goal was to solve this with render hooks or some other method.

can you print the arborescence of test.png in the final build ?
It should tell you immediately what addressing scheme you need to access it.

Maybe share your project and see if others can help you.

@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 files like this one.

You mention, but your screen capture shows, so the problem statement is a bit unclear.

For leaf bundles (, the page resources may be adjacent to the file, or in a subdirectory…

For branch bundles (, the page resources must be adjacent to the file.

See “Where can the Resources live?”

Does ![test](/images/test.png) 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.