Translating branch bundles by filename

support
1

After a few days, I have managed to make the multilingual option work with a few test posts. But how do you translate the branch bundles (_index.md) by filename? It only worked when I created empty replicas of the default language folders in the secondary language, and then copied and translated the _index.md file. But the translated pages remain in the default language folder.

2

I’ve read your post several times, and I still don’t understand what you are trying to say.

3

Sorry. English is a secondary language for me.

With such a structure…

content/en/blog/_index.md
content/en/blog/foo/_index.md
content/en/blog/foo/test/index.md
content/en/blog/foo/test/index.fr.md <!-- fr is just an example -->

The pages are translated and I can switch between them. But for the branch bundles (blog and foo), how do I translate them? I copied them to the secondary language and that’s the only way they worked with translation.

content/fr/blog/_index.md 
content/fr/blog/foo/_index.md
4 
content/
├── blog/
│   ├── foo/
│   │   ├── foo-2/
│   │   │   ├── cover.jpg
│   │   │   ├── index.fr.md  <-- leaf bundle (fr)
│   │   │   └── index.md     <-- leaf bundle (default lang)
│   │   ├── foo-1.fr.md
│   │   ├── foo-1.md
│   │   ├── _index.fr.md     <-- branch bundle (fr)
│   │   └── _index.md        <-- branch bundle (default lang)
│   ├── _index.fr.md     <-- branch bundle (fr)
│   └── _index.md        <-- branch bundle (default lang)
├── _index.fr.md
└── _index.md
5

I tried that initially, but it is breaking some of my templates and partials. I am working on the templates, while closing and restarting the server. I had done some translations already by content directory before I found page bundles.

6

How are the image (names) translated? I want to use a different image for the translated language (especially for the open graph, single.html and related posts). Luckily, all my featured images have the same name (cover.jpg).

7

You are running into a known issue:
https://github.com/gohugoio/hugo/issues/9557

With this structure:

content/blog/foo/foo-2/
├── cover.fr.jpg
├── cover.jpg
├── index.fr.md
└── index.md

You cannot use this markdown on both pages:

![alt](cover.jpg)

There’s a workaround here; requires an image render hook:
https://discourse.gohugo.io/t/multi-language-images-and-page-bundles/37325/8

8

I already have an image render hook to convert images to webP format (copied from an answer you made elsewhere on this forum). How would that look like with it?

{{ $img := .Page.Resources.GetMatch (printf "%s" (.Destination | safeURL)) }}
{{ $smallwebp := $img.Resize "450x webp" }}
{{ $mediumwebp := $img.Resize "720x webp" }}
{{ $largewebp := $img.Resize "900x webp" }}
{{- $alt := .PlainText | safeHTML -}}
{{- $id := now.UnixNano | string | add "caption-" }}
{{- $caption := "" -}}
{{- with .Title -}}
{{ $caption = . | safeHTML -}}
{{ end }}

   <picture>
      <source media="(max-width: 480px)" srcset="{{ $smallwebp.RelPermalink }}" type="image/webp">
      <source media="(max-width: 767px)" srcset="{{ $mediumwebp.RelPermalink }}" type="image/webp">
      <source media="(min-width: 768px)" srcset="{{ $largewebp.RelPermalink }}" type="image/webp">
      <img aria-labelledby="{{ $id }}" src="{{ $img.RelPermalink }}" width="{{ $img.Width }}" height="{{ $img.Height }}"
      alt="{{ if $alt }}{{ $alt }}{{ else if $caption }}{{ $caption | $.Page.RenderString | plainify }}{{ else }}&nbsp;{{ end }}">
   </picture>
   <span class="caption" id="{{ $id }}">{{ $caption | $.Page.RenderString }}</span>
9

Merging the two code chunks requires more effort than I am willing to make. You are on your own.

10

I have solved the templates part by modifying the code in this solution. That fetches the image but with the language extension. The markdown part is the difficult one…I will post it as a new question if I don’t find a solution. Although it’s a bummer that this does not work out of the box.

11

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