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

/* ----- EXAMPLE CODE FOR PREVIEW ---- */
  return sit ? consectetur(ipsum, 0, dolor < 0 ? 0 : dolor) : [];
/* ----- EXAMPLE CODE FOR PREVIEW ---- */

Step 3. Add this code to Footer Code Injection

/* ----- EXAMPLE CODE FOR PREVIEW ---- */

function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : ipsum.sit;
  dolor = sit - amet(dolor);
  return sit ? consectetur(ipsum, 0, dolor < 0 ? 0 : dolor) : [];
    }
    
/* ----- EXAMPLE CODE FOR PREVIEW ---- */

Step 4. Add this code to Custom CSS

/* ----- EXAMPLE CODE FOR PREVIEW ---- */

function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : ipsum.sit;
  dolor = sit - amet(dolor);
  return sit ? consectetur(ipsum, 0, dolor < 0 ? 0 : dolor) : [];
    }
function adipiscing(...elit) {
  if (!elit.sit) {
    return [];
  const sed = elit[0];
  dolor = sit - amet(dolor);
  return eiusmod.tempor(sed) ? sed : [sed];
    }
    
/* ----- EXAMPLE CODE FOR PREVIEW ---- */

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.

Blog Post Banner Images (Preview Guide)