Gorgeous before-and-after pictures in WordPress

TwentyTwenty from Zurb makes it easy to show before-and-after pictures on a web page. As Zurb puts it, it showcases the differences between two images.

Now, it’s available as a WordPress plugin! Building it was fun, and I’ll post a plugin development tutorial soon based on the experience.

Here’s one example, the Blue Room in White House pre and post construction:

Images above courtesy Abbie Rowe / National Archives

And a makeover from a previous post on this blog:

Check out TwentyTwenty on the WordPress plugin directory, or watch this screencast to see how it works:

New: see a tutorial in Spanish, thanks to webempresa

Responsive images and the beauty of food

Food is beautiful, and Cook Smarts has plenty of it to show. The service provides a meal plan each week, with high-res photos of each meal.

The Cook Smarts archive, where you can view previous meal plans, did not take advantage of the pictures. It was far too text-y.

The old, text-based archives
The old, text-based archives

We started to think of a better way to incorporate the photos, and came up with a design for each week of meals.

Sketch of the new visual archive

We also thought of a more engaging way to welcome people who were trying out the service, with a personal message from Jess.

Sketch of call to action

Here’s how it actually came out:

New, visual archives

We faced a lot of challenges putting this together. Here are a few, and we how we solved them:

Respecting the user’s bandwidth

It was important to minimize load time, particularly for mobile users.

We used reSRC to serve the appropriate image size for each device, without having to generate thumbnails ourselves.

It saved a ton of time, and I encourage graphics-heavy site owners to check it out. Here’s a screencast showing reSRC in action.

Adjusting for mobile

Four images in one row would not work on mobile, so we went from four columns to one.

But the images were too tall. One meal took up nearly the entire iPhone screen, making it time-consuming to scroll through all of the plans.

Tall images make it time-consuming to scroll through meal plans on mobile

Too much scrolling!

Then someone had a genius idea: on mobile, show a slice from the middle of the image. You still got the idea, with far less scrolling. You can see the full image after clicking the meal.

Center-cropped images make it faster to scroll on mobile

By adding a simple parameter to the reSRC image URL, we cropped the images with the result above.


In the reSRC image URL, we set the image’s width to 400px, and took a 133px slice through the middle of it.

Surely, we could also have done this with a tool on our server like ImageMagick, but using reSRC was faster than rolling our own thumbnails.

Showing different images on desktop and mobile

We had to find a way to load different images on desktop and mobile, in order to achieve the crop described above.

Image tags don’t support image swapping without JavaScript, so we instead used containers with background images. We applied media queries to the containers to serve a different background image depending on the screen width.

The default image is regular size:

The mobile image is center-cropped version:

Separate CSS for each image

Each meal needed a separate background-image style. That’s a lot of styles!

In Rails, we dynamically generate the style tags and place them under a <style> tag on top of the archives.

At first, we tried a separate <style> tag for each image, but this bombed on IE 9 and below, which place a limit on the number of style sheets and tags.

Making the image fit its background container

Our site is responsive, so the image widths change based on the user’s screen size.

With regular image tags, you can simply say…

… and they will scale to their containers.

Background images are a little different. We had to use…

… on the meal containers, in order for the meal images to scale properly.

To support older browsers, we included the background-size polyfill, and confirmed that everyone worked well using BrowserStack (not cheap, but excellent).

Preventing jumping around while loading

Images won’t load right away, particularly on a phone.

Unless you specify the width and height of an image in advance, the page will jerk around as each image loads.

We don’t not know the width and height of the image in advance since the site is responsive, but we still wanted to avoid page jerk.

We do know the proportion of the photos (the relationship between width and height), so we used the padding-bottom technique from Smashing Magazine. With this technique, knowing the proportion has the same effect as knowing the exact width and height, leaving the proper amount of room for the images before they load and eliminating page jerk.

On desktop:

… and on mobile, which is a bit different since we’re only taking a center crop:

To get the proportion (the % above), we divided the height by the width and multiplied by 100. The proportion is always the same no matter the image’s width.

In closing, content is paramount

Web projects are much more achievable when the content is great. In this case, I was lucky to have beautiful pictures of food. Had Jess not taken pictures of every Cook Smarts meal from the beginning, the visual archives would not have launched as quickly.

Want a screencast about the techniques above? Please leave a comment and let me know, or tweet me @coreyITguy.

To see the archives in their glory, sign up for a test drive account on Cook Smarts.