Figure shortcode cannot find image in static folder in site.com/subsite baseURL

support
1

I’m building a website at Github Pages, which has name.github.io/subsite website address: Финэк МГИМО - Поступление на факультет финансовой экономики МГИМО

My baseURL is baseURL = "https://epogrebnyak.github.io/finec-mgimo-v2/"

I have a problem referencing an image at static folder with figure.

When running hugo server:

These do NOT work:

{{< figure src="/static/finec-mgimo-footer.png" title="/static/finec-mgimo-footer.png" >}}

{{< figure src="/finec-mgimo-footer.png" title="/finec-mgimo-footer.png" >}}

These do work:

{{< figure src="/finec-mgimo-v2/finec-mgimo-footer.png" title="/finec-mgimo-v2/finec-mgimo-footer.png" >}}


{{< figure src="http://localhost:1313/finec-mgimo-v2/finec-mgimo-footer.png" title="http://localhost:1313/finec-mgimo-v2/finec-mgimo-footer.png" >}}

The last one I added to make sure the file exists at all.

My interpretation in baseURL the relative path part gets dropped, but and it is hard to see how to take it back.

From reading other posts I learned:

What should I try to make figure shortcode work without recourse to subsite name?

2

In short my problem is that {{< figure src="/finec-mgimo-footer.png" > }} points to
http://localhost:1313/finec-mgimo-footer.png, and not to http://localhost:1313/finec-mgimo-v2/finec-mgimo-footer.png.

Any ideas how to change this behaviour appreciated

3

Looks like canonifyURLs = true solves this. Maybe for documentation there shoul dbe a special mention like “if you develop for Gihub Pages, use canonifyURLs = true”.

4

But no - canonifyURLs = true breaks the menus when introduced.

5

Try removing the forward slash from the beginning of the image PATH in the shortcode input, like so:

{{< figure src="finec-mgimo-v2/finec-mgimo-footer.png" title="finec-mgimo-v2/finec-mgimo-footer.png" >}}
6

@alexandros, thanks for suggestion - /finec-mgimo-v2/finec-mgimo-footer.png does show the image, I’m just upset and confuse I have to be copying a part of my baseURL ( = "https://epogrebnyak.github.io/finec-mgimo-v2/") into figure - I would like to avoid that.

My question is how to make this work:

{{< figure src="/finec-mgimo-footer.png">}}

given my baseURL:

baseURL = "https://epogrebnyak.github.io/finec-mgimo-v2/"
7

Did you try my suggestion? I do not quite gather from your reply that you did…

The above will not work because you are publishing to a sub-directory and the forward slash at the beginning of the image PATH will point to the domain host root, therefore the image will be 404.

That is why I suggested that you eliminate the first forward slash from your image PATH input.

1 Like
8

figure src="/finec-mgimo-v2/finec-mgimo-footer.png" is the right path, whil figure src="finec-mgimo-v2/finec-mgimo-footer.png" will attempt to look at current folder and
constructs https://epogrebnyak.github.io/finec-mgimo-v2/logo/finec-mgimo-v2/finec-mgimo-footer.png

It is strange I cannot get rid of finec-mgimo-v2 at all in src.

9

Here is a demo of src that do or do not work: Technical Page with Logos - Finec MGIMO

10

As per the config you are using multilingual mode.

The image you want to publish exists under the following URL:
https://epogrebnyak.github.io/finec-mgimo-v2/finec-mgimo-footer.png

In your project’s source code repo the image is located under:
finec-mgimo-v2/static/finec-mgimo-footer.png

Let’s break down what you’re doing in the link you shared:

  1. The link /static/finec-mgimo-footer.png is wrong because the /static/ folder does not need to be entered into the img link.

  2. The img link /finec-mgimo-v2/finec-mgimo-footer.png that includes the subdirectory /finec-mgimo-v2/ does displays the sample published project, because as I said above the first forward slash points to the host root (you hadn’t shared that you are using multilingual mode above).

  3. The link /finec-mgimo-footer.png again points to the host root domain (due to the first forward slash) but in this case https://epogrebnyak.github.io/ throws a 404 since your project is published under the /finec-mgimo-v2/ subdirectory (you haven’t included it like you did in image 2).

  4. The link finec-mgimo-v2/finec-mgimo-footer.png is 404 because it points to https://epogrebnyak.github.io/finec-mgimo-v2/en/logo/finec-mgimo-v2/finec-mgimo-footer.png (it includes the language code and there is no image in this address).

  5. The link /finec-mgimo-footer.png points to https://epogrebnyak.github.io/finec-mgimo-footer.png but again there is no image under the domain host root since your project resides under the /finec-mgimo-v2/ subdirectory.

  6. The link finec-mgimo-footer.png again points to https://epogrebnyak.github.io/finec-mgimo-v2/en/logo/finec-mgimo-footer.png same as in image 4.

  7. The link http://localhost:1313/finec-mgimo-v2/finec-mgimo-footer.png is wrong since we never enter the local server URL to construct a URL for a published asset.

Rather than hardcoding the PATH in a link to an image that resides under the static folder a better and more portable way would be to use either the absLangURL or the relLangURL functions.

2 Likes
11

It is a bit strange localhost link actually provides an image even ob published assets - something I introduced for local testing, but accidently shows an image even on built site.

12

Thanks for detailed breakdown of the cases, I think portability is what I try to achieve, even though in somewhat choatic steps.

Could not find how to add fucntions in figure, below breaks:

{{< figure src="{{ "finec-mgimo-footer.png" | absURL }} ">}}

Error message:

"C:\Users\epogr\Documents\GitHub\finec-mgimo-v2\content\en\logo\index.md:35:41": unrecognized character in shortcode action: U+007C '|'. Note: Parameters with non-alphanumeric args must be quoted

33
34
35
``` ```
---

{{< figure src="finec-mgimo-footer.png" | absURL >}}

I thinl I’m getting something similar to Deploying as a GitHub Project Page based site needs canonifyurls = true · Issue #7714 · gohugoio/hugo · GitHub

13

Is it possible to use these fucntions in markdown?

14

No. The functions need to go in the figure shortcode template.

If you are using the Hugo internal figure shortcode you can copy its contents from here and place it in your project under /layouts/shortcodes/figure.html

Then modify line 5 of the template with something like:

{{ $src := .Get "src" | absLangURL }}
<img src="{{ .Get $src }}"
1 Like
15

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