Herald News alligator Juxtapose
The Herald News (Fall River, MA) used the tool to give the reader the option of seeing a graphic image.


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.

Juxtapose creator
Juxtapose creator

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.

Harris Place: http://www.goupstate.com/article/20160331/MULTIMEDIA/160329651

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

The Herald News (Fall River, MA) took a bit of a different approach in order to give readers the choice of whether they wanted to look at a graphic image or not.
An alligator’s body was found without a head. Jon Root, director of Content & Interactive, created an “image” of text in PhotoShop (I would have used PicMonkey – so easy if you’re not a PhotoShop user) and made that the left image. The alligator photo was the right image. He had the slider start at 80% or something far to the right like that.
Take a look – if you want!

(Visited 533 times, 1 visits today)
Previous post

No 'Internet'? No problem. The most helpful AP Stylebook changes for 2016

Next post

Facebook drops branded content restrictions for publishers