Page resources with translated pages


I have an issue concerning translated pages that reference page resources. It may very well be that a PEBKAC, but I’d appreciate help anyway.

Given this folder structure:

├── analyze
│   ├──
│   ├──
│   ├── introduction
│   │   └── image.png
│   ├──
│   └── introduction.html

I get a section “analyze” with a list page that correctly lists the page “introduction”. The page “introduction” contains a <img src="image.png"> which is displayed in the browser all right.

The German version of the pages (de) is placed in the public/de subfolder as intended. The list page lists the German version “introduction” correctly as well. However, the image is not found, because Hugo emits it into public/analyze/introduction/ once and not into public/de/analyze/introduction/, where it would be expected by the German version of the page, which also contains <img src="image.png">.

The obvious, but in my opinion undesirable solution would be to hard-code the path to the image in the German version of the page: <img src="/analyze/introduction/image.png">. This is prone to cause broken links should I ever decide to rename the section or page name. I’d like to avoid this risk and keep my pages DRY.

Is there an elegant way to solve this?

Hi there,

how do you call the image’s url from your code ? I’m asking because I think using Page Resources should get the right url for you.

Thanks for pointing out Page Resources.

For anyone else who might have a similar problem: Prior to using Page Resources, I was able to fix it by reorganizing the files:

├── analyze
│   ├──
│   ├──
│   └── introduction
│       ├── index.html
│       ├──
│       └── image.png

introduction is now a leaf bundle, as opposed to having the content files in the parent branch bundle (?) as in my first attempt. Admittedly I had a hard time wrapping my head around Page Bundles. Hugo now emits image.png twice, once into public/analyze/ and once into public/de/analyze. Using
rdfind, I can replace the duplicates with symbolic links to save space on the server:

rdfind -makesymlinks true public/ public/de/

It requires the web server (Apache) to be configured with the FollowSymLinks option.

Concerning the Page Resources, I have also started using them now, although I do not see what benefit they offer as long as the image is not to be processed in the asset pipeline. Referencing the image by filename (<img src="image.png">) just works fine.

However, in fact I do now generate image thumbnails with the asset pipeline, and those thumbs are being emitted twice as well, once for each language.