Linking a blog post title PLUS THUMBNAIL to another page

I have followed the instructions here: https://support.squarespace.com/hc/en-us/articles/206543297-Linking-a-blog-post-title-to-another-page

to link one blog post title to another page. 

However, this feature DOES NOT link the blog post thumbnail to the new URL in the summary.

How can I include the thumbnail in redirecting to the new link, whether through this method, URL mapping, or another way?

The blog post URL I want to redirect is: https://www.earthspeak.love/collective-courses-resources/heart-fire-activation-ritual

Thank you.

I run a podcast as a part of a blog I host on Squarespace. As a result, I regularly link to external URLs on my Squarespace blog. However, it seems I can only link the post title to the source URL and not the thumbnail.

I'd like to be able to link the post's thumbnail to the external URL as well. Currently, when people click the title, they end up at the correct content, but when they click the thumbnail, they're sent to an empty blog post.

Does anyone have any solutions for this problem? Someone else seems to have brought up something similar in November: 

Same issue. It's really poor UX. Did you find a solution? Or does anybody know how to implement this pls?

The workaround for this is to create a page with a Summary Block of your blog posts, instead of using the blog landing page. Summary Block thumbnails will link to the source URL you designate to the title as well.

The workaround for this is to create a page with a Summary Block of your blog posts, instead of using the blog landing page. Summary Block thumbnails will link to the source URL you designate to the title as well.

what if I need it to link to a specific blog post and not the entire blog page?

Is there a way to use the summary block work around, but have the link open in a new tab or window instead of navigating away from your page?

On 8/1/2020 at 3:39 AM, amykurt said:

Is there a way to use the summary block work around, but have the link open in a new tab or window instead of navigating away from your page?

 

Yes. You can if using Business Plan. Can you share link to page where you use summary block? We can check easier.

@tuanphan I'd like all the blog posts that have external links to be linked not just the Title but ALSO the image. Is this possible?

site: https://addenbrooke.squarespace.com/collection-list

pw: HelpMe!

22 hours ago, OldLadyStudio said:

@tuanphan I'd like all the blog posts that have external links to be linked not just the Title but ALSO the image. Is this possible?

site: https://addenbrooke.squarespace.com/collection-list

pw: HelpMe!

I see you solved this? Both are clickable now

Did anyone every figure this out? Would love to be able to link both the title and thumbnail!

On 10/30/2022 at 12:06 AM, nicbrancato said:

Did anyone every figure this out? Would love to be able to link both the title and thumbnail!

If you share link to blog page, we can help easier

@tuanphan I am also wondering what the fix is that you have (with a business plan). Thanks Tuanphan!

Link: https://mdiicecream.squarespace.com/media
Password: MDI12345

I am using the standard blog presentation; not a summary block (I'd prefer not to use a summary block if possible)

On 1/11/2023 at 5:19 AM, goodmajick said:

@tuanphan I am also wondering what the fix is that you have (with a business plan). Thanks Tuanphan!

Link: https://mdiicecream.squarespace.com/media
Password: MDI12345

I am using the standard blog presentation; not a summary block (I'd prefer not to use a summary block if possible)

Add to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
	$(".blog-basic-grid .blog-basic-grid--container.is-loaded").click(function() {
  window.location = $(this).find("a.blog-more-link").attr("href"); 
  return false;
});
});
</script>

On 1/13/2023 at 9:32 AM, tuanphan said:

Add to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
	$(".blog-basic-grid .blog-basic-grid--container.is-loaded").click(function() {
  window.location = $(this).find("a.blog-more-link").attr("href"); 
  return false;
});
});
</script>

 

@tuanphan You're a LEGEND! Thank you for this code. It has solved the problem of the blog post TITLES linking directly to the source articles. I am, however, still having a problem with getting the IMAGES corresponding with the blog title to link directly to the source articles. Is there something I am overlooking?

On 1/17/2023 at 7:51 AM, goodmajick said:

@tuanphan You're a LEGEND! Thank you for this code. It has solved the problem of the blog post TITLES linking directly to the source articles. I am, however, still having a problem with getting the IMAGES corresponding with the blog title to link directly to the source articles. Is there something I am overlooking?

