Ghost has a new look! Orders and accounts made before October 19th, 2026 are available on our legacy platform.
Ghost Plugins
Legacy Plugin

Blog Post Banner Image

BlogsImagesCSS + JSWorks with Squarespace 7.1, Requires Core/Business Plan or Higher, Uses CSS Editor and Code InjectionFree

The original library, featuring hundreds of free copy-and-paste plugins for Squarespace. These legacy plugins are preserved as they were originally released and are available as-is. For no-code plugins with visual editing and live previews, explore the current plugin library.

Overview

Add a banner image to Squarespace 7.1 blog posts.

Plugin Delivery

Free Plugin

This is a free plugin from the original Ghost Plugins library. Copy the code below and paste it into your Squarespace site. No purchase or account needed.

Squarespace Compatibility & Requirements

Compatibility notes preserved from the original release.

Works with Squarespace 7.1, Requires Core/Business Plan or Higher, Uses CSS Editor and Code InjectionSupported
Custom CSSRequired

Customizable Options

  • ⚠️ 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.

Install

Legacy plugins install by hand, there is no Plugin Studio build for this one.

  1. 1Copy the code from the Code Documentation section below.
  2. 2In Squarespace, open Website, Pages, Website Tools, Custom CSS for CSS, or Settings, Advanced, Code Injection for HTML and JavaScript.
  3. 3Paste the code, save, then refresh your site to see the plugin running.

Code Documentation

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.

2. Add this code to Header Code Injection Code 1.

3. Add this code to Footer Code Injection Code 2.

4. Add this code to Custom CSS Code 3.

5. Follow the parts below - 5(a). Customizable Options - Footer Code Ijnection These options are available in Footer Code Injection. - Text Animation On Page Load (On or Off)

- 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)

FAQ

Answers to common questions about setup, customization, and troubleshooting.

Is this plugin free?

Yes. Legacy plugins are free to use on any site, no account or purchase needed.

Will it work on my Squarespace version?

Legacy plugins were built for the version noted in Squarespace Compatibility & Requirements and are provided as-is. Newer platform changes may require small tweaks.

Can I customize it?

Yes. Edit the values in Script Settings or override the selectors listed under Classes and Styling in your Custom CSS.

Do you support legacy plugins?

Legacy plugins are no longer updated. For maintained plugins with Plugin Studio and ongoing support, browse the current plugin library.

Changelog

A history of updates released for this plugin.

Original release

Archived exactly as it shipped in the original plugin library. No further updates are planned for legacy plugins.

Community

Give claps, share your site, and talk with others using this plugin.

Community

0 claps

Show thanks for this plugin.

Loading…