Removing links on blog images

Site URL: https://oliviagavoyannis.com/

Hello,

I want to remove the links on the images on my main blog post page so that users have to click on the post's 'read more' or title to go to the web pages I have linked rather than a blank blog post. Does anyone know how I do this?

Thanks so much!

Add to Home > Design > Custom CSS

/* disable image post click */
article.blog-basic-grid--container>div:first-child {
    pointer-events: none;
}

@tuanphanJust added this in and it works perfectly, thank you!

On 9/3/2020 at 5:04 AM, tuanphan said:

Add to Home > Design > Custom CSS

/* disable image post click */
article.blog-basic-grid--container>div:first-child {
    pointer-events: none;
}

 

Hi @tuanphan I am having the same issue. Tried this CSS code and it doesn't seem to work. Any suggestions? www.roundhilldesign.com/press 

On 11/24/2020 at 12:46 AM, HMC said:

 

Hi @tuanphan I am having the same issue. Tried this CSS code and it doesn't seem to work. Any suggestions? www.roundhilldesign.com/press 

Add to Home > Design > Custom CSS

section.blog-image-wrapper {
    pointer-events: none;
}

This worked for me! thank you for your support. These help articles are great!!

Hi @tuanphan

I am a complete squarespace novice. I have a website and just want to make one or two images not clickable. At the moment they open a new page which i don't want it to. How do I remove this function from an image? 

On 2/19/2021 at 5:48 PM, PHIG said:

Hi @tuanphan

I am a complete squarespace novice. I have a website and just want to make one or two images not clickable. At the moment they open a new page which i don't want it to. How do I remove this function from an image? 

If you share link to page where you have problem. We can check easier.

@tuanphan Hi I would like to block the link on all blog images. I have tried using the code you provided above however, I can’t get it to work. I am using the Universal Filter plug-in. Your help would be great!

https://turbot-kangaroo-4ghm.squarespace.com/gallery

On 11/25/2022 at 1:48 AM, wattsgraphics said:

@tuanphan Hi I would like to block the link on all blog images. I have tried using the code you provided above however, I can’t get it to work. I am using the Universal Filter plug-in. Your help would be great!

https://turbot-kangaroo-4ghm.squarespace.com/gallery

Add this to Design > Custom CSS

/* Gallery page disable image click */
body#collection-636e251896d49f2bbe60f43b article {
    pointer-events: none;
}

@tuanphan thanks for checking it out, although I still can't get it to work...

I have tried adding important!; to the end but this has not made a difference.

On 12/1/2022 at 12:44 AM, wattsgraphics said:

@tuanphan thanks for checking it out, although I still can't get it to work...

I have tried adding important!; to the end but this has not made a difference.

 

You placed code in wrong position, it made code invalid. Place code in 2 } other symbols will made code doesn't work properly.

Move code under Line 366.

Hi @tuanphan Sorry I did not see your reply, the code is working now! Thanks so much for your help 🙂

Hi, just wondering whether anyone can help (perhaps @tuanphan as you seem so knowledgeable here!).

I'm trying to follow the above but it's not working.

I installed Universal Filter on a blog page and have changed each blog post to a different source url, and that works when you click on the title or the 'read more' link however I want to disable the image hyperlink/clickthrough but everything I've tried doesn't work.

Page is: https://www.urbanhealthcouncil.com/reports

Any suggestions?

Thank you

Did some more searching and turns out this is the magic code that goes into the css:

.blog-basic-grid .blog-basic-grid--container.is-loaded>div:first-child {
    pointer-events: none;
}

that last code worked great!  How do i remove the link also from the blog tittle text on the featured/home page...? Thanks everyone!!

On 8/25/2023 at 10:24 AM, karini said:

that last code worked great!  How do i remove the link also from the blog tittle text on the featured/home page...? Thanks everyone!!

Can you share link to homepage? We can check easier

On 9/3/2020 at 10:04 AM, tuanphan said:

Add to Home > Design > Custom CSS

/* disable image post click */
article.blog-basic-grid--container>div:first-child {
    pointer-events: none;
}

 

hi @tuanphan this is great, but on my page I have two blogs, one is the main feed and another is via a summary block. Is there a way to remove the links from image in a summary block?

Merci

32 minutes ago, sanchez_77 said:

hi @tuanphan this is great, but on my page I have two blogs, one is the main feed and another is via a summary block. Is there a way to remove the links from image in a summary block?

Merci

Add these code for remove the links from image in a summary block.

.summary-item .summary-thumbnail-outer-container{
  pointer-events: none !important;
}

On 10/18/2023 at 5:27 PM, Web_Solutions said:

 

Add these code for remove the links from image in a summary block.

.summary-item .summary-thumbnail-outer-container{
  pointer-events: none !important;
}

 

thanks, much appreciated.

Hi, 

I'm having a similar issue with summary blocks, they now link through to non-existent pages which I'm pretty sure they didn't when I set it up. I don't want these sections to be clickable, I just want them as content with no hyperlink but I can't see how to remove the link. I tried the code injection suggested here under 'page settings > advanced' but that doesn't work (I don't want to apply it site-wide just to specific pages).

https://www.kenttowbars.co.uk/socket-wiring-options

^ This page content is split into two columns/sections, but I don't want them to appear as hyperlinks just content. If there is a solution I will also need to apply it here (same problem): https://www.kenttowbars.co.uk/towbar-types

Thankyou for your time 👍

Just to be clear I want to remove the hyperlinks from the images and the text, as you can see if you click them there is no page to link to (so a few people have complained the links are broken, when they weren't actually supposed to be links..). 😊

On 2/17/2024 at 4:32 PM, Toerag said:

Just to be clear I want to remove the hyperlinks from the images and the text, as you can see if you click them there is no page to link to (so a few people have complained the links are broken, when they weren't actually supposed to be links..). 😊

Use this code to Website > Website Tools > Custom CSS

/* writing options disable link */
.user-items-list-item-container[data-section-id="628637a8e6ac343848004edc"] * {
    pointer-events: none;
}

Hi Tuanphan, 

I tried that and it doesn't seem to be working. Here's my whole custom CSS file in case there is a format issue or conflict (it's at the bottom):

<style>
@media screen and (min-width: 768px) {
      .products.collection-content-wrapper .list-grid .grid-item *::-ms-backdrop, .products.collection-content-wrapper .list-grid .grid-item {
      box-sizing: border-box;
      float: left;
      margin: 1.5vw 1vw;
      width: calc(25% - 2 * 1.5vw);
  }
}

.ProductItem-gallery-slides-item{
  border: 1px solid black !important;
}
  .image-block-outer-wrapper {
    border: 1px solid #3d4531;
 }

/* Make list images clickable */
li.list-item {
    position: relative !important;
}
.list-item-content__button-container {
    position: absolute !important;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
a.list-item-content__button.sqs-block-button-element {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    color: transparent !important;
    background-color: transparent !important;
}

/* Home Towbar Fitting Carousel */
body#collection-62824da6e7f0424662cf9e30 {
li.list-item {
    position: relative !important;
}
.list-item-content__button-container {
    position: absolute !important;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
a.list-item-content__button.sqs-block-button-element {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    color: transparent !important;
    background-color: transparent !important;
    border: none !important;
}}
/* writing options disable links */
.user-items-list-item-container[data-section-id="628637a8e6ac343848004edc"] * {
    pointer-events: none;
}
</style>

Thank you again!

Hi,

It looks like you added to Code Injection, but with my code, you need to use Custom CSS box