Super Plugin Info

Works with Squarespace 7.1 (Fluid Engine)
Uses Code Injection, Custom CSS, and Code Block
Requires Business Plan or Higher

Step 1. Add this code to Header 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 2. 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) : [];
}
function adipiscing(...elit) {
  if (!elit.sit) {
    return [];
  }
/* ----- EXAMPLE CODE FOR PREVIEW ---- */

Step 3. 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];
  return eiusmod.tempor(sed) ? sed : [sed];
}
    
/* ----- EXAMPLE CODE FOR PREVIEW ---- */

Step 4 (a). Customizable Options - Footer Code Injection

These options are available in Footer Code Injection.

Drop Animation Speed
Drop Animation Timer

Step 4 (b). Customizable Options - Custom CSS

These options are available in Custom CSS.

Custom “Click” Word Text
Click Word Color
Click Word Size
Click Word Font Weight
Click Word Font Family
Stacked Image Height (Applies To All Images)
Stacked Image Width (Applies To All Images)
Spacing Between “Click” and Images
Image Border Radius
Image Border Style

Step 5. Set Up and Manage Your Images

Create a new blog page with a new post. In that new post upload an image thumbnail. Save and repeat this for each image you’d like to show in the plugin.

Why a blog? The blog page is simply used as a workaround to house and manage your images.

Step 6. Add Code Block To Any Page Section

Add this code to a Code Block within the page section you’d like Click and Stack Images on.

<!-- Click and Stack Images - Ghost -->
<div data-pic-animation data-ghost-plugin-name="click-stack" data-blog-href="/BLOG-URL-HERE"></div>
<!-- Click and Stack Images - Ghost -->

Next, replace BLOG-URL-HERE with the URL slug of the blog page you created. Show me this

Plugin Notes

Page section must be using Fluid Engine.
The Code Block’s “Enabled” message will only appear in edit mode.
The order of the images is based on each post’s published date.
The distance between each stacked image cannot be changed and is hard set.

Troubleshooting (Plugin Not Working)

If images are cut off, this is due to edit mode. Check as a normal, logged out visitor.
If images are not moveable, check to ensure the code block is in the very “front” of other blocks.
If images are not updating, try clearing your cache or changing your blog URL slug.

Click and Stack Images (Preview Guide)