(solved) Problem listing languages in a correct order and switching to a language-specific page URL

I’m using Hugo 0.40.1 on Ubuntu, and trying to create a language switch control using the following code:

{{ range $.Site.Languages }}
	<span href="#"> {{ .Lang }} - {{ .LanguageName }} </span>
{{ end }}

Where the config.yaml file contains the following:

languages:
  en:
    weight: 1
    LanguageName: english
  es:
    weight: 2
    LanguageName: español
  fr:
    weight: 3
    LanguageName: français

There are the following problems with this:

  1. no matter what I’m trying, I cannot display the .LanguageName - either an empty string is displayed, or the current page language name is repeated all over; note that .Lang works correctly - but this is the only success
  2. according to the documentation, $.Site.Languages is supposed to work in the order specified by weight, but does not work like that and languages are not ordered in any predictable way
  3. it is unclear (from the documentation) how to construct URLs pointing to different languages of the current page

Thank you in advance!

I closed this issue on GitHub as a non-bug. But that does not mean I know what is happening here, just that we have a fair amount of tests that verifies this behaviour (incl. sorting), so I will assume that there is something “odd” with your setup.

But I think you need to show a more complete setup. A link to the site’s source would help.

Please read and follow Requesting Help. :slight_smile:

Did you try languageName: english, etc. (with a lowercase initial “l”)? (just a suggestion, didn’t test).

I’ve created a very small new project just to demonstrate the problem and, surprisingly, everything works there as described in the documentation. I mean - the sorting and getting the language name.

I’m trying to check now what is different/wrong in my “big” configuration (which I cannot share).

It is not case-sensitive, but i prefer camel-cased in config.toml (languageName), but it does not matter. I suspect there is something else “broken” in this project that isn’t visible in the snippet we see.

1 Like

Thanks for the clarification. I too prefer the camel-cased vars in my yaml config file.

You were right… it just works.
After reworking the pages using blocks and partials, and getting again to that snippet with the iteration over the languages, it started working properly.
I’m not even sure what was my original problem.
So the main problem is solved - the sorting works, and .LanguageName also works.

This is my current code:

{{ range $.Site.Languages }}
	<a class='{{if eq .Lang $.Lang}} selected {{end}}' href='{{$.RelPermalink}}'> {{ .LanguageName }} </a>
{{ end }}

The last missing piece of the puzzle is now - how to construct links to the same page as the current page, just with a correct prefix by the given language.
$.RelPermalink produces the same URL (of the current language) for all other languages.

Have a look at my code here, which could help

Okay, now I got the final solution. I was wrong to work with the Site.Languages in the first place.
I needed the following:

{{ range $.AllTranslations }}
	<a class='{{if eq .Lang $.Lang}} selected {{end}}' href='{{.RelPermalink}}'> {{.Language.LanguageName}} </a>
{{ end }}

This works the way I wanted it to work.

1 Like

Thanks a lot!