Blog Post Banner Images (Preview Guide)
Super Plugin Info
Works with Squarespace 7.1
Requires Business Plan or Higher
Uses CSS Editor and Code Injection
Step 1. Upload Blog Post Thumbnail
Go to the blog post’s settings and upload an image to the post’s main thumbnail box. Be sure not to upload the image to the social image box by mistake.
Step 2. Add this code to Header Code Injection
Step 3. Add this code to Footer Code Injection
Step 4. Add this code to Custom CSS
Step 5 (a). Customizable Options - Footer Code Ijnection
These options are available in Footer Code Injection.
Text Animation On Page Load (On or Off)
Step 5 (b). Customizable Options - Custom CSS
These options are available in Custom CSS.
Banner Height
Banner Overlay Color
Banner Text Size, Color, and Alignment
Banner Text Padding and Max Width
Banner Image Position
Zoom Animation On Page Load (Speed Timer, On or Off)
⚠️ Important Note - Double Title Text (This is Not a Bug)
You may see the blog post’s title twice while in edit mode – within the banner and below the banner.
The second title (below the banner) is the area where you can edit the title of the post. This is the only place Squarespace allows for editing this. Normal visitors will only see the title in the banner.
Plugin Notes
A blog post thumbnail image is required to be uploaded.
The banner image will be placed directly below the header. Due to Squarespace limitations, transparent header is not available.
Troubleshooting (Plugin Not Working)
Ensure the image has been added to the default thumbnail box and not to the social image box.