Ghost Plugins

View Original

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

See this content in the original post

Step 3. Add this code to Footer Code Injection

See this content in the original post

Step 4. Add this code to Custom CSS

See this content in the original post

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.