Why does a path that works for a markdown image not work for the figure shortcode?

support
1

I have an image static/foo.jpg and am able to render it in a page with

![Description](/foo.jpg)

I would have expected

{{< figure src="/foo.jpg" alt="Description" >}}

to also work. However it fails with the error

ERROR The resource "/foo.jpg" passed to the "figure" shortcode could not be found. See "C:\Users\radin\Development\quickstart\content\team.md:9:1"

Why is this? How do I display my image using the figure shortcode?

2

That works fine for me.

An absolute image path to the figure shortcode will not be processed but verbatim copied to the src attribute of the img tag. The error message is not from the builtin figure shortcode.

Maybe you are

  • using a theme that overwrites the standard implementation
  • there’s something with your site source.

the easiest to get help would be to share your repo.

Try it out with a bare site skeleton:

  • hugo new theme --themesDir . foo
cd foo

  • copy your image to static folder

  • add this to content/_index.md

    ![Foo-markdown](/foo.png)

{{< figure src="/foo.png" alt="Foo-figure" >}}

  • start hugo server and point you browser to http://localhost:1313

1 Like
3

Thanks @irkode, it looks like it was indeed an issue with my theme (hermit-v2). I see it overrides the figure shortcode, and the images render fine when I switch to ananke. I have to admit that as someone new to hugo, these sorts of complexities make it feel rather opaque and fragile.

4

Hugo allows themes to do nearly anything.

The upside of that is that any site you can build with html, css and js you can build with Hugo.

The downside is a steeper learning curve and, if you are using a third party theme, the need to read the themes documentation as mush as Hugo documentation.

That Hugo allows me to build sites that way I (or clients) want are one of the selling points for me.

Different tools for different jobs. Hugo is not the right tool for every site or user.

1 Like
5

When calling the figure shortcode, the hermit-v2 theme expects to find the image in the assets directory. You can either move your image file, or mount the static directory to the assets directory by including this in your site configuration:

[[module.mounts]]
source = 'assets'
target = 'assets'

[[module.mounts]]
source = 'static'
target = 'assets'

The theme author should document this requirement, and they should also document the fact that you cannot use their figure shortcode with a page resource.

1 Like
6

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