Hugo: Figure shortcode with baseURL

[qw3ry]

Currently, the figure shortcode does not work for sites with a non-standard BaseURL.

Because I need this for my current project I coded a custom shortcode prefixing image URLs starting with a / with the BaseURL. Basically I fix this by replacing <img src="{{ .Get "src" }}" … /> with <img src="{{ .Get "src" | relUrl }}" … />

I'd be happy to create a PR if this is a wanted addition/change.

[kaushalmodi]

does not work for sites with a non-standard BaseURL.

It wasn't clear from the linked page, but I believe you refer to BaseURL's like https://example.com/foo/ as non-standard BaseURL. If so, I agree!

This has been a known problem and has appeared many times on the Discourse forum (see below).

Basically I fix this by replacing with

That, IMO, is not a complete fix. It does not handle the case when images are in one of the content dirs.

I ended up with this custom figure shortcode, but here is the relevant piece:

{{ $image := .Get "src" }}
<figure{{ with .Get "class" }} class="{{ . }}"{{ end }}>
    <!-- snip -->
        {{ if (findRE "^/" $image) }} <!-- If image link has a leading slash -->
            <!-- Cannot use absURL below because it doesn't work as expected if baseURL has a subdir.
                 See https://hugo-sandbox.netlify.com/subdir-canonify-true/ .
            -->
            {{ $baseurl_no_trailing_slash := $.Site.BaseURL | replaceRE "/$" "" }}
            <img src="{{ (printf "%s%s" $baseurl_no_trailing_slash $image) }}"
        {{ else }}
            <!-- Below variable will always have a trailing slash, even with uglyURLs enabled. -->
            {{ $permalink := $.Page.Permalink | replaceRE "\\.html$" "/" }}
            <img src="{{ (printf "%s%s" $permalink $image) }}"
        {{ end }}
    <!-- snip -->

• I am manually prefixing the site baseURL instead of using relURL (as in your case). But that's just 1/2 of the fix. That deals with only src values that begin with /. It is safe to assume that if a user starts src value with /, they mean to have that path start from the site's BaseURL.
• The other 1/2 of the solution is when src does not begin with /. In that case, I assume that user wants to refer to that src in the "current dir" i.e. from the current Page's Permalink. So I prefix the src with $.Page.Permalink in that case.

---

This custom figure shortcode also solves the problem where canonifyURLs is false and the user uses relative links to fetch images in bundles. While this is fine for showing images on their respective posts, those images won't display when they become part of list pages (as the relative links will break).

Same issue reported on Discourse

This issue has come up many times on Discourse:

• Embedding page resources into posts
• How do I reference an image in a page bundle?
• Relative page resource paths in index.html and .Summary
• But the problem, that there are no images on the frontpage persists. any idea?

[tomnis]

I just ran into this. Our solution was to set canonifyurls = "true" in config.toml

Then we can include image with the figure shortcode like so:

{{< figure src="/images/figure1.png" title="Figure 1" >}}

[kaushalmodi]

You can have:

content/
  |_ posts/
        |_ post-1/
              |_ index.md
              |_ images/
                    |_ foo.svg

and then {{< figure src="images/foo.svg" title="Figure 1" >}} inside index.md should work.. whether that figure is rendered on the post page or via summary on a list page.

The solution I propose above does not need canonifyurls = "true", and also handles the cases where the figure src is relative to the current page as shown above. Images don't always have to be in static/.

[kaushalmodi]

@bep Do you have thoughts on my proposal to modify the figure shortcode.

Debug details showing that the current figure shortcode breaks if canonifyURL is false AND baseURL contains subdir.

[bep]

@kaushalmodi I think you need to conclude in the discussion forum. And my plate is kind of super-full of other stuff at the moment, so do not expect my superfast attention.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. The resources of the Hugo team are limited, and so we are asking for your help.
If this is a bug and you can still reproduce this error on the master branch, please reply with all of the information you have about it in order to keep the issue open.
If this is a feature request, and you feel that it is still relevant and valuable, please tell us why.
This issue will automatically be closed in the near future if no further activity occurs. Thank you for all your contributions.