Title: TwentyTwenty Compare Author: Obaid Hossain Published: Igbe 21, 2017 Last modified: Èbìbí 25, 2026 --- Ṣàwárí àwọn 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 Láti ọwọ́ [Obaid Hossain](https://profiles.wordpress.org/obaid2013/) [Ṣe ìgbàsílẹ̀](https://downloads.wordpress.org/plugin/js-twentytwenty.2.0.2.zip) * [Àwọn àlàyé](https://yor.wordpress.org/plugins/js-twentytwenty/#description) * [Àwọn àgbéyẹ̀wò](https://yor.wordpress.org/plugins/js-twentytwenty/#reviews) * [Ìgbéwọlẹ̀](https://yor.wordpress.org/plugins/js-twentytwenty/#installation) * [Ìdàgbàsókè](https://yor.wordpress.org/plugins/js-twentytwenty/#developers) [Ìrànlọ́wọ́](https://wordpress.org/support/plugin/js-twentytwenty/) ## Àpèjúwe 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** Ìtumọ̀ Yorùbá: – Native WordPress block editor integration with intuitive controls * **Shortcode Support** Ìtumọ̀ Yorùbá: – Use shortcodes in posts, pages, or widgets * **Multiple Options** Ìtumọ̀ Yorùbá: – Customize orientation, labels, behavior, and dimensions * **Responsive Design** Ìtumọ̀ Yorùbá: – Works perfectly on all devices * **Touch Support** Ìtumọ̀ Yorùbá: – Works with touch gestures on mobile devices * **Easy to Use** Ìtumọ̀ Yorùbá: – 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 ## Àwọn àwòrán ìbòjú [[ [[ ## Àwọn ìdí Plugin yìí pèsè 1 ìdí. * TwentyTwenty Compare Compare two images with an interactive before/after slider ## Ìgbéwọlẹ̀ #### 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 ## FAQ ### 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. ## Àwọn àgbéyẹ̀wò ![](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/) Igbe 25, 2017 4 àwọn ìdáhùn Very nice plugin, easy to use although it does require some very slight know-how in order to add your image urlÌtumọ̀ Yorùbá: ’s. If you can figure out the url of an image youÌtumọ̀ Yorùbá: ’d like to add, youÌtumọ̀ Yorùbá: ’ll be just fine, but thereÌtumọ̀ Yorùbá: ’s no media selector or anything, itÌtumọ̀ Yorùbá: ’s all manual. One small issue with css, I believe, but I expect itÌtumọ̀ Yorùbá: ’s an easy fix. [ Ka gbogbo àgbéyẹ̀wò 1 ](https://wordpress.org/support/plugin/js-twentytwenty/reviews/) ## Àwọn Olùkópa & Olùgbéejáde “TwentyTwenty Compare” jẹ́ ètò ìṣàmúlò orísun ṣíṣí sílẹ̀. Àwọn ènìyàn wọ̀nyí ti ṣe ìkópa sí plugin yìí. Àwọn Olùkópa * [ Obaid Hossain ](https://profiles.wordpress.org/obaid2013/) [Túmọ̀ “TwentyTwenty Compare” sí èdè rẹ.](https://translate.wordpress.org/projects/wp-plugins/js-twentytwenty) ### Ṣe o nífẹ̀ẹ́ sí ìdàgbàsókè? [Ṣàwárí koodu](https://plugins.trac.wordpress.org/browser/js-twentytwenty/), ṣàyẹ̀wò [ibi ìpamọ́ SVN](https://plugins.svn.wordpress.org/js-twentytwenty/), tàbí ṣe àgbékalẹ̀ sí [àkọsílẹ̀ ìdàgbàsókè](https://plugins.trac.wordpress.org/log/js-twentytwenty/) nípasẹ̀ [RSS](https://plugins.trac.wordpress.org/log/js-twentytwenty/?limit=100&mode=stop_on_copy&format=rss). ## Àkọsílẹ̀ àwọn àyípadà #### 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 ## Àkójọpọ̀ Meta * Ẹ̀yà **2.0.2** * Ìgbàgbọ́hùn tó kẹ́yìn **ọ̀sẹ̀ 3 sẹ́yìn** * Àwọn ìgbéwọlẹ̀ tó ṣiṣẹ́ **70+** * Ẹ̀yà WordPress ** 5.8 tàbí ju bẹ́ẹ̀ lọ ** * Dánwò dé **7.0.2** * Ẹ̀yà PHP ** 7.4 tàbí ju bẹ́ẹ̀ lọ ** * Èdè * [English (US)](https://wordpress.org/plugins/js-twentytwenty/) * Àmì * [Gutenberg block](https://yor.wordpress.org/plugins/tags/gutenberg-block/) * [Ìwòye Tó Péye](https://yor.wordpress.org/plugins/js-twentytwenty/advanced/) ## Àwọn ìbò 4 lára àwọn ìràwọ̀ 5. * [ 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/) ## Àwọn Olùkópa * [ Obaid Hossain ](https://profiles.wordpress.org/obaid2013/) ## Ìrànlọ́wọ́ Nǹkan wà tí o fẹ́ sọ? Ṣé o nílò ìrànlọ́wọ́? [Wo àpéjọ ìrànlọ́wọ́](https://wordpress.org/support/plugin/js-twentytwenty/)