Jump to content

How to make images in list section clickable?

Go to solution Solved by paul2009,

Recommended Posts

Site URL: https://jaguar-grey-rryj.squarespace.com/all-treatments

Hello Circle people,

In this list section I would like to make each image clickable and link to the relevant page (same links as the buttons, and I want to keep the buttons).

https://jaguar-grey-rryj.squarespace.com/all-treatments

Would anyone be able to help?

Thanks in advance!

Emmanuelle.

Screen Shot 2022-06-11 at 8.34.56 pm.png

Edited by emm.farines
Link to comment
  • emm.farines changed the title to How to make images in list section clickable?
  • Solution
On 6/11/2022 at 11:36 AM, emm.farines said:

In this list section I would like to make each image clickable and link to the relevant page

Take a look at the solution I published here: Make Squarespace list items clickable.

This takes the link that you've assigned to each CTA button and applies it to the entire list item. This means that users can click the image or any other aspect of an item to trigger the CTA action.

Did this help? Please give feedback by clicking an icon below  ⬇️

Edited by paul2009

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
  • 2 weeks later...
On 6/11/2022 at 10:00 PM, paul2009 said:

Take a look at the solution I published here: Make Squarespace list items clickable.

This takes the link that you've assigned to each CTA button and applies it to the entire list item. This means that users can click the image or any other aspect of an item to trigger the CTA action.

Has this post helped you? Let everyone know by clicking an icon below  ⬇️

Thank you so much Paul, it has worked perfectly!! 🌟😀🙏

Link to comment
  • 7 months later...
On 2/23/2023 at 5:11 AM, kkedwards87 said:

 there a way to make this code work to open a lightbox? Thanks

You will need to use a plugin to enable lightbox first (Maybe enable on button, then use code to make image clickable, use button link)

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
  • 5 months later...
On 8/9/2023 at 5:17 AM, STC said:

This works great but there are certain pages I need to disable this on. Any suggestions?

You try moving the code to Page Settings > Advanced > Code Injection (for pages where you want list section clickable)

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
11 hours ago, tuanphan said:

You try moving the code to Page Settings > Advanced > Code Injection (for pages where you want list section clickable)

That didn't seem to work. I'm assuming it's because this code usually goes in the footer injection and on pages you can only put this code into the header injection?

Link to comment
18 hours ago, STC said:

That didn't seem to work. I'm assuming it's because this code usually goes in the footer injection and on pages you can only put this code into the header injection?

Can you share link to page where you have problem?

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
4 hours ago, GemmsyA said:

Is there a way to hide the button

You can hide buttons with CSS, like the example I have provided below. The exact CSS may depend on your site settings and whether you want to hide all buttons.

/* Hide all list item buttons */
.list-item-content__button.sqs-button-element--primary.sqs-block-button-element {
  display: none;
}

Did this help? Please give feedback by clicking an icon below  ⬇️

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
2 hours ago, paul2009 said:

You can hide buttons with CSS, like the example I have provided below. The exact CSS may depend on your site settings and whether you want to hide all buttons.

/* Hide all list item buttons */
.list-item-content__button.sqs-button-element--primary.sqs-block-button-element {
  display: none;
}

Did this help? Please give feedback by clicking an icon below  ⬇️

This is perfect, thanks so much. I only have one List section on my site so this is all I need. Really appreciate it.

Link to comment
  • 1 month later...
  • 5 months later...

I'm not seeing this on other sites, so it's difficult to say why. That said, there are multiple snippets of code and the site is attempting to load three different versions of jQuery 😳 so it may be worth tidying those up and checking again?

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
  • 2 months later...

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.