CODE

Joomla Image Comparison Module

Effortlessly Showcase 'Before & After' on Your Joomla Site

In web design and content creation, visually demonstrating change is incredibly powerful. Whether you're displaying a design iteration, a photo edit, or a historical comparison, a simple side-by-side view often falls short.

That's why I have done a  Joomla Image Comparison Module, a new Joomla module designed to solve this problem with an intuitive, interactive slider.

What is the Joomla Image Comparison Module?

This module allows you to easily display two images on your Joomla site with a comparison slider . Users can drag the slider back and forth to interactively reveal the differences between the 'before' and 'after' images, offering a much more engaging experience than static galleries.

Before Image Compare 1
After Image Compare 2

Key Features and Simplicity

The focus of this module is simplicity and ease of use, straight from the Joomla administrator panel:

  • Simple Image Upload: Using the admin interface, you can effortlessly upload and select the two images you wish to compare. The module is configured to accept exactly two images, making setup quick and painless.
  • Intuitive Configuration: The configuration is straightforward. Just navigate to the module settings, use the "Add Images" subform, and select your two media files.
  • Joomla 4-5 Ready: Developed with the latest Joomla standards, ensuring compatibility and security.
  • Interactive Display: Provides a dynamic way to present visual content, perfect for photographers, designers, renovators, and educators.

 

Joomla Image Comparison Module

 

How it Works (Under the Hood)

The core functionality is managed within the module’s configuration fields:

  1. accessiblemedia Field: This field type is used to securely and accessibly handle the image uploads via the standard Joomla Media Manager.
  2. subform with max="2": By limiting the subform to a maximum of two entries (max="2"), the module is purpose-built for twin-image comparisons, ensuring clean data management.

Get Started!

The Image Comparison Module module is available now! Download it, install it on your Joomla 4 site, and start transforming how you showcase visual comparisons. I'm looking forward to seeing how you use it to highlight your work!