Breaking News
recent

How To Add Banner Image For Individual Blog Posts In Squarespace 7.1

UPDATED on 11/04/2024

You might be well aware that in Squarespace 7.1, by default there is no way to show any banner image or a featured image on the individual blog post page. I had even contacted the Squarespace support team to ask whether it was possible to a banner image for the individual blog posts but they said that at least at present they do not have any such kind of facility available.

So, I took the task in my hands and created a custom coded solution for displaying a featured banner image at the top of each individual blog post in Squarespace.

Here is a screenshot of what we are trying to achieve.



Following is the entire step by step guide to show you exactly how to do it yourself. And just in case if any of the steps is unclear, I have also shared the Squarespace Tutorial video at the end of the post showing the entire process step by step.

Step 1: Add the jQuery support for your Squarespace website.

Go to 'Settings' > 'Advanced' > 'Code Injection' and then paste the following code in the header.



Step 2: Add the custom code for inserting the banner images to the individual blog posts.



Step 3: Go to 'Post Blog Item Code Injection' and paste the below mentioned code in there.



Copy the below given code in the Code Injection area.

Now, when you create a new blog post, add a featured image to your each blog post and that same featured image will be automatically used to create a banner image for your individual blog post in Squarespace 7.1

The above code will use the featured image that you set for each blog post as its banner image. In case, if you want to use one fixed image as the banner image for all the blog posts, then you can use the code given below. In this case, you will not need to set the featured image for individual blog posts.


In the above code, you will need to replace the YOUR_IMAGE_LINK_HERE with the link to the image that you want to use as the banner image. Make sure that the link is enclosed within double quotes.

Don't Fall Into The TRAP

Some so-called experts on the internet are selling this same solution as plugins for whooping prices ranging from $19.99 to $59.99 . I've attached the screenshot of one such plugin here for your reference. I don't want to share their website but Be smart and please don't fall into such traps.  



I'm giving away this code completely FREE. If this code helped you and you like what I do, you could support me by buying me a coffee 😊 It encourages me to work on such tasks that support the community.


Following is the Squarespace Tutorial video, showing the entire process of how you can add the custom code provided here, on your Squarespace website and get the banner images for blog posts.


I hope you found this article helpful. I you need any further assistance with anything you may contact me here, anytime.


Powered by Blogger.