Clickable image in list content item

Site URL: https://monroe-dems.squarespace.com

When I add an image to a list item (which I have displayed as a carousel on the front page), I don't see a way to add a URL and make the image clickable.  Am I missing something, or is there a workaround?  I'm using the carousel view but I assume it would apply to the other views as well.

You can add a button with link. Then we will give the code to pass button links to image (& use code to remove button later)

On 9/8/2021 at 9:50 AM, tuanphan said:

You can add a button with link. Then we will give the code to pass button links to image (& use code to remove button later)

Hey, I’ve created buttons, how do I pass it to image ? Thanks 

On 9/13/2021 at 3:08 PM, ElizLdn said:

Hey, I’ve created buttons, how do I pass it to image ? Thanks 

use this CSS, if it doesn't work, please share link to page where you use List, we can check easier

/* Make list images clickable */
li.list-item {
    position: relative !important;
}
.list-item-content__button-container {
    position: absolute !important;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
a.list-item-content__button.sqs-block-button-element {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    color: transparent !important;
    background-color: transparent !important;
}

On 9/15/2021 at 4:56 AM, tuanphan said:

use this CSS, if it doesn't work, please share link to page where you use List, we can check easier

/* Make list images clickable */
li.list-item {
    position: relative !important;
}
.list-item-content__button-container {
    position: absolute !important;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
a.list-item-content__button.sqs-block-button-element {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    color: transparent !important;
    background-color: transparent !important;
}

 

Thanks! The code works but only to an extent.

I’m having two issues with it: 

1. The transparency has suddenly stopped working, so you can see the black square when clicking on it. It was working fine before so not sure what happened. Sometimes it works and sometimes it doesn’t so its very inconsistent.

2. The second problem is that when i have just one item in a list, the clickable area covered is not 100%, it only covers a small space, maybe because the image is slightly larger, I’m not sure but it means that you have to click on the very bottom of the picture for it to work instead of clicking anywhere on the picture. 

On 9/30/2021 at 5:10 PM, ElizLdn said:

 

 

Thanks! The code works but only to an extent.

I’m having two issues with it: 

1. The transparency has suddenly stopped working, so you can see the black square when clicking on it. It was working fine before so not sure what happened. Sometimes it works and sometimes it doesn’t so its very inconsistent.

2. The second problem is that when i have just one item in a list, the clickable area covered is not 100%, it only covers a small space, maybe because the image is slightly larger, I’m not sure but it means that you have to click on the very bottom of the picture for it to work instead of clicking anywhere on the picture. 

Can you share link to page where you use list on your site? We can check it again easier

On 9/14/2021 at 11:56 PM, tuanphan said:

use this CSS, if it doesn't work, please share link to page where you use List, we can check easier

/* Make list images clickable */
li.list-item {
    position: relative !important;
}
.list-item-content__button-container {
    position: absolute !important;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
a.list-item-content__button.sqs-block-button-element {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    color: transparent !important;
    background-color: transparent !important;
}

 

Hi there,

I tried this code but then all of the buttons in all of my list sections disappeared.

When I tried it again deleting the below section, the formatting of my buttons was all off. Any suggestions? I don't need to hide the buttons, just make the images clickable.

This is my site (it's a work in progress): https://tarpon-fox-f79k.squarespace.com/hotels

Thanks so much!

a.list-item-content__button.sqs-block-button-element {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    color: transparent !important;
    background-color: transparent !important;
}

2 hours ago, GP3 said:

the formatting of my buttons was all off. Any suggestions?

I suspect that the issue you are having is the code was designed for user list carousel style and your user list is simple. Two different styles of user lists may require different CSS.

Since you have jQuery installed I suggest a different method. Please see the following.

Let us know how it goes.

On 12/21/2021 at 2:38 AM, GP3 said:

Hi there,

I tried this code but then all of the buttons in all of my list sections disappeared.

When I tried it again deleting the below section, the formatting of my buttons was all off. Any suggestions? I don't need to hide the buttons, just make the images clickable.

This is my site (it's a work in progress): https://tarpon-fox-f79k.squarespace.com/hotels

Thanks so much!

a.list-item-content__button.sqs-block-button-element {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    color: transparent !important;
    background-color: transparent !important;
}

This code will remove butotn & pass button link to image link.

If you want image clickable + Keep button, you can add a text link in Description, then we will give the code to pass link from description to image.

Quote

This code will remove butotn & pass button link to image link.

If you want image clickable + Keep button, you can add a text link in Description, then we will give the code to pass link from description to image.

@tuanphan could you share the code to keep the button as well please?

11 hours ago, Dilliaglio said:

@tuanphan could you share the code to keep the button as well please?

Try this code

/* List section - Make clickable - Keep button */
li.list-item {
    position: relative;
}
.list-item-content__description {
    position: static;
}
.list-item-content__description a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    color: transparent !important;
    background-color: transparent !important;
}

19 hours ago, tuanphan said:

Try this code

/* List section - Make clickable - Keep button */
li.list-item {
    position: relative;
}
.list-item-content__description {
    position: static;
}
.list-item-content__description a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    color: transparent !important;
    background-color: transparent !important;
}

 

Hi, @tuanphan - I've just tried this but the image link no longer works if the button stays. I'm trying to do this on my home page - link: https://tanyaarya.co.uk 

I'd like to keep the button text (I've removed box formatting so it doesn't look like a button) and then also keep the image as clickable. 

On 1/6/2022 at 4:54 AM, thesimpleexplorer said:

Hi, @tuanphan - I've just tried this but the image link no longer works if the button stays. I'm trying to do this on my home page - link: https://tanyaarya.co.uk 

I'd like to keep the button text (I've removed box formatting so it doesn't look like a button) and then also keep the image as clickable. 

 

Can you add text link in item description? Then we will give code to pass text link to image  link (&hide text then)

2 hours ago, tuanphan said:

Can you add text link in item description? Then we will give code to pass text link to image  link (&hide text then)

Will this keep both the text and image?

9 hours ago, thesimpleexplorer said:

Will this keep both the text and image?

 

What do you mean?

Could I please have code for this same affect for a simple list squarespace 7.1 ? 

@tuanphan
 

22 hours ago, moonlitdesign said:

Could I please have code for this same affect for a simple list squarespace 7.1 ? 

@tuanphan
 

Add a text link in description & add this to Design > Custom CSS

/* List section - Make clickable - Keep button */
body li.list-item {
    position: relative;
}
body .list-item-content__description {
    position: static;
}
body .list-item-content__description a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    color: transparent !important;
    background-color: transparent !important;
}

4 hours ago, tuanphan said:

Add a text link in description & add this to Design > Custom CSS

/* List section - Make clickable - Keep button */
body li.list-item {
    position: relative;
}
body .list-item-content__description {
    position: static;
}
body .list-item-content__description a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    color: transparent !important;
    background-color: transparent !important;
}

 

ABSOLUTE GENIUS thank you this worked a treat!

Hello. 

I did this and it works wonderfully BUT then it takes away the swipe option for the list. Is there a way to have the carousel swipable and cklickable? I have a recipe blog and I want my readers to be able to swipe through few posts and click on the image but not just a small button. All the big wordpress food blogs have it but I can't seem to make it work on my squarespace. 

On 4/15/2022 at 9:33 PM, Helgamaria1992 said:

Hello. 

I did this and it works wonderfully BUT then it takes away the swipe option for the list. Is there a way to have the carousel swipable and cklickable? I have a recipe blog and I want my readers to be able to swipe through few posts and click on the image but not just a small button. All the big wordpress food blogs have it but I can't seem to make it work on my squarespace. 

 

Can you share link to your site? We can take a look (not sure can help with this)

On 12/25/2021 at 7:50 AM, tuanphan said:

This code will remove butotn & pass button link to image link.

If you want image clickable + Keep button, you can add a text link in Description, then we will give the code to pass link from description to image.

Hi, how to add a text link to dscription?

here is my website link:

https://flower-toucan-p5d7.squarespace.com/

I ahve my lists on first page with section titles as services. I added your code which removed the buttons. I am unable to understand how to add text links to descriptions. can you please help?

Thank you

8 hours ago, Asiya said:

Hi, how to add a text link to dscription?

here is my website link:

https://flower-toucan-p5d7.squarespace.com/

I ahve my lists on first page with section titles as services. I added your code which removed the buttons. I am unable to understand how to add text links to descriptions. can you please help?

Thank you

After I add a text link in descrition my text disappears. every thing is linked now but the text does not shows up.

On 4/28/2022 at 7:46 AM, Asiya said:

After I add a text link in descrition my text disappears. every thing is linked now but the text does not shows up.

Your screenshot looks fine. Can you explain?

Hi there,

I'm having the same issue - I have a simple list with an image & associated button, but I would like the image to be clickable with the same URL as in the button.

I've attached a screenshot to show you want I mean.

FYI in the future, I'll be adding buttons to the other images in the list when the guides are available, so each image needs to have the URL of it's associated button when I add the button - if that makes sense 🙂

Thanks so much in advance for your help!

3 hours ago, LisaMaf13 said:

I have a simple list with an image & associated button, but I would like the image to be clickable with the same URL as in the button.

See the answer I provided here: