How to change logos based on the browser's language?

Design help General
1

Hi all,

how I can change logos based on the browser’s language?

Example:
If the browser’s language is FR - display French clients.
If not - display default logos.

Thanks

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hi @Vytas_Dargis :wave:

Is it only French that you would need a different logo for?
i.e you only have two logos to display?

3

Hi Mark,

I do have 4 logos.

Also, for translation we do use Weglot. Thus, when Weglot translates our website, logos should change to French as well.

To do that, I was thinking to give an ID with style.display = ‘none’ to the container there are the logos. And if condition is true (Weglot updated the language of the website) add style.display = ‘block’;

However, maybe other ways are more elegant.

Thanks

4

Well that’s the way I just came up with :smiley:


const userLang = navigator.language || navigator.userLang
const lang = userLang === 'fr' ? document.getElementById('french') : document.getElementById('world')

lang.style.display = 'block'
5

I would ensure that all logo’s are set to display: none first, as you don’t want it to render a logo initially and then change. This would be more prominent the larger the site.

I’m not entiirely sure if this is elegant either, but it does work.

This site shows worldLogo unless the browser language is French ‘fr’

https://french-logo.webflow.io/

6

I guess you would need to match how WeGlot translates the site, if they translate it based on browser language, then the above would work, but if they do it based on physical location then you may get conflicting results (i.e VPN being used etc)

7

Thanks for your time. I sent to you PM.

1 Like
8

Hey @Vytas_Dargis

Eugene from Weglot here. You can actually change images depending on the language with Weglot!

Just go to your Project settings and enable Media translation:

22

Once it’s activated, you will now see a new “Media” section in your Translation list filter, you can then change your original image URLs for new ones!

It’s useful if you have images with text in it and you want to display another version of that same image but you could also display a completely different image :slight_smile:

9

Hi @eugene_weglot
I’ve followed your advice and setup weglot to translate my project.
Is there a ways to also translate images that open in a lightbox gallery?
I’ve followed the media translations instructions, adding each URL for each image that need to be translated, sadly this don’t show up. Any idea how to solve this please?

10

Hi @eugene_weglot
I’ve followed your advice and setup weglot to translate my project.
Is there a ways to also translate images that open in a lightbox gallery?
I’ve followed the media translations instructions, adding each URL for each image that need to be translated, sadly this don’t show up. Any idea how to solve this please?

11

Ok. I’ve managed to translate dynamic content thanks to Weglot support.
For translating lightbox images using weglot use a css.selector like this in weglot.

Screenshot 2021-11-15 at 12.27.48

1 Like
12

@magicmark thanks for the code, it helps me.