Jump to content

Clickthrough Background Images

Recommended Posts

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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...
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!

 

Link to comment

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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...
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

 

Link to comment
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;
		});

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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?image.thumb.png.77fd1b8a32279235a691fc1301a65378.png

Link to comment
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?image.thumb.png.77fd1b8a32279235a691fc1301a65378.png

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

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.