https://github.com/bigbite/image-comparison
Draggable slider component that can be used to compare the difference between two images.
https://github.com/bigbite/image-comparison
open-source wordpress wordpress-plugin
Last synced: about 2 months ago
JSON representation
Draggable slider component that can be used to compare the difference between two images.
- Host: GitHub
- URL: https://github.com/bigbite/image-comparison
- Owner: bigbite
- License: gpl-2.0
- Created: 2024-05-31T14:55:40.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-14T16:21:32.000Z (3 months ago)
- Last Synced: 2025-03-29T10:22:34.903Z (2 months ago)
- Topics: open-source, wordpress, wordpress-plugin
- Language: JavaScript
- Homepage: https://bigbite.net
- Size: 100 MB
- Stars: 6
- Watchers: 2
- Forks: 0
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.txt
- Code of conduct: CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# 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
[](https://vimeo.com/1000389315)
## 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.
```json
{
"repositories": [
{
"type": "vcs",
"url": "[email protected]: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 [email protected]: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](https://wordpress.org/) 6.3+
- [PHP](https://php.net/) 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](https://github.com/bigbite/image-comparison/issues/new/choose).
## Contributing
Please read [Code of Conduct](./CODE_OF_CONDUCT.md) for details on our code of conduct and [Contributing](./CONTRIBUTING.md) for details on the process for submitting pull requests to us.