Can you share link to page? We can check it again easier

12 hours ago, tuanphan said:

Can you share link to page? We can check it again easier

@tuanphan Absolutely. Page link for the blog in question is: https://mdiicecream.squarespace.com/media Password is: MDI12345

On 1/17/2023 at 7:51 AM, goodmajick said:

@tuanphan You're a LEGEND! Thank you for this code. It has solved the problem of the blog post TITLES linking directly to the source articles. I am, however, still having a problem with getting the IMAGES corresponding with the blog title to link directly to the source articles. Is there something I am overlooking?

Add this under the code

<style>
  .blog-basic-grid .blog-basic-grid--container.is-loaded>div:first-child {
    pointer-events: none;
}
.blog-basic-grid .blog-basic-grid--container.is-loaded:hover {
    cursor: pointer;
}
</style>

On 1/25/2023 at 7:05 PM, tuanphan said:

Add this under the code

<style>
  .blog-basic-grid .blog-basic-grid--container.is-loaded>div:first-child {
    pointer-events: none;
}
.blog-basic-grid .blog-basic-grid--container.is-loaded:hover {
    cursor: pointer;
}
</style>

 

@tuanphan THANK YOU for your continued help! This additional code snip worked great. The blog thumbnail images are no longer active as links - and this fixes my problem.

On 7/31/2020 at 1:39 PM, amykurt said:

Is there a way to use the summary block work around, but have the link open in a new tab or window instead of navigating away from your page?

 

Hi there was there an answer to this question here? 

I'm looking to either: 

Use the blogroll page and code to have the external link-away to a new tab on the featured image as well as the title

OR

use the summary block but need the link to open in a new tab. 

2 hours ago, JudeG said:

Hi there was there an answer to this question here? 

I'm looking to either: 

Use the blogroll page and code to have the external link-away to a new tab on the featured image as well as the title

OR

use the summary block but need the link to open in a new tab. 

Have you tried above code yet? And what is your site url?

15 hours ago, tuanphan said:

Have you tried above code yet? And what is your site url?

Hi thanks for any help! I did try the code above but it's not quite right. On my blog I have coded to remove the titles from blog posts so the page only shows images. I need the external link to be on thumbnails, with it clicking away in a new tab. So in other words no one would be going to any blog post pages (those are blank). It's just the image clicking away to external content. 

The blog isn't live yet but you can see it here 

https://www.giftsformystics.com/shop-oracle
pswrd: giftsblogtest

On 7/31/2020 at 1:39 PM, amykurt said:

Is there a way to use the summary block work around, but have the link open in a new tab or window instead of navigating away from your page?

 

Hi there was there an answer to this question here? 

I'm looking to either: 

Use the blogroll page and code to have the external link-away to a new tab on the featured image as well as the title

OR

use the summary block but need the link to open in a new tab. 

On 2/15/2023 at 11:36 AM, JudeG said:

Hi thanks for any help! I did try the code above but it's not quite right. On my blog I have coded to remove the titles from blog posts so the page only shows images. I need the external link to be on thumbnails, with it clicking away in a new tab. So in other words no one would be going to any blog post pages (those are blank). It's just the image clicking away to external content. 

The blog isn't live yet but you can see it here 

https://www.giftsformystics.com/shop-oracle
pswrd: giftsblogtest

 

Hi there was there an answer to this question here? 

I'm looking to either: 

Use the blogroll page and code to have the external link-away to a new tab on the featured image as well as the title

OR

use the summary block but need the link to open in a new tab. 

Or - another option could be to use the Summary Block. Maybe easier to code? I would just need a code to have the thumbnail images click away in a new tab.

4 minutes ago, JudeG said:

Or - another option could be to use the Summary Block. Maybe easier to code? I would just need a code to have the thumbnail images click away in a new tab.

Ok! I actually found that bit of code in another posting here. Here it is: 

Add to Advanced ⇢ Code Injection  ⇢ Footer
 

<script>
  document.querySelector('.summary-item a').setAttribute('target', '_blank');
</script>

Now, does anyone know a bit of code to hide the blogroll area from the blog page? So not in the back end obviously, but hide it from the published page? That way, I wouldn't have to make a separate page with the summary block on it.