{"id":43426,"date":"2016-04-28T11:03:17","date_gmt":"2016-04-28T11:03:17","guid":{"rendered":"https:\/\/wordpress.org\/plugins-wp\/twenty20\/"},"modified":"2025-03-02T10:06:38","modified_gmt":"2025-03-02T10:06:38","slug":"twenty20","status":"publish","type":"plugin","link":"https:\/\/ast.wordpress.org\/plugins\/twenty20\/","author":13790285,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","version":"2.0.4","stable_tag":"2.0.4","tested":"6.7.5","requires":"5.9","requires_php":"5.6","requires_plugins":null,"header_name":"Twenty20 Image Before-After","header_author":"Zayed Baloch","header_description":"","assets_banners_color":"657288","last_updated":"2025-03-02 10:06:38","external_support_url":"","external_repository_url":"","donate_link":"https:\/\/www.paypal.me\/zayedbaloch","header_plugin_uri":"https:\/\/wordpress.org\/plugins\/twenty20\/","header_author_uri":"https:\/\/www.zayedbaloch.com\/","rating":4,"author_block_rating":0,"active_installs":20000,"downloads":418126,"num_ratings":55,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.7.0":{"tag":"1.7.0","author":"zayedbaloch","date":"2024-07-02 08:00:02"},"1.7.1":{"tag":"1.7.1","author":"zayedbaloch","date":"2024-07-02 16:36:46"},"1.7.2":{"tag":"1.7.2","author":"zayedbaloch","date":"2024-07-09 06:51:44"},"1.7.3":{"tag":"1.7.3","author":"zayedbaloch","date":"2024-07-25 12:59:50"},"1.7.4":{"tag":"1.7.4","author":"zayedbaloch","date":"2024-08-09 11:03:19"},"1.7.5":{"tag":"1.7.5","author":"zayedbaloch","date":"2024-08-10 14:12:16"},"1.7.6":{"tag":"1.7.6","author":"zayedbaloch","date":"2025-02-12 20:16:51"},"2.0.0":{"tag":"2.0.0","author":"zayedbaloch","date":"2025-02-16 21:03:07"},"2.0.1":{"tag":"2.0.1","author":"zayedbaloch","date":"2025-02-24 19:14:31"},"2.0.2":{"tag":"2.0.2","author":"zayedbaloch","date":"2025-02-24 19:57:11"},"2.0.3":{"tag":"2.0.3","author":"zayedbaloch","date":"2025-02-25 05:15:42"},"2.0.4":{"tag":"2.0.4","author":"zayedbaloch","date":"2025-03-02 10:06:38"}},"upgrade_notice":{"2.0.4":"<ul>\n<li>Minor fixes<\/li>\n<\/ul>","2.0.3":"<ul>\n<li>Minor fixes<\/li>\n<\/ul>","2.0.2":"<ul>\n<li>Fixed: Missing alt attributes in image comparison<\/li>\n<\/ul>","2.0.1":"<ul>\n<li>Improved: Accessibility compliance<\/li>\n<li>Improved: SEO optimization for image comparisons<\/li>\n<\/ul>","2.0.0":"<ul>\n<li>Complete codebase modernization<\/li>\n<li>New: Enhanced image loading system<\/li>\n<li>New: Improved mobile touch response<\/li>\n<li>New: Better compatibility with page builders<\/li>\n<li>New: Modernized admin interface<\/li>\n<li>Fixed: Widget image selection issues<\/li>\n<li>Fixed: Image replacement bug in widgets<\/li>\n<li>Fixed: Admin CSS loading in editor<\/li>\n<li>Fixed: Multiple slider initialization issues<\/li>\n<li>Improved: Script loading reliability<\/li>\n<li>Improved: Overall performance optimization<\/li>\n<\/ul>"},"ratings":{"1":9,"2":4,"3":1,"4":6,"5":35},"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":3241520,"resolution":"128x128","location":"assets","locale":""},"icon-256x256.png":{"filename":"icon-256x256.png","revision":3241520,"resolution":"256x256","location":"assets","locale":""}},"assets_banners":{"banner-772x250.png":{"filename":"banner-772x250.png","revision":3241520,"resolution":"772x250","location":"assets","locale":""}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.7.0","1.7.1","1.7.2","1.7.3","1.7.4","1.7.5","1.7.6","2.0.0","2.0.1","2.0.2","2.0.3","2.0.4"],"block_files":[],"assets_screenshots":{"screenshot-9.png":{"filename":"screenshot-9.png","revision":3249154,"resolution":"9","location":"plugin"},"screenshot-4.png":{"filename":"screenshot-4.png","revision":3249154,"resolution":"4","location":"plugin"},"screenshot-3.png":{"filename":"screenshot-3.png","revision":3249154,"resolution":"3","location":"plugin"},"screenshot-5.png":{"filename":"screenshot-5.png","revision":3249154,"resolution":"5","location":"plugin"},"screenshot-8.png":{"filename":"screenshot-8.png","revision":3249154,"resolution":"8","location":"plugin"},"screenshot-6.png":{"filename":"screenshot-6.png","revision":3249154,"resolution":"6","location":"plugin"},"screenshot-7.png":{"filename":"screenshot-7.png","revision":3249154,"resolution":"7","location":"plugin"},"screenshot-11.png":{"filename":"screenshot-11.png","revision":3249154,"resolution":"11","location":"plugin"},"screenshot-1.png":{"filename":"screenshot-1.png","revision":3249154,"resolution":"1","location":"plugin"},"screenshot-10.png":{"filename":"screenshot-10.png","revision":3249154,"resolution":"10","location":"plugin"},"screenshot-2.png":{"filename":"screenshot-2.png","revision":3249154,"resolution":"2","location":"plugin"}},"screenshots":{"1":"Add a Twenty20 before-after image.","2":"Select any two images from the Media Library.","3":"Twenty20 shortcode settings page.","4":"Shortcode.","5":"Twenty20 in action.","6":"Multiple sliders in different directions.","7":"Twenty20 widget.","8":"Widget in action.","9":"WP Bakery Visual Composer settings.","10":"Elementor element.","11":"UX Builder element."},"jetpack_post_was_ever_published":false},"plugin_section":[],"plugin_tags":[130737,76538,176050,2141,1080],"plugin_category":[43,50],"plugin_contributors":[218683,81999],"plugin_business_model":[],"class_list":["post-43426","plugin","type-plugin","status-publish","hentry","plugin_tags-before-after-slider","plugin_tags-elementor","plugin_tags-image-comparison","plugin_tags-image-slider","plugin_tags-visual-composer","plugin_category-customization","plugin_category-media","plugin_contributors-hammal","plugin_contributors-zayedbaloch","plugin_committers-zayedbaloch"],"banners":{"banner":"https:\/\/ps.w.org\/twenty20\/assets\/banner-772x250.png?rev=3241520","banner_2x":false,"banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/twenty20\/assets\/icon-128x128.png?rev=3241520","icon_2x":"https:\/\/ps.w.org\/twenty20\/assets\/icon-256x256.png?rev=3241520","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/twenty20\/trunk\/screenshot-1.png?rev=3249154","caption":"Add a Twenty20 before-after image."},{"src":"https:\/\/ps.w.org\/twenty20\/trunk\/screenshot-2.png?rev=3249154","caption":"Select any two images from the Media Library."},{"src":"https:\/\/ps.w.org\/twenty20\/trunk\/screenshot-3.png?rev=3249154","caption":"Twenty20 shortcode settings page."},{"src":"https:\/\/ps.w.org\/twenty20\/trunk\/screenshot-4.png?rev=3249154","caption":"Shortcode."},{"src":"https:\/\/ps.w.org\/twenty20\/trunk\/screenshot-5.png?rev=3249154","caption":"Twenty20 in action."},{"src":"https:\/\/ps.w.org\/twenty20\/trunk\/screenshot-6.png?rev=3249154","caption":"Multiple sliders in different directions."},{"src":"https:\/\/ps.w.org\/twenty20\/trunk\/screenshot-7.png?rev=3249154","caption":"Twenty20 widget."},{"src":"https:\/\/ps.w.org\/twenty20\/trunk\/screenshot-8.png?rev=3249154","caption":"Widget in action."},{"src":"https:\/\/ps.w.org\/twenty20\/trunk\/screenshot-9.png?rev=3249154","caption":"WP Bakery Visual Composer settings."},{"src":"https:\/\/ps.w.org\/twenty20\/trunk\/screenshot-10.png?rev=3249154","caption":"Elementor element."},{"src":"https:\/\/ps.w.org\/twenty20\/trunk\/screenshot-11.png?rev=3249154","caption":"UX Builder element."}],"raw_content":"<!--section=description-->\n<p>Twenty20 is a professional-grade image comparison tool that helps you showcase transformations in a highly engaging way. Perfect for:<\/p>\n\n<ul>\n<li>Photography portfolios<\/li>\n<li>Real estate before\/after<\/li>\n<li>Renovation projects<\/li>\n<li>Design makeovers<\/li>\n<li>Product comparisons<\/li>\n<li>Restoration work<\/li>\n<li>Medical procedures<\/li>\n<li>And much more!<\/li>\n<\/ul>\n\n<h4>Video Tutorial<\/h4>\n\n<p>https:\/\/www.youtube.com\/watch?v=1cQ9rhL-t70<\/p>\n\n<h4>Live Demo<\/h4>\n\n<p>Check the <a href=\"https:\/\/zayedbaloch.com\/twenty20-image-before-after-wordpress-plugin\/\" title=\"Twenty20 Live demo\">Live Demo<\/a>.<\/p>\n\n<h4>Key Features<\/h4>\n\n<ul>\n<li>Responsive design - works perfectly on all devices<\/li>\n<li>Horizontal and vertical sliding options<\/li>\n<li>Customizable slider position and orientation<\/li>\n<li>Custom \"before\" and \"after\" labels<\/li>\n<li>Adjustable image widths and alignments<\/li>\n<li>Mouse hover sliding effect<\/li>\n<li>Touch-enabled for mobile devices<\/li>\n<li>Multiple sliders per page<\/li>\n<li>Widget support for sidebars<\/li>\n<li>SEO-friendly with proper alt tag support<\/li>\n<li>Accessibility compliant image comparisons<\/li>\n<\/ul>\n\n<h4>Page Builder Support<\/h4>\n\n<ul>\n<li>Elementor<\/li>\n<li>WPBakery Page Builder (Visual Composer)<\/li>\n<li>Flatsome UX Builder<\/li>\n<li>Classic Editor<\/li>\n<\/ul>\n\n<h4>Perfect For<\/h4>\n\n<ul>\n<li>Photography before\/after edits<\/li>\n<li>Home renovation comparisons<\/li>\n<li>Web design makeovers<\/li>\n<li>Product transformations<\/li>\n<li>Restoration projects<\/li>\n<li>Beauty transformations<\/li>\n<li>Real estate renovations<\/li>\n<\/ul>\n\n<h3>Usage<\/h3>\n\n<h4>Shortcode Example<\/h4>\n\n<p><strong>Quick Example<\/strong><\/p>\n\n<pre><code>[twenty20 img1=\"\" img2=\"\" direction=\"vertical\" offset=\"0.5\" align=\"right\" width=\"60%\" before=\"Before\" after=\"After\" hover=\"true\"]\n<\/code><\/pre>\n\n<p><strong>Shortcode Parameters<\/strong><\/p>\n\n<ul>\n<li><code>img1<\/code> - image ID.<\/li>\n<li><code>img2<\/code> - image ID.<\/li>\n<li><code>offset<\/code> - range from 0.1 to 1.0.<\/li>\n<li><code>direction<\/code> - <code>horizontal|vertical<\/code>.<\/li>\n<li><code>align<\/code> - <code>none|right|left<\/code>.<\/li>\n<li><code>width<\/code> - supports both <code>px<\/code> and <code>%<\/code>.<\/li>\n<li><code>before<\/code> - text for the \"before\" label.<\/li>\n<li><code>after<\/code> - text for the \"after\" label.<\/li>\n<li><code>hover<\/code> - <code>true<\/code> or <code>false<\/code>.<\/li>\n<\/ul>\n\n<!--section=installation-->\n<ol>\n<li>Upload the <code>twenty20<\/code> folder to your <code>\/wp-content\/plugins\/<\/code> directory<\/li>\n<li>Activate the plugin through the 'Plugins' menu in WordPress<\/li>\n<li>Use the shortcode <code>[twenty20]<\/code> in your posts\/pages or use the widget<\/li>\n<\/ol>\n\n<h4>Quick Start Guide<\/h4>\n\n<ol>\n<li>Click the \"Add Twenty20\" button in your editor<\/li>\n<li>Select your before and after images<\/li>\n<li>Customize settings as needed<\/li>\n<li>Insert and publish<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id='how%20it%20works%3F'><h3>How it works?<\/h3><\/dt>\n<dd><p>Twenty20 works by stacking two images on top of each other. As the slider moves across the image.<\/p><\/dd>\n<dt id='quick%20example'><h3>Quick Example<\/h3><\/dt>\n<dd><p>[twenty20 img1=\"\" img2=\"\" direction=\"vertical\" offset=\"0.5\" align=\"right\" width=\"60%\" before=\"Before\" after=\"After\" hover=\"true\"]<\/p><\/dd>\n<dt id='shortcode%20parameters'><h3>Shortcode Parameters<\/h3><\/dt>\n<dd><ul>\n<li><code>img1<\/code> - image ID.<\/li>\n<li><code>img2<\/code> - image ID.<\/li>\n<li><code>offset<\/code> - range from 0.1 to 1.0.<\/li>\n<li><code>direction<\/code> - <code>horizontal|vertical<\/code>.<\/li>\n<li><code>align<\/code> - <code>none|right|left<\/code>.<\/li>\n<li><code>width<\/code> - supports both px and %.<\/li>\n<li><code>before<\/code> - text for the \"before\" label.<\/li>\n<li><code>after<\/code> - text for the \"after\" label.<\/li>\n<li><code>hover<\/code> - <code>true<\/code> or <code>false<\/code>.<\/li>\n<\/ul><\/dd>\n<dt id='how%20to%20add%20before-after%20slider%3F'><h3>How to add before-after slider?<\/h3><\/dt>\n<dd><p>Check the demo <a href=\"https:\/\/www.youtube.com\/watch?v=1cQ9rhL-t70\" title=\"YouTube\">Video<\/a> demo.<\/p><\/dd>\n<dt id='how%20do%20i%20add%20a%20widget%3F'><h3>How do I add a widget?<\/h3><\/dt>\n<dd><p>Watch the <a href=\"https:\/\/www.youtube.com\/watch?v=1cQ9rhL-t70\" title=\"YouTube\">video demo<\/a> on YouTube.<\/p><\/dd>\n<dt id='can%20i%20use%20more%20than%20one%20slider%20in%20a%20single%20post%20or%20page%3F'><h3>Can I use more than one slider in a single post or page?<\/h3><\/dt>\n<dd><p>Yes, the Twenty20 plugin allows users to add unlimited before-after sliders.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>2.0.4<\/h4>\n\n<ul>\n<li>Minor fixes<\/li>\n<\/ul>\n\n<h4>2.0.3<\/h4>\n\n<ul>\n<li>Minor fixes<\/li>\n<\/ul>\n\n<h4>2.0.2<\/h4>\n\n<ul>\n<li>Fixed: Missing alt attributes in image comparison<\/li>\n<\/ul>\n\n<h4>2.0.1<\/h4>\n\n<ul>\n<li>Improved: Accessibility compliance<\/li>\n<li>Improved: SEO optimization for image comparisons<\/li>\n<\/ul>\n\n<h4>2.0.0<\/h4>\n\n<ul>\n<li>Complete codebase modernization<\/li>\n<li>New: Enhanced image loading system<\/li>\n<li>New: Improved mobile touch response<\/li>\n<li>New: Better compatibility with page builders<\/li>\n<li>New: Modernized admin interface<\/li>\n<li>Fixed: Widget image selection issues<\/li>\n<li>Fixed: Image replacement bug in widgets<\/li>\n<li>Fixed: Admin CSS loading in editor<\/li>\n<li>Fixed: Multiple slider initialization issues<\/li>\n<li>Improved: Script loading reliability<\/li>\n<li>Improved: Overall performance optimization<\/li>\n<\/ul>\n\n<h4>1.7.6<\/h4>\n\n<ul>\n<li>Fixed Elementor Widget<\/li>\n<li>Improved mobile responsiveness<\/li>\n<li>Performance optimizations<\/li>\n<\/ul>\n\n<h4>1.7.5<\/h4>\n\n<ul>\n<li>Fixed Elementor Widget<\/li>\n<\/ul>\n\n<h4>1.7.4<\/h4>\n\n<ul>\n<li>Fixed Elementor Widget<\/li>\n<\/ul>\n\n<h4>1.7.3<\/h4>\n\n<ul>\n<li>Bug fixes<\/li>\n<\/ul>\n\n<h4>1.7.2<\/h4>\n\n<ul>\n<li>Improve script<\/li>\n<\/ul>\n\n<h4>1.7.1<\/h4>\n\n<ul>\n<li>Bug fixes<\/li>\n<\/ul>\n\n<h4>1.7.0<\/h4>\n\n<ul>\n<li>Bug fixes<\/li>\n<\/ul>\n\n<h4>1.6.1<\/h4>\n\n<ul>\n<li>Bug fixes.<\/li>\n<\/ul>\n\n<h4>1.6.0<\/h4>\n\n<ul>\n<li>Security fixes, and passed in WordPress review.<\/li>\n<\/ul>\n\n<h4>1.5.9<\/h4>\n\n<ul>\n<li>Security fixes<\/li>\n<\/ul>\n\n<h4>1.5.8<\/h4>\n\n<ul>\n<li>Fix: Minor jQuery fix<\/li>\n<\/ul>\n\n<h4>1.5.7<\/h4>\n\n<ul>\n<li>Fix: WP 5.6 Uncaught TypeError (Thanks to @negru13)<\/li>\n<\/ul>\n\n<h4>1.5.6<\/h4>\n\n<ul>\n<li>Fix: Jetpack's lazy load images issue<\/li>\n<\/ul>\n\n<h4>1.5.5<\/h4>\n\n<ul>\n<li>Fix: Widget mouse over.<\/li>\n<\/ul>\n\n<h4>1.5.4<\/h4>\n\n<ul>\n<li>Added: Integrated with WP Image alt.<\/li>\n<\/ul>\n\n<h4>1.5.3<\/h4>\n\n<ul>\n<li>Fixed cation overlay issue.<\/li>\n<\/ul>\n\n<h4>1.5.2<\/h4>\n\n<ul>\n<li>Fixed Before and After shortcode insert issue<\/li>\n<\/ul>\n\n<h4>1.5.1<\/h4>\n\n<ul>\n<li>Fixed loading issue<\/li>\n<\/ul>\n\n<h4>1.5<\/h4>\n\n<ul>\n<li>NEW: Add Elementor Page builder support.<\/li>\n<li>NEW: Add UX Builder by UXThemes support.<\/li>\n<li>Minor CSS fixes<\/li>\n<\/ul>\n\n<h4>1.4<\/h4>\n\n<ul>\n<li>NEW: 'Move slider on mouse over'.<\/li>\n<\/ul>\n\n<h4>1.3<\/h4>\n\n<ul>\n<li>NEW: Image Before and After caption.<\/li>\n<li>Fixed arrow shadow css.<\/li>\n<li>Widget updated.<\/li>\n<\/ul>\n\n<h4>1.2<\/h4>\n\n<ul>\n<li>Fixed alignment bug<\/li>\n<\/ul>\n\n<h4>1.1<\/h4>\n\n<ul>\n<li>Fixed width issue<\/li>\n<\/ul>\n\n<h4>1.0<\/h4>\n\n<ul>\n<li>First Release<\/li>\n<\/ul>","raw_excerpt":"Professional before &amp; after image comparison slider for WordPress. Create engaging visual comparisons with an intuitive drag &amp; drop interface.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/ast.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/43426","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ast.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/ast.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/ast.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=43426"}],"author":[{"embeddable":true,"href":"https:\/\/ast.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/zayedbaloch"}],"wp:attachment":[{"href":"https:\/\/ast.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=43426"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/ast.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=43426"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/ast.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=43426"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/ast.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=43426"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/ast.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=43426"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/ast.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=43426"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}