=== Image Split – Before/After Image Comparison Slider ===

Contributors: barb0ss
Tags: before after, image comparison, slider, gutenberg, shortcode
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
Stable tag: 1.0.1
License: GPLv3
License URI: https://www.gnu.org/licenses/gpl-3.0.html

Before/after image comparisons with a draggable ruler. Block (including widget areas), shortcode. Premium: WooCommerce and Elementor.

== Description ==

Image Split is a friendly, lightweight way to show **before and after** photos, product comparisons, or makeovers — all with a smooth draggable slider visitors can move with a mouse, touch, or keyboard.

Unlike clunky embeds or heavy page builders, Image Split:

🧩 **Fits your workflow** — Drop in a block (in posts or under Appearance → Widgets), or paste a shortcode.
🎨 **Looks polished** — Horizontal or vertical layout, ruler styles (line, bar, circle), and labels you can style to match your brand.
♿ **Stays accessible** — Keyboard navigation and ARIA support so more people can use your comparisons.
⚙️ **Saves time** — Set global defaults under Settings → Image Split so new comparisons start with your look.

Need product pages or Elementor? **[Premium](http://pluginarium.com/image-split/#premium)** adds WooCommerce and Elementor, plus deeper per-item customization.

[Image Split official website](http://pluginarium.com/image-split) | [Plugin documentation](http://pluginarium.com/image-split/image-split-documentation)

== ✨ Free features ✨ ==

* **Gutenberg block** — Pick Before and After images, tune the ruler, and place labels without leaving the editor.
* **Shortcode** — Use `[image_split]` anywhere shortcodes run, with optional attributes for layout and styling.
* **Widget areas** — Add the same Image Split block under Appearance → Widgets (block-based widget editor).
* **Orientation** — Horizontal or vertical comparison.
* **Ruler styles** — Line, bar, or circle; custom color and width.
* **Labels** — Before/After text with position, color, background, and font size.
* **Global defaults** — Settings → Image Split for site-wide starting values.
* **Responsive & touch-friendly** — Works on phones and tablets.
* **Lazy-loading friendly** — Plays nicely with common lazy-load setups.
* **Accessibility** — Keyboard and ARIA support.

== ⚜️ Premium features ⚜️ ==

* **WooCommerce** — Enable Image Split per product on the single product page, using gallery images or custom attachment IDs.
* **Elementor widget** — Drop Image Split into Elementor-built layouts.
* **Full customization** — More options to override defaults per block, shortcode, or product.

Unlock product pages, Elementor, and advanced controls — upgrade when you’re ready.

**[Explore the Premium version here.](http://pluginarium.com/image-split/#premium)**

== How does Image Split work? ==

You choose two images (before and after). Image Split renders them as one comparison with a movable divider. The free plugin ships the block (for content and widget areas), shortcode, and global defaults; Premium adds WooCommerce and Elementor integrations built for stores and visual builders.

[Full documentation is available here.](http://pluginarium.com/image-split/image-split-documentation)

== Installation ==

1. Upload the `image-split` folder to `/wp-content/plugins/`, or install through the WordPress plugin screen.
2. Activate the plugin.
3. Add the **Image Split** block (in posts or under Appearance → Widgets), use the shortcode `[image_split]`, or both. The distributed plugin includes built block assets; no Node/npm step is required. **Premium:** enable Image Split on WooCommerce products or use the Elementor widget.

== Shortcode ==

`[image_split before="123" after="456" orientation="horizontal" offset="0.5" ruler_style="line" ruler_color="#ffffff" ruler_width="4" label_before="Before" label_after="After" label_position="bottom-left" label_color="#ffffff" label_bg_color="rgba(0,0,0,0.5)" label_font_size="14"]`

* **before**, **after** — attachment IDs (required)
* **orientation** — `horizontal` | `vertical`
* **offset** — 0 to 1 (default 0.5)
* **ruler_style** — `line` | `bar` | `circle`
* **ruler_color**, **ruler_width** — color and width in px
* **label_before**, **label_after** — text
* **label_position** — Before label: top-left, top-right, bottom-left, bottom-right, center-left, center-right
* **label_after_position** — After label (same options)
* **label_color**, **label_bg_color**, **label_font_size**

== WooCommerce (Premium) ==

On the product edit screen, under **Product data** → gallery / Image Split options:

* **Enable Image Split** — Show the slider instead of the main product image on the product page.
* **Before/After image ID** — Use `0` to take the first two gallery images automatically.

== Frequently Asked Questions ==

= Where are the global default settings? =

Go to **Settings → Image Split** in your WordPress admin. Those defaults apply when you add a new block, shortcode, or other integration unless you override them.

= What are the required shortcode attributes? =

You must set **before** and **after** to two media library attachment IDs (integers).

= Does Image Split work with lazy loading? =

Yes. The slider is built to cooperate with common lazy-loading setups.

= Is the comparison accessible? =

The free version includes keyboard support and ARIA attributes so visitors can use the divider without a mouse where possible.

= What does Premium add? =

Premium adds **WooCommerce** product integration, an **Elementor** widget, and more options to customize each comparison. See [Premium](http://pluginarium.com/image-split/#premium).

= Where is the full documentation? =

[Image Split documentation](http://pluginarium.com/image-split/image-split-documentation)

== Screenshots ==

1. Front-end before/after comparison with the draggable ruler (horizontal layout).
2. Gutenberg block: selecting Before and After images in the editor.
3. Global defaults on Settings → Image Split.
4. Shortcode example in a classic block or shortcode-ready area.
5. Premium: WooCommerce product options under Product data.
6. Premium: Image Split Elementor widget in the page builder.

== Changelog ==

= 1.0.0 =
* Initial release: Gutenberg block (posts and widget areas), shortcode, global defaults. Premium: WooCommerce integration, Elementor widget, extended customization.

== Upgrade Notice ==

= 1.0.0 =
* First public release.