Image Comparison

Draggable slider block used to compare the difference between two images.

Overview

Image Comparison provides a versatile draggable slider block that allows users to compare two images side-by-side. Ideal for showcasing before-and-after scenarios, Image Comparison enables easy visual comparisons through an interactive slider that can be customised to fit your theme.

Demo

Documentation

Installing

When installing to your site, add the following to your composer.json file. This will ensure that installation will use the built version of the package, and allow it to be loaded using Composer in the preferred path.

{
  "repositories": [
    {
      "type": "vcs",
      "url": "git@github.com:bigbite/image-comparison.git"
    }
  ],
  "require": {
    "bigbite/image-comparison": "dev-main-built"
  },
  "extra": {
    "installer-paths": {
      "plugins/{$name}/": [
        "type:wordpress-plugin"
      ]
    }
  }
}

Local Development or Manual Install

Clone the repository into your plugins or client-mu-plugins directory.

git clone git@github.com:bigbite/image-comparison.git && cd image-comparison

Install JS packages.

npm install

Build all assets

npm run build:dev

Install PHP packages and create autoloader for the plugin.

composer install

Testing Suite

E2E tests have been created using Playwright.

Run the tests headless.

npm run test:e2e

Debug the tests in a chromium window.

npm run test:e2e:debug

Review and run the tests within the Playwright UI.

npm run test:e2e -- --ui

Requirements

Image Comparison requires these software with the following versions:

• WordPress 6.3+
• PHP 8.0

Issues

We welcome bug reports, feature requests, questions, and pull requests. If you spot any mistakes or have an idea to make the plugin better, just open an issue.

Contributing

Please read Code of Conduct for details on our code of conduct and Contributing for details on the process for submitting pull requests to us.