Jump to content

Is it possible to change logo on multiple pages on website with code?

Go to solution Solved by creedon,

Recommended Posts

Hello, 

I would like to change our main logo to a french version only on french pages of the website.  I found this code, and it's not working. Is it possible? Thank you in advance!

Website: https://www.sgtguides.com/fr/home/
 

<style> 
div.header-title-logo a {
content:url("https://imgur.com/a/4qxfcRf") !important;     
max-width: 290px;
</style>

 

Edited by Styledent
Needed to add website url
Link to comment

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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

Hello, 

I attempted to input as stated in that thread and it still didn't work for me. Did I input incorrectly? Our site is also 7.0

 

<script>

  $( ( ) => {
  
    // replace header logo image based on language area of v7.1 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
        
        */
        
      // 'French' : 'https://imgur.com/a/4qxfcRf',
      
      // no need to define one for english as it is the default image
      
      // last or only item doesn't get a comma
      
      'fr' : 'https://imgur.com/a/4qxfcRf'
      
      }
      
    // do not change anything below, there be the borg here
    
    const pathname = location.pathname;
    
    const languageUrlSlug = pathname.substring ( 1, 3 );
    
    if ( ! ( languageUrlSlug in languageUrlMappings ) ) return;
    
    const url = languageUrlMappings [ languageUrlSlug ];
    
    $( '.header-title-logo img' )
    
      .attr ( 'src', url );
      
    } );
    
  </script>

 

Link to comment
  • Solution
Quote

Did I input incorrectly? Our site is also 7.0

Yes but the rub is the code was for v7.1. But not to worry. I have updated my code post. Grab the updated code.

One thing you may have trouble with. The image URL you used appears to point to an image viewer app. That won't work. You need to have the raw image URL. I don't know that app so you'll have to research is you can get the raw URL or you could upload the image to SS and get the image URL from it.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
On 1/13/2023 at 1:50 PM, creedon said:

Yes but the rub is the code was for v7.1. But not to worry. I have updated my code post. Grab the updated code.

One thing you may have trouble with. The image URL you used appears to point to an image viewer app. That won't work. You need to have the raw image URL. I don't know that app so you'll have to research is you can get the raw URL or you could upload the image to SS and get the image URL from it.

Let us know how it goes.

Thank you very much for your help! It works now! 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.