Clickthrough Background Images

Site URL: https://fish-primrose-czfn.squarespace.com/config/

Hi, 

Does anyone happen to know if it's possible to make a background image click-through? My home page has a series of full images. Each image refers to a project, and I'd like the entire image (not just the text) to be clickthrough. Any ideas on code? Thank you! Tommy

Try adding this to Design > Custom CSS

body.homepage article .html-block {
    position: static !important;
}

body.homepage article .html-block a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

On 3/5/2022 at 11:51 PM, tuanphan said:

Try adding this to Design > Custom CSS

body.homepage article .html-block {
    position: static !important;
}

body.homepage article .html-block a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

Thanks Tuanphan! Actually just saw your response. I tried adding it, but no luck. My Custom Design Code already features this:

.sqs-block-html a {
    text-decoration: none !important;
}

#footer-sections a {
  background-image: none !important;
}

I added your suggested code beneath, but it didn't work. Appreciate the help! If you think of anything else please let me know. Thank you again!

18 hours ago, TD_Rand said:

 

Are you use Business Plan? We can try another code

Add to Homepage Header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() { 
		$('article section:nth-child(1)').click(function() {
			var link = $(this).text(),
				href = "https://perimeterpics.com/lucyhawkes";
			window.location.href=href;
		});
  		$('article section:nth-child(2)').click(function() {
			var link = $(this).text(),
				href = "https://perimeterpics.com/delirious";
			window.location.href=href;
		});
  		$('article section:nth-child(3)').click(function() {
			var link = $(this).text(),
				href = "https://perimeterpics.com/colossus";
			window.location.href=href;
		});
});
</script>

On 3/18/2022 at 10:16 PM, tuanphan said:

Add to Homepage Header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() { 
		$('article section:nth-child(1)').click(function() {
			var link = $(this).text(),
				href = "https://perimeterpics.com/lucyhawkes";
			window.location.href=href;
		});
  		$('article section:nth-child(2)').click(function() {
			var link = $(this).text(),
				href = "https://perimeterpics.com/delirious";
			window.location.href=href;
		});
  		$('article section:nth-child(3)').click(function() {
			var link = $(this).text(),
				href = "https://perimeterpics.com/colossus";
			window.location.href=href;
		});
});
</script>

Hi Tuanphan! Thanks again for your help. I actually implemented these changes, and it was working. But now, when I try to update the site, the code is no longer in the homepage header - yet it works. Now, if I add an image block to the main page and want to make it clickthrough, I'm a bit unsure how to do that. Should I reinsert the code to header (it seems to be working without)? Many thanks! Tommy

On 5/13/2022 at 8:07 PM, TD_Rand said:

 

The code has 3 parts (similar with different class name)

$('article section:nth-child(1)').click(function() {
			var link = $(this).text(),
				href = "https://perimeterpics.com/lucyhawkes";
			window.location.href=href;
		});

You will see article section:nth-child(1), article section:nth-child(2), article section:nth-child(3). It means first, second, third section

When you add a new section, just repeat the code with new url, eg for fouth section

$('article section:nth-child(4)').click(function() {
			var link = $(this).text(),
				href = "https://google.com";
			window.location.href=href;
		});

Thank you so much again for your help! Unfortunately, it no longer works. When I log in I don't see the code at all. I just inserted the code above for all the projects and it now appears as code in the header. Very strange. Any ideas?

The other weird thing, is the code works for every image block except the new one "Yulisa"

On 5/16/2022 at 7:31 PM, TD_Rand said:

Thank you so much again for your help! Unfortunately, it no longer works. When I log in I don't see the code at all. I just inserted the code above for all the projects and it now appears as code in the header. Very strange. Any ideas?

Script code need to be wrap in <script> and </script>

It looks like you removed script tags so It appears on top of page