Shape Shifting Images (Preview Guide)

Image + Video

Apr 5

Written By Ghost

Live Demo

Super Plugin Info

Works with Squarespace 7.1
Requires Business Plan or Higher
Uses Code Injection

Step 1. Add this code to Header Code Injection

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

Step 2. Add this code to Footer Code Injection

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

Step 3. Add an Image Block

Add an image block to any page, upload an image, and apply these settings.

Layout: Inline (applies only to Classic Editor)
Design: Fill (Required)

⚠️ Important: Add a + (plus sign) to the image block’s image alt text box.

Plugin Notes

Only compatible with image blocks set to inline layout (if using Classic Editor).
You are not able to adjust the shifting speed or shape.
If the image is replaced, you must add + again to the image block.
It’s recommended to keep the original crop of the image and not apply a shape option.

Troubleshooting (Plugin Not Working)

The + sign has been added to the image’s alt text box.
Only compatible with image blocks and will not work with other images and galleries.

Squarespace 7.1

Ghost http://www.ghostplugins.com