Referencing localized image files

support
1

Please guide me how to properly set up reference to localized images.
Currently Hugo serves only one of the localizations for all localizations. It changes which of the languages it serves. But it is always one for the whole website.

I understand, I can put them into localized page bundles. I don’t want that since many of them can be uses across a variety of pages.

Should I rename images to have images named differently for each of the languages? Like adding .en.png ?

Why just selecting appropriate Static folder for the language does not work as expected?

config.yaml

baseurl: /
defaultContentLanguage: en
defaultContentLanguageInSubdir: false
languages:
en:
contentDir: content/en
staticDir: static
weight: 1

fr:
contentDir: content/fr
staticDir: static_fr
weight: 2

Directory structure:

static\img\image.png - image in English
static_fr\img\image.png - image in French
…
content\en\post.md
content\fr\post.md
…

baseof.html

…
<img src="/img/image.png">
…

2

Do you have a specific purpose to have different image in different static folder?

I have no experience yet with multilanguage In my oppinion its better to have the same source of image if you use static folder for the image (save more space) but if you have maybe you can try use headless bundle as the image source

I have the same experience with you (using page bundles but have many image uses across variety of pages) so I’m using headless bundle as image source

3

For localized resources (images, other files) there are 3 options:

  1. Page leaf bundles. If you have 1 contentDir per language, language variants of the same image can have the same name (no image.en.md)
  2. Have a headless bundle (aka a “media gallery”)
  3. Have a staticDir per langugage (even multiple if needed). Noo need for special naming; the “most specific will win”.

I’m fairly confident that all of the above should just work, assuming you run a recent Hugo version.

4

Basically, it is for some ease of support my static website with around 10 languages. I had HTML files which had their own subfolder on the website. Once I put translated image files into the appropriate folder, I get translated webpages without the need to edit any links.

At the moment I’m in the process of porting it to Hugo so that I could enjoy a single template.

5

@bep Thanks! Page leaf bundle will require duplicated image files if same files used across pages. The second option seems to require extra coding to reference to the images from the “media gallery”.
I assume, I’m using the very third option you listed. Glad that I made the right choice. The issue is then to fix my configuration. I’ll let you know if I find the problem.

6

I figured that if I set different baseURL for different languages (example.com, example.fr, …) then Hugo copies staticDir’s content into appropriate folders. I can see localized images in subfolders of “en”, “fr”, …
en/img/ - English (from static folder)
fr/img/ - French (from static_fr folder)

It does not work if I use the same baseURL. For the case when each language nested on a main website. For this case Hugo copies only one “img” folder in the root.
How to make Hugo copy Static dir images into appropriate Subdir of a language?

I expected to get something like:
example.com/img - for English (if defaultContentLanguageInSubdir: false).
example.com/fr/img - for French
…

7

Here is what I discovered. Using the same file names for images and other resources (js, css) works only for multicast setup when for each language you have a different baseURL (ie example.com, example.fr, etc.).

The example above is a multihost setup. In a regular setup, all the static directories will be available to all sites. from here

Hugo cannot manage the same file names for a regular setup. It just combines everything in a single directory writing files over other files.

My solution will be to put some images in page bundles and have them localized the same way as the content files. The images which appear on many pages will be put into a single folder with different names.

:point_right: Hope Hugo will be able to work with localized StaticDir files in a regular setup some day.

1 Like