Title: Image Split – Before/After Image Comparison Slider
Author: Bogdan Bendziukov
Published: 2026 ལོའི་ཟླ 4 ཚེས 29 ཉིན།
Last modified: 2026 ལོའི་ཟླ 5 ཚེས 21 ཉིན།
---
མཐུད་སྣེ་བཤེར་འཚོལ།
# Image Split – Before/After Image Comparison Slider
རྩོམ་པ་པོ། [Bogdan Bendziukov](https://profiles.wordpress.org/barb0ss/)
[ཕབ་ལེན།](https://downloads.wordpress.org/plugin/image-split.1.0.2.zip)
* [ཞིབ་ཕྲ།](https://bo.wordpress.org/plugins/image-split/#description)
* [གདེང་འཇོག](https://bo.wordpress.org/plugins/image-split/#reviews)
* [སྒྲིག་འཇུག](https://bo.wordpress.org/plugins/image-split/#installation)
* [ཡར་རྒྱས།](https://bo.wordpress.org/plugins/image-split/#developers)
[རམ་འདེགས།](https://wordpress.org/support/plugin/image-split/)
## ཞིབ་བརྗོད།
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)
### 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.
## གཏུབ་རེིས།
[⌊Front-end before/after comparison with the draggable ruler (horizontal layout).⌉⌊
Front-end before/after comparison with the draggable ruler (horizontal layout).⌉[
Front-end before/after comparison with the draggable ruler (horizontal layout).
[⌊Gutenberg block: selecting Before and After images in the editor.⌉⌊Gutenberg block:
selecting Before and After images in the editor.⌉[
Gutenberg block: selecting Before and After images in the editor.
[⌊Global defaults on Settings ](https://ps.w.org/image-split/assets/screenshot-3.jpg?rev=3518692)
Global defaults on Settings Image Split.
[⌊Shortcode example in a classic block or shortcode-ready area.⌉⌊Shortcode example
in a classic block or shortcode-ready area.⌉[
Shortcode example in a classic block or shortcode-ready area.
[⌊Premium: WooCommerce product options under Product data.⌉⌊Premium: WooCommerce
product options under Product data.⌉[
Premium: WooCommerce product options under Product data.
[⌊Premium: Image Split Elementor widget in the page builder.⌉⌊Premium: Image Split
Elementor widget in the page builder.⌉[
Premium: Image Split Elementor widget in the page builder.
## Blocks
This plugin provides 1 block.
* Image Split
## སྒྲིག་འཇུག
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.
## FAQ
### 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)
## གདེང་འཇོག
There are no reviews for this plugin.
## བྱས་རྗེས་འཇོག་མཁན། & གསར་འབྱེད་པ།
“Image Split – Before/After Image Comparison Slider” is open source software. The
following people have contributed to this plugin.
བྱས་རྗེས་འཇོག་མཁན།
* [ Bogdan Bendziukov ](https://profiles.wordpress.org/barb0ss/)
[ཁྱེད་ཀྱི་སྐད་ཡིག་ནང་ལ་ “Image Split – Before/After Image Comparison Slider” ཡིག་སྒྱུར་བྱོས།](https://translate.wordpress.org/projects/wp-plugins/image-split)
### Interested in development?
[Browse the code](https://plugins.trac.wordpress.org/browser/image-split/), check
out the [SVN repository](https://plugins.svn.wordpress.org/image-split/), or subscribe
to the [development log](https://plugins.trac.wordpress.org/log/image-split/) by
[RSS](https://plugins.trac.wordpress.org/log/image-split/?limit=100&mode=stop_on_copy&format=rss).
## དག་བཅོས་ཉིན་ཐོ།
#### 1.0.2
* Fix: Remove stray “0” shown above “Before image position” in the Gutenberg block
Image alignment panel.
#### 1.0.0
* Initial release: Gutenberg block (posts and widget areas), shortcode, global
defaults. Premium: WooCommerce integration, Elementor widget, extended customization.
## ཟུར་བརྗོད།
* Version **1.0.2**
* Last updated **གཟའ་འཁོར 3 སྔོན།**
* Active installations **ཐེངས་ 10 ལས་ཉུང་བ།**
* WordPress version ** 6.0 ཡང་ན་དེ་ལས་མཐོ་བ། **
* Tested up to **7.0**
* PHP version ** 7.4 ཡང་ན་དེ་ལས་མཐོ་བ། **
* Language
* [English (US)](https://wordpress.org/plugins/image-split/)
* Tags
* [before after](https://bo.wordpress.org/plugins/tags/before-after/)[gutenberg](https://bo.wordpress.org/plugins/tags/gutenberg/)
[image comparison](https://bo.wordpress.org/plugins/tags/image-comparison/)[shortcode](https://bo.wordpress.org/plugins/tags/shortcode/)
[slider](https://bo.wordpress.org/plugins/tags/slider/)
* [མཐོ་རིམ་མཐོང་སྣང་།](https://bo.wordpress.org/plugins/image-split/advanced/)
## གདེང་འཇོག
No reviews have been submitted yet.
[Your review](https://wordpress.org/support/plugin/image-split/reviews/#new-post)
[See all reviews](https://wordpress.org/support/plugin/image-split/reviews/)
## བྱས་རྗེས་འཇོག་མཁན།
* [ Bogdan Bendziukov ](https://profiles.wordpress.org/barb0ss/)
## རམ་འདེགས།
Got something to say? Need help?
[རམ་འདེགས་གླེང་སྟེགས་ལ་ལྟ།](https://wordpress.org/support/plugin/image-split/)