How can I replace languages by flag images?

support
1

Hi, I have a multilingual website which right now displays the different language codes like En, Fr, Es. I would like to replace these codes by their respective flags.

I referenced the images in the config file:
config

However, I don’t know how to call them in the navigation layout:
menu

Thanks a lot for your help.

2

Please, don’t use flags to represent languages.

E.g. there are a lot of countries where French is officially spoken, not only France. The same is also valid for Spanish.

I do like this (see here)
language-switcher

5 Likes
3

@martignoni makes a good point.

But to answer your original question and from a page object:

{{ .Language.Params.flag }}
1 Like
4

Hi, I have replaced {{ .Language }} by {{ .Language.Params.flag }} in the navigation layout but the flags do not appear (but the links are still there if I hover on the menu)

menu2

1 Like
5

I don’t have your code so I am guessing, but you just have an a tag configured with the flag image path as its link text. To have the flag show as an image, you need to code an img tag in there. Look at your html source and you should see what is going on.

Hugo is merely doing what you tell it to.

1 Like
6

Absolutely! It’s not limited to French, Spanish, or Portuguese. Americans don’t like English being represented with a Union Jack. My guess is that Australians, Canadians, etc. aren’t keen on it either. If I was Irish, I really wouldn’t like it.

7

That ‘flags are not languages’ point is not something I thought of early, which looks a bit naive now. :slight_smile:

Thanks for pointing this out!

1 Like
8

Thank you for your help. I understand your points considering the flags but graphically speaking that is what most people are looking for when it comes to languages and it’s easier to spot on the screen.
@RickCogley Thanks for spotting it, that was a stupid mistake. I have added an img tag. Now I’m getting the following result on the screen, it still does not pick up the images. I have shared the config files, the navigation and alllanguage partials.

image

https://drive.google.com/drive/folders/1PnDmthrHzrb4M7QzgcmH8EZsYrA6yami?usp=sharing

9

Check your source and see where it expects the images are. If images do not show, it means either your html is broken or, your images are not where you specified them. For example, do you have them in /static/images/Languages/ in your project? That translates to https://mysite.com/images/Languages/something.png.

10

yes the flags are showing up when I use the path in local (http://localhost:1313/images/Languages/en.png). I think there might be an issue with the way I call the images from the config file.

11

Your baseURL looks right, so, push it to https://queo.io and check the paths in view source.

12

Actually, I prefer not to push until I get it right. I looked at page view source in local and it’s just not getting the right path:, only http://localhost: 1313/ while I would have expected http://localhost: 1313/images/Languages/en
image

13

From the above message I got the impression it was already working locally, but it looks like I misunderstood. If you share your repo, maybe someone can help more easily.

14

I finally was able to fix it. I gave up on understanding how to call the config file properly and went for a direct path: <img src="/images/Languages/{{.Language}}.png" />
Thanks a lot for your help. Now I need to understand how to order the flags (they keep changing positions for some reasons!)

1 Like
15

Text + flag is better than flag only!
Here is a text + emoji solution :grinning:

languages:
  fr:
    weight: 10
    languageName: Français 🇫🇷
  en:
    weight: 20
    languageName: English 🇬🇧
  de:
    weight: 30
    languageName: Deutsch 🇩🇪
1 Like
16

Try these in your range: