How to create "before and after" images for Squarespace

I recently decided to switch my website over to squarespace. I've always coded my own site from scratch because I love the flexibility of creating something that is completely original. Lately though I've just been too busy to keep up with updates to the site so I'd been looking for a good CMS to help me update the site faster. I created my wife's site (www.erikamade.com) using squarespace and loved it. It's easy enough to use that she can go on and manage it now that its built, but its flexible enough that I was able to add a few bells and whistles via code injection and some added css.

One of the things I wanted to add to my site was the ability to have some interactive images that you can wipe to see the before and after of my work. I came across this plugin from zurb.com called "twentytwenty". Then I found this blog post where this guy, Jake, had figured out a way to use it on squarespace with some code injection and then adding code blocks to the pages. While this is great, I was a little bummed that in order to get this to work I would be missing out on some of the ease-of-use factor I was hoping to get from using squarespace.

I decided to see if I could modify the twentytwenty plug-in to try and create something that would work with squarespace's own galleries. That way I could add these images on the fly, and the code thats already on the page would do the rest. My experiment ended up being a success so I'm sharing it with you all here. Enjoy.

Prologue: What it does

Once the modified code is installed, you can simply create a "Stacked" image gallery and when you save your page, the first image in the gallery becomes the "after" or right-side image, and the second image becomes the "before" or left-side image. Just like the example below. The great thing about this is that you still get all the flexibility and auto image-resizing/formatting goodness that squarespace galleries offer and you don't have to do add custom code blocks every time you want to add new images.

Step 1: Download the code

I won't get into too much detail on the modifications I made to the twentytwenty code here. All I did was modify some of the variables so that they find the images in your html the way that squarespace formats them. If you want to nerd out, you can see all the changes I made here on github.

Click the button below to download the files you will need.

Step 2: Install the code

Inside the zip file there are 4 files:

  • jquery-2.1.3.min.js - This is the standard jQuery library. It is not modified and I'm really only providing it in this file for convenience. We're actually going to use the CDN hosted version in our code, this file will be the fallback if that fails.
  • jquery.event.move.js - The twentytwenty plugin uses this library to make the interaction of the slider work on touch devices. I didn't modify this either.
  • twentytwenty.css - This is the stylesheet for the twenty-twenty slider. I didn't modify this although I did inject some css into my squarespace site to hide the "before" and "after" labels. More on that later.
  • jquery.twentytwenty_mx.js - This is my MODIFIED version of the twentytwenty plugin. Those guys at zurb.com really deserve all the credit.

