How to Add Banner Image to Blog Post in Squarespace 7.1

How to Add Banner Image to Blog Post in Squarespace 7.1

1. Add this code to “Post Blog Item Code Injection”

  • Place the code in this area: Website > Blog Settings > Advanced > Post Blog Item Code Injection.


// WWW.SQUARESPELL.CO.UK //
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/willmyethewebsiteguy/BlogPostBannerFree@3.1/blogbanner-javascript.min.js"></script>
// WWW.SQUARESPELL.CO.UK //

2. Apply a unique style to individual blog posts:

  • To ensure a consistent appearance for all your blog posts, apply the following code to the header of your blog collection above the code you previously installed in Step 1. This code will create a standardized style that can be customized further using CSS.

Code Snippet:

<div data-wm-plugin="blog-post"></div>

3. Styling the Container:

  • Change the height of Image.

  • Code Snippet:

<style>
.wm-blog-banner {
min-height: 80vh !important;
}
</style>

  • Change the height of image on Mobile View.

<style>
@media(max-width:767px) {
.wm-blog-banner{
min-height:70vh;
}
}
</style>

Customization:

  • Banner Height: Adjust the value of min-height in the first style block to your desired height (e.g., 50vh for a half-screen banner).

To apply this code to your Squarespace site, simply follow the steps provided. If you encounter any issues or need further assistance, feel free to reach out to us—we’re here to help!