You’ve probably seen them before – side-by-side photos with a slider tool allowing you to compare two photos, usually a before shot and an after shot. Before the tornado, after the tornado. A location as seen in 1976, the same spot today. You probably thought they were cool and wondered how they were done. Let me show you how, using the Knight Lab tool “Juxtapose.”
The hardest part about using this tool is figuring out where to host your photo. You need a URL leading to your image – whether it be hosted on an FTP server, Google Drive, Dropbox or a site such as Imgur. Once you’ve figured that out, the rest is beyond easy and the site walks you through it.
The tool has sample copy and a sample image that helps you envision what you’re working toward.
1.) Copy and paste the URL for the photo you want to appear on the left in the Left Image spot. Do the same for the Right Image.
2.) Whatever label you want to appear in the upper left and upper right corners of the photos, add those in the spot where you currently see a date.
3.) If you want a credit listed with each photo, add that in the Credit lines.
4.) Now decide where you want the slider tool to start. By default, it’s at 50% – right in the middle of both images. I recommend you start it off-center. It isn’t clear to readers when it’s in the middle that this is something you should click on and move around. Off-center helps a little to make them realize they’re not just looking at two photos side-by-side.
5.) I leave the options that are already checked off as is. Click on the ? to find out what each controls. The only one that might be relevant to your image is Vertical – meaning it will slide the line up and down, instead of left and right.
Any changes you make to the fields makes the changes to the sample slider below, so you can instantly see what you’ve accomplished.
When it looks as you like it, click Publish. Copy and paste the iframe embed code into your CMS.
To really drive the point home, you may want to “teach” your readers how to use the tool by adding text in the body of your article one line above or below the embedded Juxtapose images telling them to click on the slider knob and drag it left and right to reveal more of the other image.
Here are some sample of GateHouse publications’ Juxtapose images:
The Spartanburg Herald-Journal (S.C.) offers a regular series called “Then and Now,” showing buildings as they looked in the past and now throughout the city.
The Montgomery Building: http://www.goupstate.com/article/20160310/MULTIMEDIA/160309765
MetroWest Daily News (Framingham, MA) did the same in an article taking a look at development along a busy roadway: http://www.metrowestdailynews.com/article/20160130/NEWS/160139595