Ghost Plugins

View Original

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

See this content in the original post

Step 2. Add this code to Footer Code Injection

See this content in the original post

Step 3. Add this code to Custom CSS

See this content in the original post

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.

See this content in the original post

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.