How to Display Before-and-After Images on Your Website or Blog

How to display before-and-after images on your website and blogI love taking “before-and-after” pictures.

I snapped pictures of the flowering cherry tree in my yard before and after it was pruned.

I took one of my office before and after I did a major cleanup.

I even got my son to pose for one before and after a haircut.

I always take before-and-after screenshots of the websites we create for our clients.

But I’ve never found a good way to display the before-and-after shots on the Blogging Bistro website. Until now.

Enter the TwentyTwenty WordPress plugin by Zurb. This plugin allows you to combine two images of the exact same size into an interactive before-and-after picture. The image is displayed split in half, as you’ll see in the three samples I created, below.

Grab the arrow icon on the slider and drag the arrows to the right to see the BEFORE shot and to the left to see the AFTER.

Here’s a helpful screencast by Corey Martin, the plugin’s developer, that shows how to install and use the plugin.

I experimented with this plugin by creating before-and-after images of three websites we recently redeveloped. In each case, we had built a custom WordPress site several years ago. The clients wanted to use responsive design, a technology that enables a website to display perfectly on smartphones, tablets, and desktop computers.

And in each case, the client wanted to retain many of the site’s original design elements and its navigational structure.

Things to remember about the plugin

To make the before-and-after images display correctly, I first cropped each image so they were the exact same size at http://www.picmonkey.com/, my go-to photo editing tool.

Next, I created a new blog post and uploaded all the images to the Media Library.

I inserted each image into the post (inserting the BEFORE picture first).

When I pasted in the snippet of code (which you’ll find in the screencast) into my post, I discovered that I did not need to use the Text (HTML) editor. I pasted it using the Visual editor. When I saved my Draft and previewed the post, the code disappeared and the before-and-after slider displayed correctly.

Click this image to download your free checklist that includes EVERYTHING you need to do prior to publishing a blog post! Or simply text PREPUB to 44222!

Let’s look at the before-and-after images I created for each of the three websites we redesigned.

Before-and-after #1: Atlantic Veterinary Hospital, Seattle, WA

http://www.atlanticvetseattle.com/

Dr. Laura Monahan loved the layered images and 3D effect on her original website, and asked us to retain as much of that look and feel as possible. This is a challenge when converting a site to responsive design, as graphics must be sacrificed in favor of making the site accessible to impatient mobile users.

You’ll notice that the layered look was replaced with a more modular format that allows the elements in each “column” to slide beneath each other when users view the site on a tablet or smartphone.

Before-and-after #2: Focus With Marlene

http://www.focuswithmarlene.com

Marlene Anderson — a counselor, life coach, speaker, and author — loves purple. But visitors to her site told her it was overwhelmingly purple. And some commented that the purple and gray color scheme, while soothing, almost put them to sleep.

Marlene wanted her brand refresh to be clean, contemporary, and to invite readers into conversation.

Before-and-after #3: Blogging Bistro, LLC

http://www.bloggingbistro.com

Our own Blogging Bistro site needed an upgrade to responsive design, too. Like our two clients above, I had to let go of the layers and ripped edge effects in favor of a design that enables mobile users to quickly find the content they’re looking for.

Our programmer created a cool special effect for the social media coffee mugs that display in the site’s header. View the site on a smartphone in both portrait and landscape configurations, and watch the mugs move!

What do you think?

Do you like the way this slider works? What before-and-after images would you showcase using the TwentyTwenty plugin? If you give it a whirl, be sure to share the link with us so we can check it out.

Tweet It

 

  • I Wonder

    Or just use Canva. It’s a lot simpler……..

  • I use Canva all the time, but I have not seen any before-and-after templates, nor does it offer the interactive functionality of this plugin. I love Canva and highly recommend it, but for WordPress.org users who are looking for something different, I think TwentyTwenty plugin is a good alternative.

  • I noticed that the sample “before-and-after” pics didn’t show up when I used Internet Explorer, but did show up when using my mobile phone or Mozilla. Maybe it’s something in my settings, though I did try to adjust (it made no difference).
    It seemed curious though, to have the little arrows in the middle- I kept thinking I should click them to see a whole slide show. (There’s not a whole slide show, right?!)
    But… yes, it does look pretty cool 🙂

  • The BEFORE and AFTER arrow(s) are intended to manually be slid left or right to reveal the 2 images. Sorry to hear it doesn’t work on IE (which is often the case, particularly with older versions of IE). Perhaps the plugin wasn’t optimized to work on all browsers? Seems strange to me, but it’s always good to learn about glitches with a particular plugin. I use Firefox and it works fine on that browser.

  • Well, I DO have an old version of IE! And on Firefox, it’s showing me both pictures simultaneously, so I don’t really need the arrow. But that explains why it’s there- maybe my Mozilla version’s pretty old too? (This is my desktop- a grandpa by today’s standards!)

  • Give your “grandpa” a makeover, Jennifer! It’s best to update to the lastest version of each browser you might use. They have better security patches built in and run more smoothly. Plus, they usually support the latest plugins.

  • Humm… I think I misspoke. (Sp?! Looks like “Miss Poke”!) Looks like I do have the latest updated versions of those browsers, so… not sure why it looks different on my computer. Maybe because of the computer’s age? I don’t know!

  • Megan Gammons Licursi

    Just came across this post while looking for a solution for before/after photos, but for Facebook. How would you suggest that?

  • Megan,

    To display before/after pictures on Facebook, I would create a Facebook album and upload both the BEFORE and AFTER pictures. Or, you can use an online photo editing service such as PicMonkey or Canva to create a collage that displays your BEFORE/AFTER shots.