=== TwentyTwenty Compare ===
Contributors: obaid2013
Tags: before after image compare, comparison image slider, gutenberg block, twentytwenty compare
Requires at least: 5.8
Tested up to: 7.0
Stable tag: 2.0.1
Requires PHP: 7.4
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

Need to highlight the differences between two images? TwentyTwenty, a visual diff tool, makes it easy to spot them!

== Description ==

TwentyTwenty Compare brings the popular jQuery TwentyTwenty plugin to WordPress with full Gutenberg block support. Compare two images with an interactive before/after slider.

= Features =

* **Gutenberg Block** - Native WordPress block editor integration with intuitive controls
* **Shortcode Support** - Use shortcodes in posts, pages, or widgets
* **Multiple Options** - Customize orientation, labels, behavior, and dimensions
* **Responsive Design** - Works perfectly on all devices
* **Touch Support** - Works with touch gestures on mobile devices
* **Easy to Use** - Simple interface for selecting and managing images

= Block Features =

The Gutenberg block includes:
* Image uploader for before/after images
* Visual preview in the editor
* Customizable labels (Before/After text)
* Orientation selection (Horizontal/Vertical)
* Slider offset control
* Behavior toggles (hover, handle-only, click-to-move)
* Dimension controls (width/height)
* Responsive mode

== Installation ==

= Manual Installation =

1. Download the plugin zip file
2. Go to Plugins > Add New > Upload Plugin
3. Select the zip file and click "Install Now"
4. Activate the plugin

== Usage ==

= Using Gutenberg Block =

1. Edit any post or page
2. Click the "+" (Add Block) button
3. Search for "TwentyTwenty Compare"
4. Click the block to add it
5. Upload your before and after images
6. Customize settings in the sidebar

= Using Shortcodes =

**Basic Usage:**
```
[twentytwenty_compare before="https://yoursite.com/image-before.jpg" after="https://yoursite.com/image-after.jpg"]
```

**With Custom Labels:**
```
[twentytwenty_compare before="before.jpg" after="after.jpg" before_label="Original" after_label="Edited"]
```

**Vertical Orientation:**
```
[twentytwenty_compare before="before.jpg" after="after.jpg" orientation="vertical"]
```

**Custom Dimensions:**
```
[twentytwenty_compare before="before.jpg" after="after.jpg" width="800px" height="500px"]
```

= Shortcode Attributes =

| Attribute | Default | Description |
|-----------|---------|-------------|
| `before` | *required* | URL of the before image |
| `after` | *required* | URL of the after image |
| `before_label` | "Before" | Label text for before image |
| `after_label` | "After" | Label text for after image |
| `orientation` | "horizontal" | "horizontal" or "vertical" |
| `offset` | "0.5" | Initial slider position (0-1) |
| `width` | "" | Container width (e.g., "100%", "800px") |
| `height` | "" | Container height (e.g., "500px") |
| `no_overlay` | "false" | Hide label overlays |
| `move_on_hover` | "false" | Move slider on hover |
| `handle_only` | "true" | Only move via handle |
| `click_to_move` | "false" | Click anywhere to move slider |
| `responsive` | "true" | Make container responsive |

= Using in PHP =

```php
<?php
echo do_shortcode('[twentytwenty_compare before="before.jpg" after="after.jpg"]');
?>
```

== Frequently Asked Questions ==

= What image formats are supported? =

All standard WordPress image formats are supported: JPG, PNG, GIF, WebP, and SVG.

= Can I use this with page builders? =

Yes! The shortcode works with any page builder that supports shortcodes, including Elementor, Divi, Beaver Builder, and Visual Composer.

= Does this work with WordPress 6.5+? =

Yes, the plugin is fully compatible with WordPress 6.5 and the latest Gutenberg block editor.

= Is this mobile-friendly? =

Absolutely! The slider works with touch gestures on mobile devices and is fully responsive.

= Can I have multiple sliders on one page? =

Yes, you can add as many sliders as you need on any page or post.

== Changelog ==

= 2.0.1 =
* Improved security concerns provided by "Plugin Check"

= 2.0.0 =
* Added Gutenberg block support
* New text domain: `twentytwenty-compare`
* Improved UI with image previews in settings
* Added Replace/Remove buttons for images
* Updated jQuery TwentyTwenty library
* New shortcode: `twentytwenty_compare`
* Multiple language support added
* Code refactoring and cleanup

= 1.0 =
* Initial release

== Upgrade Notice ==

= 2.0.1 =

Major update with Gutenberg block support. If upgrading from version 1.x, please note that the shortcode has changed from `t20baic` to `twentytwenty_compare`. All options remain the same.

== Reviews ==

If you find this plugin useful, please leave a review at https://wordpress.org/support/plugin/js-twentytwenty/reviews/

== Support ==

* GitHub: https://github.com/obaidhossain/js-twentytwenty