Using Zurb's TwentyTwenty plugin with Squarespace

Before after

Since making the switch to Squarespace over a year or so ago, I've been searching for a "before/after" plugin that would allow me to basically stack two images on top of one another and then use a slider to drag back and forth to compare the two images.  My previous website utilized Wordpress as its CMS, and there were a few different plugins that could do this and they were relatively easy to implement.  But Squarespace doesn't really have a plugin community (at least that I'm aware of) so I've had a hard time finding something that worked.

Yesterday, however, I ran across TwentyTwenty, a visual diff tool created by Zurb.  It's free to download and although the documentation is pretty straightforward, getting it to work with my Squarespace site wasn't exactly a walk in the park.  But after a day of trial and error, I finally got it to work.

I've noticed a number of questions about a feature like TwentyTwenty in Squarespace's support forum, yet none of them have been answered or resolved.  I'm certainly not throwing Squarespace under the bus, however, because they can't be expected to support third party applications, plugins, etc.  And as far as I know, there doesn't seem to be anyone that's figured something like this out...or if they have, they just haven't shared it with the Squarespace community.

So that's the purpose of this post...to hopefully help those of you out there that are using Squarespace and are looking for help or guidance in implementing cool "before/after" functionality on your site.

So here's a step-by-step guide to get TwentyTwenty working on your Squarespace site.  I must warn you, however, that I can't exactly guarantee you that my steps will work flawlessly for you.  I'm not a developer, by any means, so my steps may seem redundant or odd...but all I can say is that they worked for me!

Step 1:

Download TwentyTwenty by going here.

Step 2:

Unzip the file and extract it to a familiar place on your computer.

Step 3:

Click here to download the minified version of jQuery Core 2.0.1 and save it in the same location that you extracted the files to in Step 2.

Step 4:

Go to your website, log-in and then create a new page.  Then add a text block and type a few words or sentences.

Step 5:

Now it's time to upload the necessary files for TwentyTwenty to work on the page.

Highlight a few letters or a word or something in the text you typed in the text block.  Then in the WYSIWYG menu that appears, click the link icon.

When the link dialogue box appears, click on Files in the box menu.

Click in the white area (where the arrow icon is) and then navigate to the jQuery Core 2.0.1 file that you downloaded and saved in Step 3.

Then click the New File icon (with the large plus symbol) and do the same thing for the TwentyTwenty.css file (located in the CSS folder in the TwentyTwenty-master folder that you extracted in Step 2.

Then click the New File icon again and upload the jquery.event.move.js file (located in the js folder in the same TwentyTwenty-master folder.

Then click the New File icon one last time and upload the jquery.twentytwenty.js file (also located in the js folder).

Now you need to remove the link that you created at the beginning of this step to upload the files.  To do this, simply click the word or letters that you set as the link, and a dialogue box will appear.

Click "Remove" and the link should be removed.

Lastly, click "Save" to save the page.

Step 6:

Now you need to add some code to the page.

Click "Settings" at the top of your page.

When the Settings dialogue box appears, click the "Advanced" option in the top of the menu.

Now you need to paste the following code into the Page Header Code Injection field:

<script src="/s/jquery-210min.js"></script>
<script src="/s/twentytwenty.css"></script>
<script src="/s/jqueryeventmove.js"></script>
<script src="/s/jquerytwentytwenty.js"></script>

And it should look like this:

When you've done this, simply click "Save" at the bottom of the Configure Page dialogue box.


Step 7:

Now navigate to your Settings panel, click the Code Injection option and then enter the same code (from Step 6) into the Header field.

When you've done that, click "Save" at the top of the page.

Step 8:

Now it's time to put TwentyTwenty to work!

Navigate to the page you created in Step 4 and add a Code Block.

To include the javascript and css files, add the following code to the code block:

<script src="/s/jquery-210min.js" type="text/javascript"></script>
<script src="/s/jqueryeventmove.js" type="text/javascript"></script>
<script src="/s/jquerytwentytwenty.js" type="text/javascript"></script>
<link rel="stylesheet" href="/s/twentytwenty.css" type="text/css" media="screen" />

After including the files, you're ready to create a container that holds two images:

<div class="myBeforeAfter">
<div id ='twentyBox' class='twentytwenty-container'>
  <img src="URLtoyourbeforeimage.jpg" alt="whateveryouwanttocallthefile" />
  <img src="URLtoyourafterimage.jpg" alt="whateveryouwanttocallthefile" />    
</div>
</div>

*Make sure your know what the exact URL is for the two images.  You can upload images using the process in Step 5 if you want them to reside in your Squarespace directory (i.e. /s/yourimagefile.jpg) or you can host them elsewhere (I tried saving images to my public Dropbox folder and copied the links to them, and it worked just fine).  It's also a good idea to make sure your two images are the exact same dimensions (i.e. 800x600, 950x632, etc.).

And then you need to initialize the plugin on the window load:

<script>
        $(window).load(function(){
          $("#twentyBox").twentytwenty();
        });
</script>

Your code should look like this (except for your image location paths):

<script src="/s/jquery-210min.js" type="text/javascript"></script>
<script src="/s/jqueryeventmove.js" type="text/javascript"></script>
<script src="/s/jquerytwentytwenty.js" type="text/javascript"></script>
<link rel="stylesheet" href="/s/twentytwenty.css" type="text/css" media="screen" />

<div class="myBeforeAfter">
<div id ='twentyBox' class='twentytwenty-container'>
  <img src="URLtoyourbeforeimage.jpg" alt="whateveryouwanttocallthefile" />
  <img src="URLtoyourafterimage.jpg" alt="whateveryouwanttocallthefile" />    
</div>
</div>

<script>
        $(window).load(function(){
          $("#twentyBox").twentytwenty();
        });
</script>

When you've added your code, make sure you click "Save" to save your new code block.

Lastly, click "Save" at the top of the page to save the page.

You should now see your page in all its glory, but...wait...you can't see your images.  Instead, you should see something like this:

Don't worry...this is normal and everything is fine.  In order to see the TwentyTwenty plugin in action, you need to view the page...it's not visible otherwise.  So for now, don't fret.

OK.  We're almost done. 

The last step is to add some custom CSS so that you can adjust the overlay (the gray overlay that includes the Before and After text).  Obviously your images will be a certain size, so you want to make sure the overlay is that size, as well.  And that's where the custom CSS comes into play.

In the code above, I've actually added some code that makes it easy for you.  I added a containing <div> around "#twentyBox" so that you can set the size via custom CSS to wrap exactly around your images.

Step 9:

To add your custom CSS, you'll need to get to Style Mode.  To do this, after you've saved the page, click on View Page at the top of the page.

Now you should see TwentyTwenty in action, but chances are good that the overlay needs to be adjusted.

So, now you need to get to Style Mode by moving your mouse to the lower right corner of your screen and then click on the paintbrush icon.

Now that you're in Style Mode, scroll to the bottom of your style menu on the left side of the page and click on the Custom CSS option.

A warning dialogue box will appear and just click "Confirm" to get past it.

Here is where you need to add some custom CSS to adjust the overlay to your needs.  My images are 950x632, and I want them centered on the page, so I've added the following code:

.myBeforeAfter {
  margin:10px auto;
  width: 950px;
  height: 632px;
}

Copy and paste the code above into your custom CSS dialogue box, changing the dimensions accordingly.  If you don't want your images centered on your page, simply delete the line of code that says "margin:10px auto;".

When you've added the code, click "Save" and then you'll probably have to manually close the dialogue box.

This should take you back to the Style Mode screen, and you can exit Style Mode by clicking the "x" on Style Mode pop-up in the lower right corner.

And, well, that's it!  Hopefully by now, TwentyTwenty is working for you.  If not, you might want to retrace the steps and make sure you didn't forget something or you don't have any typos in your code.

Oh, and there's one more thing:

If you want multiple instances of TwentyTwenty to run on one page, you'll need to modify the code for that to happen.  To do this, simply go back to your code block and double click it to open it.  Where you have this code:

<script>
        $(window).load(function(){
          $("#twentyBox").twentytwenty();
        });
</script>

Simply replace it with this code:

<script>
        $(window).load(function(){
          $(".twentytwenty-container").twentytwenty();
        });
</script>

What this new code does is target the container class instead of a specific container.  Once you've swapped-out this code, you can create multiple instances of TwentyTwenty on a single page.  To create the additional instances, simply copy this section of the code in the code block:

<div class="myBeforeAfter">
<div id ='twentyBox' class='twentytwenty-container'>
  <img src="URLtoyourbeforeimage.jpg" alt="whateveryouwanttocallthefile" />
  <img src="URLtoyourafterimage.jpg" alt="whateveryouwanttocallthefile" />    
</div>
</div>

And then paste it on a new line just below the original section of code.  Then replace the image location paths with paths for two new images, click "Save" to close the dialogue box, and then click "Save" to save the page itself. 

And now you should see both of your instances of TwentyTwenty on the page!


Like I said at the very beginning, I don't claim to be a developer or coder.  I simply sat down and devoted a few solid hours to finally figuring out how to make TwentyTwenty work for my site.  I can't guarantee that this will work for yours, but at the same time, I don't see any reasons why it shouldn't.

That being said, if you have any problems or hit a wall and can't seem to figure it out, please feel free to post a comment, ask a question, etc. and I'll be more than happy to help you if I can.

Good luck!