Title: TwentyTwenty Compare Author: Obaid Hossain Published: 21 balandžio, 2017 Last modified: 25 gegužės, 2026 --- Ieškoti įskiepiuose ![](https://ps.w.org/js-twentytwenty/assets/banner-772x250.png?rev=1642243) ![](https://ps.w.org/js-twentytwenty/assets/icon-256x256.png?rev=1642243) # TwentyTwenty Compare Autorius [Obaid Hossain](https://profiles.wordpress.org/obaid2013/) [Parsisiųsti](https://downloads.wordpress.org/plugin/js-twentytwenty.2.0.2.zip) * [Informacija](https://lt.wordpress.org/plugins/js-twentytwenty/#description) * [Atsiliepimai](https://lt.wordpress.org/plugins/js-twentytwenty/#reviews) * [Diegimas](https://lt.wordpress.org/plugins/js-twentytwenty/#installation) * [Kūrimas](https://lt.wordpress.org/plugins/js-twentytwenty/#developers) [Pagalba](https://wordpress.org/support/plugin/js-twentytwenty/) ## Aprašymas 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 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 ``` ` ### 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 ## Ekrano nuotraukos [[ [[ ## Blokai Šis įskiepis suteikia 1 bloką. * TwentyTwenty Compare Compare two images with an interactive before/after slider ## Diegimas #### 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 ## DUK ### 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. ## Atsiliepimai ![](https://secure.gravatar.com/avatar/294cf5e4cc37c733c1accdd9f37022503436846d600d5b16d056cabc52563428? s=60&d=retro&r=g) ### 󠀁[Simple, but nice](https://wordpress.org/support/topic/simple-but-nice-5/)󠁿 [Joe](https://profiles.wordpress.org/joecole1/) 25 balandžio, 2017 4 replies Very nice plugin, easy to use although it does require some very slight know-how in order to add your image url’s. If you can figure out the url of an image you’d like to add, you’ll be just fine, but there’s no media selector or anything, it’s all manual. One small issue with css, I believe, but I expect it’s an easy fix. [ Perskaityti visus atsiliepimus (1) ](https://wordpress.org/support/plugin/js-twentytwenty/reviews/) ## Programuotojai ir komandos nariai “TwentyTwenty Compare” yra atviro kodo programa. Prie jos sukūrimo prisidėję žmonės surašyti toliau. Autoriai * [ Obaid Hossain ](https://profiles.wordpress.org/obaid2013/) [Išverskite “TwentyTwenty Compare” į savo kalbą.](https://translate.wordpress.org/projects/wp-plugins/js-twentytwenty) ### Domina programavimas? [Peržiūrėkite kodą](https://plugins.trac.wordpress.org/browser/js-twentytwenty/), naršykite [SVN repozitorijoje](https://plugins.svn.wordpress.org/js-twentytwenty/), arba užsiprenumeruokite [kodo pakeitimų žurnalą](https://plugins.trac.wordpress.org/log/js-twentytwenty/) per [RSS](https://plugins.trac.wordpress.org/log/js-twentytwenty/?limit=100&mode=stop_on_copy&format=rss). ## Pakeitimų istorija #### 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 ## Metainformacija * Version **2.0.2** * Atnaujinta **prieš 3 savaitės** * Aktyvių instaliacijų **70+** * WordPress versija ** 5.8 ar naujesnė ** * Ištestuota iki **7.0.2** * PHP versija ** 7.4 ar naujesnė ** * Kalba * [English (US)](https://wordpress.org/plugins/js-twentytwenty/) * Žyma * [Gutenberg block](https://lt.wordpress.org/plugins/tags/gutenberg-block/) * [Daugiau](https://lt.wordpress.org/plugins/js-twentytwenty/advanced/) ## Įvertinimai 4 out of 5 stars. * [ 0 5-star reviews ](https://wordpress.org/support/plugin/js-twentytwenty/reviews/?filter=5) * [ 1 4-star review ](https://wordpress.org/support/plugin/js-twentytwenty/reviews/?filter=4) * [ 0 3-star reviews ](https://wordpress.org/support/plugin/js-twentytwenty/reviews/?filter=3) * [ 0 2-star reviews ](https://wordpress.org/support/plugin/js-twentytwenty/reviews/?filter=2) * [ 0 1-star reviews ](https://wordpress.org/support/plugin/js-twentytwenty/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/js-twentytwenty/reviews/#new-post) [See all reviews](https://wordpress.org/support/plugin/js-twentytwenty/reviews/) ## Autoriai * [ Obaid Hossain ](https://profiles.wordpress.org/obaid2013/) ## Pagalba Turite pastabų? Reikia pagalbos? [Peržiūrėti pagalbos forumą](https://wordpress.org/support/plugin/js-twentytwenty/)