How to make images in list section clickable?

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.

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!! 🌟😀🙏

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

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)

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

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)

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?

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?

6 hours ago, tuanphan said:

Can you share link to page where you have problem?

I want the list items clickable on this page https://sgftechcouncil.com but not on this page and a couple others https://sgftechcouncil.com/springfield-tech-community

The code seems to prevent external links from opening in a new window and it is difficult to copy text from a list item when needed. 

@paul2009 Is there a way to hide the button and just have the image and title clickable? Thx

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  ⬇️

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.

@paul2009 Any suggestions on the issue I was having with disabling clickable list items on certain pages or sections?

@paul2009 do you know of a way to make the links open in a new tab? (I set it within the button itself but it still opens in the same tab)

Thanks!!

Hi @paul2009 Have you ever noticed a page load jump after applying this code? After I apply the code, the page loads and then "resets" and jumps a few pixels. If I remove the code, this doesn't happen. I can't tell if it's the code or just me. Thanks for any input!

https://themissnergroup.squarespace.com/portfolio

PW: missner

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?

@paul2009 you're right, just noticed the jQuery from other snippets! I bet that's it! Thanks!

On 9/28/2023 at 8:32 PM, leahraine said:

@paul2009 do you know of a way to make the links open in a new tab? (I set it within the button itself but it still opens in the same tab)

Thanks!!

did anyone figure this out? @paul2009

I tried 2 scripts, one from here which looks like gibberish but it works:

https://sf.digital/squarespace-solutions/make-squarespace-list-items-clickable

and one from here:

https://www.primitusconsultancy.co.uk/blog/how-to-make-squarespace-list-items-clickable

but both scripts ignore Squarespace's Open-link-in-new-window settings.
Is there a solution to having both clickable list images and being able to open the links in new windows?

Any help much appreciated!

On 6/6/2024 at 5:10 AM, mutant said:

I tried 2 scripts, one from here which looks like gibberish but it works:

https://sf.digital/squarespace-solutions/make-squarespace-list-items-clickable

and one from here:

https://www.primitusconsultancy.co.uk/blog/how-to-make-squarespace-list-items-clickable

but both scripts ignore Squarespace's Open-link-in-new-window settings.
Is there a solution to having both clickable list images and being able to open the links in new windows?

Any help much appreciated!

Can you share link to page where you use list? 

Thanks for checking in on me. Appreciated.

Problem is solved: the solution from @fncreativeconsole is the only one that respects the Squarespace "open-in-new-window" settings. Their script here again:

<!--Make list items clickable-->
<script>
    // JavaScript code to link list-item-media to the closest button
    document.addEventListener("DOMContentLoaded", function() {
        var listItems = document.querySelectorAll('.list-item');

        listItems.forEach(function(listItem) {
            var media = listItem.querySelector('.list-item-media');
            var closestButton = listItem.querySelector('.list-item-content__button');

            if (media && closestButton) {
                media.addEventListener('click', function() {
                    closestButton.click(); // Trigger button click when list item media is clicked
                });
            }
        });
    });
</script>