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
- Download and enable the Zurb TwentyTwenty module as any other Drupal module
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!