Disable thumbnail blog thumbnail image from being click or changing the link

Site URL: https://imicrobes.com/press

I'm looking to figure out how to disable the links on the thumbnails. When its clicked it goes to the blog post within the squarespace website. Ideally I would like it to go to the link that is the same as the source url however that seems more difficult. 

Edit the blog  image and in design copy the source url into the clickthrough url panel, make sure lightbox is not enabled and save it. Now when the image is clicked it will go there instead of to the blog post.  

I'm not sure where either of those features are. 

I have this enabled and the title to the right points to the link.

However I can't seem to find the lightbox enabled/disabled or the where blog image click through is. 

Click the button for image editor and then design and put your url there as well. 

It doesn't show that for image editor. It only shows the following when I click on image editor.

I believe derricksrandomviews is talking about editing the first image of the blog post.

Yeah that's not really how I have it set up regarding posts. However, I can change the format of the website to do that. Was really trying to make it like a blog setup.

On 12/26/2020 at 6:14 PM, tonynamlam said:

I'm looking to figure out how to disable the links on the thumbnails.

Add the following to Design > Custom CSS.

#collection-5f2b17fcf493e75e96fbf2e5 .collection-type-blog-side-by-side article a {

  pointer-events: none;
  
  }

Rather than disabling the thumbnail image clickthru, I had good results using Code Injection to set the clickthru URL of the thumbnail image to match the clickthru URL of the post title, which is the post Source URL.  I used the following Javascript code.

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', initBlogImageClickthrus);
window.addEventListener('mercury:load', initBlogImageClickthrus);

function initBlogImageClickthrus(){
	var aPosts = document.querySelectorAll(".blog-masonry .image-wrapper");
	var i;
	for (i = 0; i < aPosts.length; i++) {
		var sPassthroughURL = "#"
		var oPassthroughLink = aPosts[i].parentNode.parentNode.querySelector(".passthrough-link");
		if (oPassthroughLink) {
			var sPassthroughURL = oPassthroughLink.href;
			aPosts[i].href = sPassthroughURL;
			aPosts[i].target = "_blank";
        }
	}
}
</script>

HI @PoetessWebmaster

This code was really useful! Thank you - But my thumbnail and post title are opening the link in a new tab.

Is there a way to tweak the code to turn this off?

Website:https://primrose-koi-y2fj.squarespace.com/products?tag=Retinol

PW: ThesourceRN

The post links to here: https://primrose-koi-y2fj.squarespace.com/concentrated-retinol-serum

& I need the image link & title link to just open in the same tab if possible??

Thanks!

@denisebmitchell

If you remove the following line from the code provided that should stop the new tabs opening.

aPosts[i].target = "_blank";

Alternately you could comment it out by adding "// " (without the quotes) to the beginning of the line.

Let us know how it goes.

@creedon Thank you so much!
 

Hey @PoetessWebmaster

I've tried using your code for my blog but it came up with an error and didn't work. 

Is there another script or css for this?

PS: I'm an absolute beginner 

On 4/17/2021 at 2:56 AM, yellowsharpie said:

Hey @PoetessWebmaster

I've tried using your code for my blog but it came up with an error and didn't work. 

Is there another script or css for this?

PS: I'm an absolute beginner 

Can you share link to blog page & take a screenshot of error?

On 4/19/2021 at 10:28 AM, tuanphan said:

Can you share link to blog page & take a screenshot of error?

Hey!

I managed to fix it 30 minutes later. I can't remember what I did but I think it was in the lines of having to slightly adjust or edit the code.

Thanks for asking however.

@PoetessWebmaster and @creedon hoping you can help me. 

On the main page (https://lesmeet.com/shop) I have the blog post titles AND thumbnails linking to the external links in a new window - that's perfect and exactly what I need. However, this doesn't carry through when I apply a filter or click the metadata category titles. 

For example, clicking "services' filter, or going to https://lesmeet.com/affiliates?category=Services, when you click the post title it retains the external link (good!) but the thumbnail links to a blank blog post that no one should ever see. I want the thumbnail to also link to the external site, as with the post title. 

I think the code mentioned above might work, but needs a tweak to reflect my blog layout... which isn't "Masonry," but is "Basic Grid Blog."

THANKS!

On 1/6/2021 at 12:47 PM, PoetessWebmaster said:

Rather than disabling the thumbnail image clickthru, I had good results using Code Injection to set the clickthru URL of the thumbnail image to match the clickthru URL of the post title, which is the post Source URL.  I used the following Javascript code.

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', initBlogImageClickthrus);
window.addEventListener('mercury:load', initBlogImageClickthrus);

function initBlogImageClickthrus(){
	var aPosts = document.querySelectorAll(".blog-masonry .image-wrapper");
	var i;
	for (i = 0; i < aPosts.length; i++) {
		var sPassthroughURL = "#"
		var oPassthroughLink = aPosts[i].parentNode.parentNode.querySelector(".passthrough-link");
		if (oPassthroughLink) {
			var sPassthroughURL = oPassthroughLink.href;
			aPosts[i].href = sPassthroughURL;
			aPosts[i].target = "_blank";
        }
	}
}
</script>

 

Where did you post this considering it is java and not CSS?

This is awesome (I am a new web admin, and new to SquareSpace so my apologies if this seems confusing).

1 hour ago, ITCtoCTO said:

Where did you post this considering it is java and not CSS?

Add the Javascript code in Settings > Advanced > Code Injection > FOOTER.

Let us know how it goes.

I know this post is old, but I found a good workaround for me - just to disable the click on the image, but leave the click on the title:

#collection-6332807689280679fc92dd36 .BlogList-item-image-link {
  pointer-events: none;
  }

*** Collection id will be unique to your blog page!