GREAT IDEAS

Compare photos, hide the big reveal using Juxtapose

Posted

Reprinted from GateHouse Newsroom

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 creatorJuxtapose 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 percent – 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 the left image. The alligator photo was the right image. He had the slider start at 80 percent or something far to the right like that. Take a look – if you want!

Nicole Simmons has been the regional digital editor for GateHouse Media New England since 2012. Before that and since 2007, she was the metro editor for new media for MetroWest Daily News in Framingham, Mass. She started at Community Newspaper Company (later bought by GateHouse) in 1999 as an education reporter, moving on to a city beat reporter, a copy desk editor, a page one designer/editor and a Sunday paper editor. She has helped newsrooms throughout the country learn and use the MediaWare Center and worked with the former Framingham Design House to bridge the gap between designers and editors. Now she's focused on all things digital and will share with you all of the fun nuggets of information she comes across.

GateHouse, Juxtapose, Simmons
include('widgets/greatideas_rail.tpl.php');
Calendar View all