A little squarespace weirdness here, but in order to upload the files you need to create a link on a page (any page, doesn't matter) so that you get this dialog:

It may drop you into the "External" tab, just click on "Files". Once you see this dialog, you can drag all 4 files to the "Add a file" area or browse for them by clicking in that area. Once you've done that, you should see the files like this:

Now you can delete that bogus link you made.

Step 3: Injecting Header the Code

In your sqaurespace settings, navigate to "Settings > Advanced > Code Injection". Paste the following code into the Header section.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/s/jquery-213min.js"><\/script>')</script>
<script src="/s/jqueryeventmove.js" type="text/javascript"></script>
<script src="/s/jquerytwentytwenty_mx.js" type="text/javascript"></script>
<link rel="stylesheet" href="/s/twentytwenty.css" type="text/css" media="screen" />
Screen Shot 2015-02-09 at 10.50.29 PM.png

You'll notice the first line points to a googleapis.com address. Because so many people use jQuery, google hosts this library for anyone to use. This is known as a CDN (content delivery network). Since its very common practice for websites to use these google-hosted libraries, it's very likely that your website visitor already has that library cached which will speed up their load time.

Line 2 is a fallback for when the CDN is down and your visitor doesn't have that library cached. It will load the jQuery library file that you've uploaded to your squarespace site. Very unlikely, but better safe than sorry.

Lines 3-5 link the rest of the files you uploaded to your site.

Step 3: Injecting Footer the Code

For this next bit of code, you have two options depending on how you want to use this on your site.

Option A: Site wide

If you want EVERY stacked image gallery on your ENTIRE SITE to automatically have this "before and after" effect, then you can add the following code to the Footer section of the Code Injection page where you added the Header code. Note: this only applies to stacked galleries, no other gallery types will be effected.

<script>
$(window).load(function() {
  $(".sqs-gallery-block-stacked").twentytwenty();
});
</script>

Option B: Page wide

If you want EVERY stacked image gallery on a SINGLE PAGE to automatically have this "before and after" effect, follow these steps:

  1. Navigate to the page you want to add your images.
  2. Add a Code content block as the LAST ITEM in your Page Content area. and add the same code from above.

Step 4: Create your stacked Gallery

Now that you've got all your code injected, all thats left is to create your stacked gallery. Simply insert a new stacked gallery content block into your page and upload your 2 images.

Just remember that the images will effectively "swap" places when they are combined. The left image in the edit dialog will be your "after" image, and the right image in the edit dialog will be your "before" image.

That's it! You're done. You should have beautiful, interactive before and after images on your site.

Extra Credit

One last thing that I did on my site was to remove the overlays that darken the image and add the "Before" and "After" labels when you hover over the images. Totally optional, but very easy to change. In your squarespace menu, navigate to "Design > Custom CSS" and add the following bit of code:

.twentytwenty-overlay {
  visibility: hidden !important;
}

See? Super easy.

Thanks for reading and let me know what you think in the comments below.

Update - Additional CSS Customizations

You may notice from my example at the top of this post that I decided to make even more customizations to the look of the plugin. I've hidden the circle and thinned out the divider line. If you want those same customizations, you can paste this CSS into the "Design > Custom CSS" settings.

.twentytwenty-overlay {
  visibility: hidden !important;
}

.twentytwenty-handle {
  border: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
  margin-left: -19px !important;
  margin-top: -19px !important;
}

.twentytwenty-right-arrow {
  margin-right: -16px !important;
}

.twentytwenty-horizontal .twentytwenty-handle::after {
  margin-top: 0 !important;
}

.twentytwenty-horizontal .twentytwenty-handle::before {
  margin-bottom: 0 !important;
}

.twentytwenty-horizontal .twentytwenty-handle::before, .twentytwenty-horizontal .twentytwenty-handle::after {
  width: 1px !important;
}

Update #2 - Plug-in Options

The twentytwenty plugin has a couple extra options you can use:

  • orientation: changes the orientation of the line. The default is "horizontal" but you can change it to "vertical" if you want the dividing line to be horizontal. Yes, you read that right, change it it "vertical" if you want the line to appear horizontal. I didn't write the plugin.
  • default_offset_pct: changes the start position of the divider line. The default is "0.5" but you can change this to any decimal value between "0" and "1", "0" being all the way to the left and "1" being all the way to the right. If you wanted the line to start say 20% from the left side, you would use "0.2".

In your footer code, you simply need to pass one or both of the options in the parenthesis that follow the .twentytwenty function, like this:

<script>
$(window).load(function() {
  $(".sqs-gallery-block-stacked").twentytwenty({
    orientation: 'vertical',
    default_offset_pct: 0.2
  });
});
</script>

Update #3 - Suspending Comments Section

After receiving so many gracious comments on this post and helping many of you with issues over the past year, I've decided to suspend the comments section on this post. If you are troubleshooting issues, please check the past comments for common issues and the answers I have given there.

When I cobbled this together for my own site about a year ago, I tested it on a few squarespace templates at the time and it appeared to work on most of them. I was using the "Devlin" template for my site when it was created and at this time of this writing am using the "Hayden" template. As squarespace continues to evolve and add new templates, I cannot guarantee that it will work on any of their new templates, but I would have no reason to think it would stop working on the older templates like "Devlin" and "Hayden".

If you are having trouble adapting my code to your site and you're a little tech savvy, you can see how I modified the original code by zurb here on github. Seeing where I made the modifications and the HTML tags that I targeted, you may be able to re-adapt it to fit with a newer squarespace template.