Title: TwentyTwenty Compare Author: Obaid Hossain Published: 21. apríla 2017 Last modified: 25. mája 2026 --- Vyhľadať plugin ![](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 Od [Obaid Hossain](https://profiles.wordpress.org/obaid2013/) [Stiahnuť](https://downloads.wordpress.org/plugin/js-twentytwenty.2.0.2.zip) * [Podrobnosti](https://sk.wordpress.org/plugins/js-twentytwenty/#description) * [Recenzie](https://sk.wordpress.org/plugins/js-twentytwenty/#reviews) * [Inštalácia](https://sk.wordpress.org/plugins/js-twentytwenty/#installation) * [Vývoj](https://sk.wordpress.org/plugins/js-twentytwenty/#developers) [Podpora](https://wordpress.org/support/plugin/js-twentytwenty/) ## Popis 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 ## Obrázky [[ [[ ## Bloky Tento plugin poskytuje 1 blok. * TwentyTwenty Compare Compare two images with an interactive before/after slider ## Inštalácia #### 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 ## Časté otázky ### 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. ## Recenzie ![](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. apríla 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. [ Prečítať 1 recenziu ](https://wordpress.org/support/plugin/js-twentytwenty/reviews/) ## Prispievatelia a vývojári “TwentyTwenty Compare” je softvér s otvoreným zdrojovým kódom. Do tohto pluginu prispeli nasledujúci ľudia. Prispievatelia * [ Obaid Hossain ](https://profiles.wordpress.org/obaid2013/) [Preložiť „TwentyTwenty Compare“ do vašho jazyka.](https://translate.wordpress.org/projects/wp-plugins/js-twentytwenty) ### Máte záujem o vývoj? [ Prehľadávajte zdrojový kód](https://plugins.trac.wordpress.org/browser/js-twentytwenty/), preskúmajte [SVN repozitár](https://plugins.svn.wordpress.org/js-twentytwenty/), alebo sa prihláste na odber [vývojárskeho logu](https://plugins.trac.wordpress.org/log/js-twentytwenty/) cez [RSS](https://plugins.trac.wordpress.org/log/js-twentytwenty/?limit=100&mode=stop_on_copy&format=rss). ## Zoznam zmien #### 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 ## Meta * Verzia **2.0.2** * Posledná aktualizácia **Pred 3 týždne** * Aktívne inštalácie **70+** * Verzia WordPress ** 5.8 alebo novšia ** * Testované do verzie **7.0.2** * Verzia PHP ** 7.4 alebo novšia ** * Jazyk * [English (US)](https://wordpress.org/plugins/js-twentytwenty/) * Značka * [Gutenberg block](https://sk.wordpress.org/plugins/tags/gutenberg-block/) * [Rozšírené zobrazenie](https://sk.wordpress.org/plugins/js-twentytwenty/advanced/) ## Hodnotenia 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/) ## Prispievatelia * [ Obaid Hossain ](https://profiles.wordpress.org/obaid2013/) ## Podpora Máte čo povedať? Potrebujete pomoc? [Zobraziť fórum podpory](https://wordpress.org/support/plugin/js-twentytwenty/)