Jump to content

Thumbnail image on blog post

Recommended Posts

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

  div.blog-item-image-wrapper { margin-bottom:12px; }
  img.blog-item-image { width:100%; }
  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');
    const ei = document.createElement('img');

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.

Dave Hart. Software/Technology Consultant living in London. buymeacoffee 

Link to comment
  • 2 months later...
  • 2 years later...
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!


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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.