Page resources with translated pages

support
1

Hello,

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:

content/
├── analyze
│   ├── _index.de.md
│   ├── _index.md
│   ├── introduction
│   │   └── image.png
│   ├── introduction.de.html
│   └── 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?

2

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.

3

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:

content/
├── analyze
│   ├── _index.de.md
│   ├── _index.md
│   └── introduction
│       ├── index.html
│       ├── index.de.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.

4