Jump to content

removing summary title link with js troubleshoot

Recommended Posts

Hi all,

I am working on a site about a film festival and am trying to troubleshoot some Javascript I am writing. I pulled the code from this guide: https://css-tricks.com/how-to-disable-links/

This is an example of the page in question: https://naturethroughhereyes.com/program-list/discussion-a-feminine-perspective-in-pictures-salon-rose

As you can see, I have used a summary block to display the thumbnail and title from a gallery that is an "unlinked page". The gallery holds information on all the panelists for all the events at the film festival. Each panelist has an image, a title (their name) and an excerpt text with their bio and what panels they are sitting on.

What I like is that when the user clicks the thumbnail image a lightbox comes up that shows the panelists displayed on this page with their excerpts (bios) displayed. As the user clicks thru these thumbnails, they are constrained to only the thumbnails on the page. Makes sense.

The problem is if the user chooses to navigate via the title link. This link brings the user to the gallery page which is ugly and has ALL the panelists, not just the filtered panelists for this event which is confusing and a weird user experience.

My attempt at a solution is to simply make the


no longer hyperlink to this gallery page. I looked up how to disable a link and found the css-tricks guide referenced above. I am attempting to implement the "Surefire way" on that guide.

This is what I have in the footer code injector:

alt text

<!-- script disabling .summary-title-link links for summary blocks on event pages (to prevent the user from going to the unsightly and useless gallery page for the speaker information) --> 

* Use your preferred method of targeting a link
* document.getElementById('MyLink');
* document.querySelector('.link-class');
* document.querySelector('[href="https://unfetteredthoughts.net"]');
// "Disable" link by removing the href property
   link.href = '';

As you can test on the published page, the links very much still work. I am almost certain I haven't implemented this correctly but am a little bit out of my depth here.

Can someone help me translate this solution to my use case - it feels like a syntax problem.


Link to comment
  • Replies 3
  • Views 1.2k
  • Created
  • Last Reply

If you simply want to disable the links under the images, you can do it with some Custom CSS:

.sqs-block-summary-v2 .summary-block-setting-text-align-center .summary-title {
 pointer-events: none;

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide 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. Buying a coffee is generous but optional.

Link to comment


This topic is now archived and is closed to further replies.

This topic is now closed to further replies.
  • 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.