Click and Stack Images (Preview Guide)
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
Step 2. Add this code to Footer Code Injection
Step 3. Add this code to Custom CSS
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.
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.