How to add a Banner Image to Squarespace Blog Posts
Note: This solution works for Squarespace 7.1 sites on the Business plan or higher.
A couple of weeks ago, I was working on a Designer for a Day® with SGL Partners, an employee benefits and HR specialist group. They are planning to create a significant amount of blog content this year and we wanted a way to easily level up the design of their blog posts while also saving them time with each post.
This reminded me of the much-loved Bedford template that was available in the older version of Squarespace, where you could have a banner image behind the title on Squarespace blog posts. Unfortunately, that’s not currently a built-in option in Squarespace 7.1.
But hooray for third party Squarespace plugins! We found the perfect solution in Ghost Plugins Blog Post Banner Images For Squarespace 7.1. By adding a few lines of code, we took the blog post pages from this:
to this:
all with no work going forward. Once the plugin is installed, Squarespace automatically creates the banner from the thumbnail image you add to your blog post settings and you never have to worry about it again.
Adding the Code
For this plugin, you’ll be adding code in three different places, but it’s just cut and paste! First you’ll paste provided code into Settings > Advanced > Code Injection. You’ll paste a few lines in the Header box and a few lines in the Footer box. Next you’ll paste the other provided code into Design > Custom CSS.
If things aren’t working at this point, make sure you’ve selected all the code and pasted it in correctly. I’ve accidentally missed a closing bracket before and spent a lot of time frustrated before checking I had pasted the correctly.
Customizing the Plugin
The plugin comes with some fancy animations for the text and the image, but for SGL we opted to turn these off - it was easy to do by making a simple tweak in the Footer Code Injection (for the text animation) and the Custom CSS (for the image animation).
Other customizations you can make include:
banner image height
banner image overlay color
post title text size, color, and alignment
banner image position
Don’t Panic
You’ll notice that the blog post title appears both over the banner image and as text above the post when you are logged into Squarespace. Don’t worry! On the live site, the post title only appears over the banner image.
If the banner image isn’t showing, first make sure you’ve uploaded a blog post thumbnail image. If it’s still not working, make sure you are in Squarespace 7.1 (check the Help menu), on a business plan or higher (check your Billing), and that you’ve copied the code exactly into those three areas noted above.
Adding a Banner Image on Squarespace Blog Posts
This was one of the quickest and easiest plugins I’ve added. It really was just copy and paste and a couple of settings tweaks. It looks fantastic, and the client is thrilled that their blog posts have an image automatically now - all without them having to do the work of adding image blocks within the post.
When to Use the Plugin
Definitely consider this plugin if you are using photographs for your blog post thumbnail images. It’s not the right solution for everyone - for example, I use graphics with post titles on them for my thumbnails, so this woudn’’t be a good fit for me. But it’s a great addition for many of my clients.
