Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
kaitlynrainfactory

Remove the Gallery Links in a Summary Block?

Question

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

Edited by kaitlynrainfactory
clarifying I want to remove functionality.

Share this post


Link to post

19 answers to this question

Recommended Posts

  • 11

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>




Edited by billthenerd
Initial Revision

Share this post


Link to post
  • 7

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.

Share this post


Link to post
  • 1

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.

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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?

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0

I've made $64,000 so far this year working online and I'm a full time student. Im using an online business opportunity I heard about and I've made such great money. It's really user friendly and I'm just so happy that I found out about it.

Heres what I do,................ www.worknow88.com

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0

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?

Share this post


Link to post
Guest
This topic is now closed to further replies.

×
×
  • Create New...