ss7.1 How to create Clickthrough URL for Background Images?

Site URL: https://blueberry-moose-azns.squarespace.com

hello—

I am working with squarespace 7.1 and am looking to create a clickthrough url for the background (full bleed image) on the landing page of the site, in the same way that you would be able for an image block. 

Seems like the only way possible is to add text (and create a link) or to add a button. I do not want to have text or buttons on the image, but want the image itself to function as the link. 

Any help on this would be appreciated.

thanks.

You can use JavaScript to do this (need Business Plan or higher).

Can you setup password & share url again? Your site is private, I can't access to check JavaScript.

@tuanphan 

thanks for your response!
Client has Business Plan set up for the site
& site is live now: 

https://www.lindseytaylordesign.com

screen shot below is landing page— still have to click on text logo (in the middle of the image) to navigate through to the first page link...
would like to be able to click anywhere on image and navigate through to "Gardens". thanks!
 

On 4/13/2020 at 7:58 PM, ysdm said:

@tuanphan 

thanks for your response!
Client has Business Plan set up for the site
& site is live now: 

https://www.lindseytaylordesign.com

screen shot below is landing page— still have to click on text logo (in the middle of the image) to navigate through to the first page link...
would like to be able to click anywhere on image and navigate through to "Gardens". thanks!
 

 

Add this code to Page Settings > Advanced > Header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  $('.section-background img').click(function() {
    window.location = "https://beaverhero.com";
});
</script>

if it doesn't work try this

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  $('[data-section-id="5e75263ccd5ed9671ecccce9"] .section-background').click(function() {
    window.location = "https://beaverhero.com";
});
</script>
<style>
  [data-section-id="5e75263ccd5ed9671ecccce9"] .content-wrapper {
    cursor: pointer;
}
</style>

Hi @tuanphan

I am trying to get this same functionality for several for full screen images with URL links. I tried both pieces of code you suggested without any luck. Do you have any suggestions?

https://lizard-crow-ml73.squarespace.com/

PW: OPA2020

Thanks,

Paul

Hi again @tuanphan

I think I solved this through brute force. Lots of Googling and repeated attempts until I finally got it to work.

Ended up with this below:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $('[data-section-id="5e99b284f866cd1282d8ed12"].page-section').click(function(event){
      event.preventDefault();
      window.location = "https://lizard-crow-ml73.squarespace.com/blurry-block";
    });
  });
</script>

I also modified the CSS and placed it in the CSS editor so the entire background image would show the pointer. 

[data-section-id="5e99b284f866cd1282d8ed12"].page-section, {
  cursor: pointer;
}

I found a really easy, non-code based solution to this problem. Just set your background video/image as you normally would, and then insert an "image" of a blank PNG over the top. You can then link the empty PNG image space to whatever page you want!

On 6/27/2021 at 2:10 PM, rjamespierce said:

I found a really easy, non-code based solution to this problem. Just set your background video/image as you normally would, and then insert an "image" of a blank PNG over the top. You can then link the empty PNG image space to whatever page you want!

This sounds great , is there any source / link of how this is done? Much appreciated. (the other solutions above seem not to have helped the garden site)