Streaming live at 10am (PST)

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

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)

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?

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

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'

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/

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)

Thanks for your time. I sent to you PM.

1 Like

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: