Drupal is a registered trademark of Dries Buytaert
drupal 11.3.7 — Update released for Drupal core (11.3.7)! drupal 11.2.11 — Update released for Drupal core (11.2.11)! drupal 10.6.7 — Update released for Drupal core (10.6.7)! drupal 10.5.9 — Update released for Drupal core (10.5.9)! cms 2.1.1 — Update released for Drupal core (2.1.1)! drupal 11.3.6 — Update released for Drupal core (11.3.6)! drupal 10.6.6 — Update released for Drupal core (10.6.6)! cms 2.1.0 — Update released for Drupal core (2.1.0)! bootstrap 8.x-3.40 — Minor update available for theme bootstrap (8.x-3.40). menu_link_attributes 8.x-1.7 — Minor update available for module menu_link_attributes (8.x-1.7). eca 3.1.1 — Minor update available for module eca (3.1.1). layout_paragraphs 2.1.3 — Minor update available for module layout_paragraphs (2.1.3). ai 1.3.3 — Minor update available for module ai (1.3.3). ai 1.2.14 — Minor update available for module ai (1.2.14). node_revision_delete 2.0.3 — Minor update available for module node_revision_delete (2.0.3). moderated_content_bulk_publish 2.0.52 — Minor update available for module moderated_content_bulk_publish (2.0.52). klaro 3.0.10 — Minor update available for module klaro (3.0.10). klaro 3.0.9 — Minor update available for module klaro (3.0.9). layout_paragraphs 2.1.2 — Minor update available for module layout_paragraphs (2.1.2). geofield_map 11.1.8 — Minor update available for module geofield_map (11.1.8).
← All modules

image_compare

68 sites Security covered
View on drupal.org

This module provides a new formatter for image fields using the Image Compare javascript library.

The main point of interest of this library is the use of a simple HTML input element of type range to implement the slider. This makes it one of the most accessible image comparison slider available at the moment.

Installation

  • Download and enable the module.
  • Check the README file for the image-compare javascript library installation instructions.
  • Select Image Compare Accessible Slider formatter in your multivalued image field display configuration.
  • Remember that you have to upload at least 2 images.

A dedicated submodule, Image Compare Accessible Slider for Media, allows to extend this module to make it compatible with medias of type Image (or referencing other medias of type Image via this module).

Configuration

  • A custom starting point between 0 and 100 can be specified (default: 50).
  • alt or title image attributes can be used as a caption.
  • A custom field can also be used as a caption, useful with custom media images for example.
  • A custom field can be used to override the global field formatter configuration options with some content specific ones which allows more flexibility than most other available sliders.
  • Captions are optional and can be disabled globally, by not specifying any caption field, or on a per-instance basis by using a custom options field.

Available configuration options

  • label_text: usage explanation message for screen readers.
  • keyboard_step: the keyboard step, higher value can improve keyboard usability.
  • step: can be set to value below 1, 0.01 for example, to improve smoothness when using the mouse to slide. Use in conjunction with keyboard_step configuration option above.
  • show_captions: set to false to remove captions.
  • starting_position: starting position of the slider between 0 and 100.

Around the Web

Keywords: A11y

Activity

Total releases
3
First release
Apr 2025
Latest release
6 months ago
Release cadence
88 days
Stability
67% stable

Release Timeline

Releases

Version Type Release date
1.0.3 Stable Oct 11, 2025
1.x-dev Dev Apr 20, 2025
1.0.2 Stable Apr 19, 2025