Hello, I'm using a Summary Block to build my website's team page. The problem is that the titles and images are clickable and I would like to remove this functionality. Is there a way I can make it display-only and remove the clickthrough links?

Here is my site's Team Page for reference:http://www.rainfactory.com/team

I found the answer! For anyone else, the code is here. Just insert this into your custom CSS.

/* disable lightbox on summary block images for team page*/
#collection-54a4758be4b00f7c5fa9f07d .summary-thumbnail-container {
pointer-events: none !important;
}

/* disable lightbox on summary block titles for team page*/
#collection-54a4758be4b00f7c5fa9f07d .summary-title-link {
pointer-events: none !important;
}

Here's a breakdown of what's going on.

#collection-538da227e4b091f0844215b6 .summary-thumbnail-container

The #collection-andauniquecode is used to target the summary block on a specific page. You can find the collection ID of your pages by viewing the source and looking in the

tag for id="#collection-andauniquecode".

.summary-thumbnail-container is a holder for all of the thumbnails. We can apply the fix at that level so that it impacts every thumbnail.

pointer-events: none !important;This tells the browser to make the targeted elements (the thumbnails) no longer clickable.

http://talk.cregox.com/t/remove-any-image-click-link-lightbox-from-gallery-page/7513/2?u=cawas similar answer, before I even saw yours ;P

basically same trick, using YUI javascript: http://answers.squarespace.com/questions/35218/disable-grid-views-lightbox/38178

This code works!As a dummy to coding, I needed more info to use Kaitlyn's code to disable lightboxes in Pacific template, summary block, carousal display (with no URLs) - anyone correct me if I'm misleading other dummies. I used Firefox web developer tools to find the:

tag for id="#collection-andauniquecode"In Firefox, While viewing the page where you want to disable lightboxes:Go to the Tools tab, Web developer, then Inspector - a window will open under your site page - from there its pretty easy to find the body tag ID for the collection displayed on the exact page you want to disable lightbox. Enter your customized code into to the CUSTOM CSS section in DESIGN. Thanks Kaitlyn!

Hi all, I'm stuck trying to do this - I'm trying to turn off links on a summary block but am a complete novice when it comes to code so dont know which bits I need to replace in the code provided above? I found what I think is the collection id, but am I putting this in the CSS bit or a code bloack and is there anything else I need to change?

Thanks in advance for any help :-)Clare

Hi all, I'm stuck trying to do this - I'm trying to turn off links on a summary block but am a complete novice when it comes to code so dont know which bits I need to replace in the code provided above? I found what I think is the collection id, but am I putting this in the CSS bit or a code bloack and is there anything else I need to change?

Thanks in advance for any help :-) Clare

Hey,

I've been searching everywhere for hours and still didn't find the solution. I tried copying and pasting this onto the custom css in "Design" and still nothing :(

I'm using Bedford if that changes anything.

I'd love some advice.

Thanks

the code doesn't work for me either.

i have used /* disable lightbox on summary block images for team page*/

collection-5625d2fae4b0581ff02851b8.summary-thumbnail-container

{pointer-events: none !important;}

/* disable lightbox on summary block titles for team page*/

collection-5625d2fae4b0581ff02851b8.summary-title-link

{pointer-events: none !important;}

collection id matches my gallery 'event roadmap' which is the gallery being shown in summary block, and i posted this code in Custom CSS in DESIGN, but no success.

any ideas?

Worked perfect in Pacific. Thank you!

Works for me, thanks @kaitlynrainfactory.

Just popped this code into the header of the page with the summary block on it via page header code injection:

    <style>
    /* disable lightbox on summary block images & titles*/
   .summary-thumbnail-container, .summary-title-link {pointer-events: none !important;}
   </style>

Thx @Billthenerd, I was using the previous solutions before and struggled to get it working for my secondary navigation pages and came back here to see if I'm doing something wrong and saw your updated solution and it works perfectly and is sooo simple!

Thanks, @BenE!

Thank you @billthenerd! That worked for me! :)

Great solution @billthenerd :) solved my problem with Bedford. Just a reminder for anyone who reads this post, if you have your summary block within a page in an index page you need to add this code to the index page not the respective page of the summary block.

Great solution@billthenerd - it worked on the Mojave theme we used on one of our microsites on all browsers BUT MicrosoftEdge.... (I know - some people still use Edge in the B2B space)Any workaround that would work on all browsers?

On Edge, the images are not clickable but the captions still are for some reason.

Agreed. Injected into the Flatiron theme and tested in Chrome, worked fine, however as @LilDelsa mentioned, it does not take effect while browsing in Microsoft Edge.

Me too, although, I didn't want to affect all the summaries in my index, so I targeted the individual page within the index using the custom css section (rather than page header code injection):

section#your-individual-page-url-here .summary-thumbnail-container, .summary-title-link {pointer-events: none !important; }

Thanks @billthenerd - billthelegend!

Thank you for this! Would you happen to know what code would be injected so that when you click the Image Title it points at an alternate specified link?