French and English Logo in Header

Hey there, 

We have options to navigate between French and English on our website. Is it possible to add code that would allow us to have our French and English logos on their respective pages?

I've found code that will invert the logo colour based on the background it would appear on, but I need it designated to specific pages rather than being based on colour schemes. 

Thanks guys!

Please post the URL for your site. Also please post the images you want to have for each language part of the site.

If your site is not public please set up a site-wide password, if you've not already done so. Post the password here.

We can then take a look at your issue.

hohtribute.ca

The logos are in white so may not show but here they are. 

Add the following to Settings > Advanced > Code Injection > FOOTER.

<script>

  $( ( ) => {
  
    // replace header logo image based on language area of site
    
    const languageUrlMappings = {
    
      /*
      
        the format of each line is a language letter code such as en (english),
        fr (french), etc. and the url for the language header image
        
        */
        
      // '[enter language here]' : '[enter image url here]',
      
      // no need to define one for english as it is the default image
      
      'fr' : '[enter image url here]',
      
      };
      
    // do not change anything below, there be the borg here
    
    const pathname = location.pathname;
    
    const languageUrlSlug = pathname.substring ( 1, 3 );
    
    // bail if no language
    
    if ( ! ( languageUrlSlug in languageUrlMappings ) ) return;
    
    const selector = [
    
      '.header-title-logo img', // 7.1
      
      '.Header-branding-logo', // 7.0 ( Brine )
      
      ]
      
      .join ( ', ' );
      
    const url = languageUrlMappings [ languageUrlSlug ];
    
    $( selector )
    
      .attr ( 'src', url );
      
    } );
    
  </script>

Let us know how it goes.

Sorry, new to coding. Do I remove everything in red when inputting this to the site?

OMG you're a genius!! Thank you, thank you, thank you!!

So appreciate you!!

It worked. 

7 hours ago, HOHTFL said:

Sorry, new to coding. Do I remove everything in red when inputting this to the site?

No those are comments for the code to help us understand what is going on.

Hello,

I can't insert it on my site, I don't understand what I should write...

Can you please please help me :)

On 12/21/2022 at 1:21 PM, Matchi said:

I can't insert it on my site, I don't understand what I should write...

You are likely having problems because this thread is not meant to go from ground zero to a full solution. The original poster had already done some ground work and my code built on top of that.

Please post the URL for a page on your site where we can see your issue.

A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

We can then take a look at your issue.

Thank you very much for replying !!!

this is the URL of my site 

 https://www.thesheepsolution.com/

@Matchi

The code in this thread won't work. It was designed to be used with a language switcher other than the one you are using.

You are using Squarespace's built-in integration of Weglot's translation software.

I suggest starting a new thread. Restate your goal and be sure to mention that you are using Squarespace's built-in integration of Weglot.

Okay, that's fine, thanks !
Do you need my email address or my phone number?

10 hours ago, Matchi said:

Do you need my email address or my phone number?

No. Make the new post and we will try to help if we can.

On 1/11/2023 at 8:53 PM, creedon said:

No. Make the new post and we will try to help if we can.

this is my new post, thanks !!