Super Plugin Info

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

Note: Only compatible on desktop. Images on mobile will have a more random stacked style.

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 [];
  const sed = elit[0];
  return eiusmod.tempor(sed) ? sed : [sed];
}
    
/* ----- 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 [];
  }
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 (a). Customizable Options - Footer Code Injection

These options are available in Footer Code Injection.

Minimum Image Height
Maximum Image Height
Image Spread Distance

Note: Image placement and min/max height applies randomly on each page load. To make all images the same size, set minimum and maximum height to the same value.

Step 4 (b). Customizable Options - Custom CSS

These options are available in Custom CSS.

Cursor Style (Grab or Move)
Image Border Radius
Image Border Style
Expand On Hover
Tilt On Hover
Hover Speed
Hide On Mobile

Step 5. Set Up and Manage Your Images

Create a new blog page with a new post and upload an image thumbnail.
Repeat this set 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 to the page section you’d like Mood Board on.

<!-- Interactive Mood Board Ghost - Image Canvas -->
<div data-ghost data-ghost-plugin-name="mood-board" data-blog-href="/BLOG-URL-HERE"></div>
<!-- Mood Board by Ghost -->

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

Step 7. Create Mood Board’s Image Canvas

The code block will create Mood Board’s image canvas and where the images will be placed.

Resize the code block to your preferred size to create the canvas
Bring the code block to the very “front” via Squarespace’s forward block option
For clickable items (like buttons) bring these in front of canvas

Watch this video on how to resize the code block and send it to the front.

Plugin Notes

Only compatible on desktop
Page section must be using Fluid Engine
The red line and “Canvas Area” message only appears in edit mode
Image placement is random on each page load and can be resized with the cursor
Image placement on mobile will appear more stacked - use the mobile editor for block placement

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

Mood Board Images (Preview Guide)