TwentyTwenty Compare

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 Usage Using Gutenberg Block Edit any post or page Click the “+” (Add Block) button Search for “TwentyTwenty Compare” Click the block to add it Upload your before and after images 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 ` 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