Showcase Two Drupal Images Together with the Zurb TwentyTwenty Module

Zurb TwentyTwenty module is mostly intended to highlight the difference between two images on a Drupal site.

One example use case is advertising images for skin products. Those images present half of the face before applying the product and half of the face after applying it.

Besides doing direct comparisons between images, you can use this module for other purposes as well. In this tutorial, you will learn how Zurb TwentyTwenty module works.

Step #1. Install and Enable the Module

• To work with Zurb TwentyTwenty module, firstly, download the jQuery Plugin to Compare Images from its Github page
• Upload it to the /libraries folder located in the root of your site. If you don’t have the /libraries folder, create it
• Uncompress the module ZIP file
• Rename /twentytwenty-master to /twentytwenty 
• Delete the zip file

Step #2. Create the Content Type

• Go to Structure > Content types > Add content type
• Create a content type with the name Banner Picture
• Uncheck Published, Promoted to the front page and Display author and date information 
• Click Save and manage fields

• Delete the Body field
• Add an image field
• Click Save and continue

• Set the Allowed number of values to 2, as we need two images
• Click Save field settings
• Click Save settings

Step #3. Create the Content

• Click Content > Add Content > TWENTY TWENTY Picture 
• Give it a title 
• Upload your images
• Click Save

Step #4. Configure the Display

• Go to Structure > Content types > Banner picture > Manage display
• In the FORMAT column choose Twentytwenty 
• Click the cogwheel on the right and choose the offset for the slider. These values fluctuate between 0 and 1 where 0 is far left and 1 is far right. I’m choosing 0.1 for this example
• Click Update 
• Click Save

• Now take a look at your newly created content and play with it a little bit.

• Changing the order of the images is very easy. Just edit the node and drag the second image to the top and click Save.

When hovering over the image, you will see a dark overlay with some text (Before --- After) on it. You can disable this overlay with one simple line of CSS:

.twentytwenty-overlay {display: none;}

More Examples

You have now another handy tool to embellish your Drupal site. Do you know of any other practical use of this module? 

Thanks for reading!

About the author

Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.