Images from figure shortcode shows as broken in parent list

support
1

New to Hugo, and unable to solve this. I have a blog that uses page bundles, where the images are located in the same directory as the page index.md

42%20PM

The figure code:
{{< figure src="fear-the-fedora.jpg" caption='Fear the Fedora Shirt' >}}

The figure renders as expected on the blog post, but shows as a broken link on the list page. Hugo doesn’t seem to parse in the directory structure for the image, as it is rendered on the list page as:

<img src="fear-the-fedora.jpg" alt="Fear the Fedora Shirt" > - this is a broken image on the list page.

Also potentially relevant, I don’t specify a domain in the baseURL:

baseURL = "/"

Bonus question: Is it possible to render HTML or markdown in the figcaption using the default shortcode?

2

Read up on Page Resources.

Go Templates are context aware. For example to access the image of a Page Bundle on a list page you would need to call it with something like:

{{ with .Resources.ByType "image" }}
{{ range . }} 
<--- HTML --->
{{ end }}
{{ end }}
1 Like
3

So reading into this, I believe what you’re saying is that I can’t use the built-in {{< figure >}} short code, and I’ll need to create my own, where I specify the context?

Edit: the built-in shortcodes are bit of a black box. Where is the code located, so I can take a look at how they are constructed?

4

The defaulf figure shortcode is here:

For a modified version that utilizes .Resources see the following:

Also search the Forum for more.

1 Like
5
1 Like
6

Oops. We must have been looking at the exact same time @alexandros :smile:

1 Like
7

Thanks for the help.

1 Like