Thumbnail image on blog post

Site URL: https://raquelrusso.com/blog

Hello!

Is it possible to show the thumbnail image inside the blog post page? Preferably in a similar position as it appears in the blog list? I've attached screenshots to better show what I mean. 

Thank you so much to anyone who knows how to do this!

You could of course add it manually at the top of your blog post, but you'd have to do that for each post and I'm assuming that's not the question/answer you're looking for.

There's no option to do this automatically in the latest version of squarespace (7.1) without some javascript as far as I can tell, so you'd need to have a business/premium account to do this option. I don't think its the best way to do it to be honest, as there will be a bit of a lag as the image element is dynamically added in, but posting it here in case anyone finds it useful.

Open the Blog's Settings, Go To Advanced and then add this script to the Post Blog Code Injection

<style>
  div.blog-item-image-wrapper { margin-bottom:12px; }
  img.blog-item-image { width:100%; }
</style>
<script>
  const i = document.querySelector('meta[itemprop="image"]');
  const u = !!i ? i.getAttribute('content') : '';
  if (u) {
    const c1 = document.querySelector('.blog-item-inner-wrapper');
    const c2 = document.querySelector('.blog-item-content-wrapper');
    const ed = document.createElement('div');
    ed.setAttribute('class','blog-item-image-wrapper');
    const ei = document.createElement('img');
    ei.setAttribute('class','blog-item-image');
    ei.setAttribute('src',u);
    ed.appendChild(ei);
    c1.insertBefore(ed,c2);
  }
</script>

you could then style how this image is displayed with the two classes at the top of this code.

I would recommend raising this as a feature request with Squarespace as I'd imagine others have asked for an option to include the picture at the top of the blog post.

Thank you so much for your time!

I will do a feature request as you suggest and maybe someday it will be possible in Squarespace 7.1.

Thanks once again!

Hi Dave, I actually have the same question, but I'm trying to get the thumbnail to show up above the meta/title of my post instead of below. I'm not familiar with javascript so I can't seem to figure out how to do this with your code. Any help would be wonderful!

Individual post page:

https://www.curiosityandcuriosities.com/collect/petridishstudy-amoeboid
password: ifyouknowyouknow

Thank you!

in the javascript, the varible c2 finds the element that you want to insert the picture before, so change that from the "content" wrapper to the "top" wrapper.

    const c2 = document.querySelector('.blog-item-top-wrapper');

all the other code can stay the same, hope that helps

🙌 Thank you so much for your help! 

Thanks so much for this. I just have a follow on question.

Now that squarespace allows blogs behind a paywall to show a preview with the title and the excerpt, is it also possible to include this featured image?

Thank you!

https://www.david-taylor.org/paid-blog/why-orchestras-stick-with-bad-decisions

On 3/15/2024 at 6:28 PM, IdTaylor said:

Thanks so much for this. I just have a follow on question.

Now that squarespace allows blogs behind a paywall to show a preview with the title and the excerpt, is it also possible to include this featured image?

Thank you!

https://www.david-taylor.org/paid-blog/why-orchestras-stick-with-bad-decisions

I just tried above code and it still run. Or you want image in another position? Which position?