{"id":66789,"date":"2017-04-21T08:53:00","date_gmt":"2017-04-21T08:53:00","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/jquery-twentytwenty\/"},"modified":"2026-05-25T03:32:13","modified_gmt":"2026-05-25T03:32:13","slug":"js-twentytwenty","status":"closed","type":"plugin","link":"https:\/\/ug.wordpress.org\/plugins\/js-twentytwenty\/","author":10629141,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"2.0.1","stable_tag":"2.0.1","tested":"7.0","requires":"5.8","requires_php":"7.4","requires_plugins":null,"header_name":"TwentyTwenty Compare","header_author":"Obaid Hossain","header_description":"Need to highlight the differences between two images? TwentyTwenty, a visual diff tool, makes it easy to spot them!","assets_banners_color":"2b94dc","last_updated":"2026-05-25 03:32:13","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"https:\/\/wordpress.org\/plugins\/js-twentytwenty\/","header_author_uri":"https:\/\/github.com\/obaidhossain\/","rating":4,"author_block_rating":0,"active_installs":70,"downloads":2766,"num_ratings":1,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.0":{"tag":"1.0","author":"Obaid2013","date":"2017-04-21 09:11:24"},"2.0.0":{"tag":"2.0.0","author":"Obaid2013","date":"2026-05-24 19:51:04"},"2.0.1":{"tag":"2.0.1","author":"Obaid2013","date":"2026-05-25 03:32:13"}},"upgrade_notice":{"2.0.1":"<p>Major update with Gutenberg block support. If upgrading from version 1.x, please note that the shortcode has changed from <code>t20baic<\/code> to <code>twentytwenty_compare<\/code>. All options remain the same.<\/p>"},"ratings":{"1":0,"2":0,"3":0,"4":"1","5":0},"assets_icons":{"icon-256x256.png":{"filename":"icon-256x256.png","revision":1642243,"resolution":"256x256","location":"assets","locale":"","width":256,"height":256}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":1642240,"resolution":"1544x500","location":"assets","locale":"","width":1544,"height":500},"banner-772x250.png":{"filename":"banner-772x250.png","revision":1642243,"resolution":"772x250","location":"assets","locale":"","width":722,"height":250}},"assets_blueprints":{},"all_blocks":{"twentytwenty-compare\/twentytwenty":{"$schema":"https:\/\/schemas.wp.org\/trunk\/block.json","apiVersion":3,"name":"twentytwenty-compare\/twentytwenty","version":"2.0.1","title":"TwentyTwenty Compare","category":"media","icon":"images-alt2","description":"Compare two images with an interactive before\/after slider","keywords":["image","compare","before","after","slider"],"textdomain":"twentytwenty-compare","attributes":{"beforeId":{"type":"number","default":0},"afterId":{"type":"number","default":0},"before":{"type":"string","default":""},"after":{"type":"string","default":""},"beforeLabel":{"type":"string","default":"Before"},"afterLabel":{"type":"string","default":"After"},"orientation":{"type":"string","default":"horizontal","enum":["horizontal","vertical"]},"offset":{"type":"number","default":0.5,"minimum":0,"maximum":1},"noOverlay":{"type":"boolean","default":false},"moveOnHover":{"type":"boolean","default":false},"handleOnly":{"type":"boolean","default":true},"clickToMove":{"type":"boolean","default":false},"width":{"type":"string","default":""},"height":{"type":"string","default":""},"responsive":{"type":"boolean","default":true},"beforeAlt":{"type":"string","default":""},"afterAlt":{"type":"string","default":""},"containerClass":{"type":"string","default":""}},"supports":{"align":["wide","full"],"html":false},"editorScript":"file:.\/build\/index.js","editorStyle":"file:.\/build\/index.css","style":"file:.\/build\/style-index.css","render":"file:.\/render.php"}},"tagged_versions":["1.0","2.0.0","2.0.1"],"block_files":[],"assets_screenshots":{"screenshot-1.jpg":{"filename":"screenshot-1.jpg","revision":1642180,"resolution":"1","location":"assets","locale":"","width":635,"height":327},"screenshot-2.jpg":{"filename":"screenshot-2.jpg","revision":1642180,"resolution":"2","location":"assets","locale":"","width":971,"height":482}},"screenshots":[]},"plugin_section":[],"plugin_tags":[264230,264231,151844,264232],"plugin_category":[59],"plugin_contributors":[91018],"plugin_business_model":[],"class_list":["post-66789","plugin","type-plugin","status-closed","hentry","plugin_tags-before-after-image-compare","plugin_tags-comparison-image-slider","plugin_tags-gutenberg-block","plugin_tags-twentytwenty-compare","plugin_category-utilities-and-tools","plugin_contributors-obaid2013","plugin_committers-obaid2013"],"banners":[],"icons":{"svg":false,"icon":"https:\/\/s.w.org\/plugins\/geopattern-icon\/js-twentytwenty_2b94dc.svg","icon_2x":false,"generated":true},"screenshots":[{"src":"https:\/\/ps.w.org\/js-twentytwenty\/assets\/screenshot-1.jpg?rev=1642180","caption":""},{"src":"https:\/\/ps.w.org\/js-twentytwenty\/assets\/screenshot-2.jpg?rev=1642180","caption":""}],"raw_content":"<!--section=description-->\n<p>TwentyTwenty Compare brings the popular jQuery TwentyTwenty plugin to WordPress with full Gutenberg block support. Compare two images with an interactive before\/after slider.<\/p>\n\n<h4>Features<\/h4>\n\n<ul>\n<li><strong>Gutenberg Block<\/strong> - Native WordPress block editor integration with intuitive controls<\/li>\n<li><strong>Shortcode Support<\/strong> - Use shortcodes in posts, pages, or widgets<\/li>\n<li><strong>Multiple Options<\/strong> - Customize orientation, labels, behavior, and dimensions<\/li>\n<li><strong>Responsive Design<\/strong> - Works perfectly on all devices<\/li>\n<li><strong>Touch Support<\/strong> - Works with touch gestures on mobile devices<\/li>\n<li><strong>Easy to Use<\/strong> - Simple interface for selecting and managing images<\/li>\n<\/ul>\n\n<h4>Block Features<\/h4>\n\n<p>The Gutenberg block includes:\n* Image uploader for before\/after images\n* Visual preview in the editor\n* Customizable labels (Before\/After text)\n* Orientation selection (Horizontal\/Vertical)\n* Slider offset control\n* Behavior toggles (hover, handle-only, click-to-move)\n* Dimension controls (width\/height)\n* Responsive mode<\/p>\n\n<h3>Usage<\/h3>\n\n<h4>Using Gutenberg Block<\/h4>\n\n<ol>\n<li>Edit any post or page<\/li>\n<li>Click the \"+\" (Add Block) button<\/li>\n<li>Search for \"TwentyTwenty Compare\"<\/li>\n<li>Click the block to add it<\/li>\n<li>Upload your before and after images<\/li>\n<li>Customize settings in the sidebar<\/li>\n<\/ol>\n\n<h4>Using Shortcodes<\/h4>\n\n<p><strong>Basic Usage:<\/strong>\n    <code>[twentytwenty_compare before=\"https:\/\/yoursite.com\/image-before.jpg\" after=\"https:\/\/yoursite.com\/image-after.jpg\"]<\/code><\/p>\n\n<p><strong>With Custom Labels:<\/strong>\n    <code>[twentytwenty_compare before=\"before.jpg\" after=\"after.jpg\" before_label=\"Original\" after_label=\"Edited\"]<\/code><\/p>\n\n<p><strong>Vertical Orientation:<\/strong>\n    <code>[twentytwenty_compare before=\"before.jpg\" after=\"after.jpg\" orientation=\"vertical\"]<\/code><\/p>\n\n<p><strong>Custom Dimensions:<\/strong>\n    <code>[twentytwenty_compare before=\"before.jpg\" after=\"after.jpg\" width=\"800px\" height=\"500px\"]<\/code><\/p>\n\n<h4>Shortcode Attributes<\/h4>\n\n\n\n\n  Attribute\n  Default\n  Description\n\n\n\n\n  <code>before<\/code>\n  <em>required<\/em>\n  URL of the before image\n\n\n  <code>after<\/code>\n  <em>required<\/em>\n  URL of the after image\n\n\n  <code>before_label<\/code>\n  \"Before\"\n  Label text for before image\n\n\n  <code>after_label<\/code>\n  \"After\"\n  Label text for after image\n\n\n  <code>orientation<\/code>\n  \"horizontal\"\n  \"horizontal\" or \"vertical\"\n\n\n  <code>offset<\/code>\n  \"0.5\"\n  Initial slider position (0-1)\n\n\n  <code>width<\/code>\n  \"\"\n  Container width (e.g., \"100%\", \"800px\")\n\n\n  <code>height<\/code>\n  \"\"\n  Container height (e.g., \"500px\")\n\n\n  <code>no_overlay<\/code>\n  \"false\"\n  Hide label overlays\n\n\n  <code>move_on_hover<\/code>\n  \"false\"\n  Move slider on hover\n\n\n  <code>handle_only<\/code>\n  \"true\"\n  Only move via handle\n\n\n  <code>click_to_move<\/code>\n  \"false\"\n  Click anywhere to move slider\n\n\n  <code>responsive<\/code>\n  \"true\"\n  Make container responsive\n\n\n\n\n<h4>Using in PHP<\/h4>\n\n<pre><code>`php\n<\/code><\/pre>\n\n<p>\n    `<h3>Reviews<\/h3>\nIf you find this plugin useful, please leave a review at https:\/\/wordpress.org\/support\/plugin\/js-twentytwenty\/reviews\/<\/p>\n\n<h3>Support<\/h3>\n\n<ul>\n<li>GitHub: https:\/\/github.com\/obaidhossain\/js-twentytwenty<\/li>\n<\/ul>\n\n<!--section=installation-->\n<h4>Manual Installation<\/h4>\n\n<ol>\n<li>Download the plugin zip file<\/li>\n<li>Go to Plugins &gt; Add New &gt; Upload Plugin<\/li>\n<li>Select the zip file and click \"Install Now\"<\/li>\n<li>Activate the plugin<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id=\"what%20image%20formats%20are%20supported%3F\"><h3>What image formats are supported?<\/h3><\/dt>\n<dd><p>All standard WordPress image formats are supported: JPG, PNG, GIF, WebP, and SVG.<\/p><\/dd>\n<dt id=\"can%20i%20use%20this%20with%20page%20builders%3F\"><h3>Can I use this with page builders?<\/h3><\/dt>\n<dd><p>Yes! The shortcode works with any page builder that supports shortcodes, including Elementor, Divi, Beaver Builder, and Visual Composer.<\/p><\/dd>\n<dt id=\"does%20this%20work%20with%20wordpress%206.5%2B%3F\"><h3>Does this work with WordPress 6.5+?<\/h3><\/dt>\n<dd><p>Yes, the plugin is fully compatible with WordPress 6.5 and the latest Gutenberg block editor.<\/p><\/dd>\n<dt id=\"is%20this%20mobile-friendly%3F\"><h3>Is this mobile-friendly?<\/h3><\/dt>\n<dd><p>Absolutely! The slider works with touch gestures on mobile devices and is fully responsive.<\/p><\/dd>\n<dt id=\"can%20i%20have%20multiple%20sliders%20on%20one%20page%3F\"><h3>Can I have multiple sliders on one page?<\/h3><\/dt>\n<dd><p>Yes, you can add as many sliders as you need on any page or post.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>2.0.1<\/h4>\n\n<ul>\n<li>Improved security concerns provided by \"Plugin Check\"<\/li>\n<\/ul>\n\n<h4>2.0.0<\/h4>\n\n<ul>\n<li>Added Gutenberg block support<\/li>\n<li>New text domain: <code>twentytwenty-compare<\/code><\/li>\n<li>Improved UI with image previews in settings<\/li>\n<li>Added Replace\/Remove buttons for images<\/li>\n<li>Updated jQuery TwentyTwenty library<\/li>\n<li>New shortcode: <code>twentytwenty_compare<\/code><\/li>\n<li>Multiple language support added<\/li>\n<li>Code refactoring and cleanup<\/li>\n<\/ul>\n\n<h4>1.0<\/h4>\n\n<ul>\n<li>Initial release<\/li>\n<\/ul>","raw_excerpt":"Need to highlight the differences between two images? TwentyTwenty, a visual diff tool, makes it easy to spot them!","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/ug.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/66789","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ug.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/ug.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/ug.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=66789"}],"author":[{"embeddable":true,"href":"https:\/\/ug.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/obaid2013"}],"wp:attachment":[{"href":"https:\/\/ug.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=66789"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/ug.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=66789"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/ug.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=66789"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/ug.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=66789"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/ug.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=66789"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/ug.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=66789"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}