{"id":162049,"date":"2022-09-08T04:20:21","date_gmt":"2022-09-08T04:20:21","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/majestic-before-after-image\/"},"modified":"2026-06-11T05:06:50","modified_gmt":"2026-06-11T05:06:50","slug":"majestic-before-after-image","status":"publish","type":"plugin","link":"https:\/\/kab.wordpress.org\/plugins\/majestic-before-after-image\/","author":14197525,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"3.0.2","stable_tag":"3.0.2","tested":"7.0","requires":"6.2","requires_php":"5.6","requires_plugins":null,"header_name":"Before After Image","header_author":"Scott Paterson","header_description":"Majestic Before After Image is an Elementor addon to show the comparison of two images with a draggable handle.","assets_banners_color":"86867a","last_updated":"2026-06-11 05:06:50","external_support_url":"","external_repository_url":"","donate_link":"https:\/\/wpplugin.org\/donate\/","header_plugin_uri":"https:\/\/wpplugin.org\/before-after-image-slider\/","header_author_uri":"https:\/\/wpplugin.org","rating":5,"author_block_rating":0,"active_installs":800,"downloads":11318,"num_ratings":3,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.0.0":{"tag":"1.0.0","author":"wpconcern","date":"2022-09-08 04:20:21"},"1.0.1":{"tag":"1.0.1","author":"wpconcern","date":"2022-09-08 08:05:22"},"1.0.10":{"tag":"1.0.10","author":"maneshtimilsina","date":"2023-08-02 10:39:03"},"1.0.11":{"tag":"1.0.11","author":"rabmalin","date":"2024-06-17 12:26:58"},"1.0.12":{"tag":"1.0.12","author":"rabmalin","date":"2024-06-28 10:42:08"},"1.0.2":{"tag":"1.0.2","author":"wpconcern","date":"2022-09-29 11:09:30"},"1.0.3":{"tag":"1.0.3","author":"wpconcern","date":"2022-11-13 06:05:56"},"1.0.4":{"tag":"1.0.4","author":"wpconcern","date":"2023-02-19 10:43:34"},"1.0.5":{"tag":"1.0.5","author":"wpconcern","date":"2023-05-25 04:42:29"},"1.0.6":{"tag":"1.0.6","author":"maneshtimilsina","date":"2023-08-02 09:57:37"},"1.0.8":{"tag":"1.0.8","author":"rabmalin","date":"2023-08-02 10:28:02"},"1.0.9":{"tag":"1.0.9","author":"maneshtimilsina","date":"2023-08-02 10:33:30"},"2.0.0":{"tag":"2.0.0","author":"rabmalin","date":"2024-07-31 11:31:41"},"2.0.1":{"tag":"2.0.1","author":"maneshtimilsina","date":"2024-11-27 12:18:12"},"2.0.2":{"tag":"2.0.2","author":"maneshtimilsina","date":"2025-09-08 12:45:01"},"2.0.3":{"tag":"2.0.3","author":"maneshtimilsina","date":"2025-09-09 05:36:35"},"2.0.4":{"tag":"2.0.4","author":"scottpaterson","date":"2026-06-08 05:33:36"},"3.0.0":{"tag":"3.0.0","author":"scottpaterson","date":"2026-06-08 20:52:40"},"3.0.1":{"tag":"3.0.1","author":"scottpaterson","date":"2026-06-08 21:29:26"},"3.0.2":{"tag":"3.0.2","author":"scottpaterson","date":"2026-06-11 05:06:50"}},"upgrade_notice":[],"ratings":{"1":0,"2":0,"3":0,"4":0,"5":3},"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":2781786,"resolution":"128x128","location":"assets","locale":"","width":128,"height":128},"icon-256x256.png":{"filename":"icon-256x256.png","revision":2781786,"resolution":"256x256","location":"assets","locale":"","width":256,"height":256}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":3565217,"resolution":"1544x500","location":"assets","locale":"","width":1544,"height":500},"banner-772x250.png":{"filename":"banner-772x250.png","revision":3565217,"resolution":"772x250","location":"assets","locale":"","width":772,"height":250}},"assets_blueprints":{"blueprint.json":{"filename":"blueprint.json","revision":3568295,"resolution":false,"location":"assets","locale":"","contents":"{\"landingPage\":\"\\\/wp-admin\\\/admin.php?page=majestic-before-after-image\",\"features\":{\"networking\":true},\"steps\":[{\"step\":\"login\",\"username\":\"admin\",\"password\":\"password\"},{\"step\":\"installPlugin\",\"options\":{\"activate\":true},\"pluginData\":{\"resource\":\"wordpress.org\\\/plugins\",\"slug\":\"majestic-before-after-image\"}},{\"step\":\"writeFile\",\"path\":\"\\\/wordpress\\\/wp-content\\\/mu-plugins\\\/playground-notice.php\",\"data\":\"<?php add_action( 'admin_notices', function() { echo '<div class=\\\\\\\"notice notice-info is-dismissible\\\\\\\"><p>This is a live preview of <strong>Before After Image<\\\/strong>, powered by <a href=\\\\\\\"https:\\\/\\\/wordpress.org\\\/playground\\\/\\\\\\\" target=\\\\\\\"_blank\\\\\\\">WordPress Playground<\\\/a>.<\\\/p><\\\/div>'; } );\"}]}"}},"all_blocks":[],"tagged_versions":["1.0.0","1.0.1","1.0.10","1.0.11","1.0.12","1.0.2","1.0.3","1.0.4","1.0.5","1.0.6","1.0.8","1.0.9","2.0.0","2.0.1","2.0.2","2.0.3","2.0.4","3.0.0","3.0.1","3.0.2"],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":3565356,"resolution":"1","location":"assets","locale":"","width":1475,"height":820},"screenshot-2.png":{"filename":"screenshot-2.png","revision":3565356,"resolution":"2","location":"assets","locale":"","width":833,"height":440},"screenshot-3.png":{"filename":"screenshot-3.png","revision":3565356,"resolution":"3","location":"assets","locale":"","width":1208,"height":816}},"screenshots":{"1":"Shortcode builder","2":"WooCommerce page with slider as product image","3":"Elementor Widget"}},"plugin_section":[],"plugin_tags":[194101,6808,76538,80,286],"plugin_category":[50],"plugin_contributors":[79452,79453],"plugin_business_model":[],"class_list":["post-162049","plugin","type-plugin","status-publish","hentry","plugin_tags-before-after-image","plugin_tags-comparison","plugin_tags-elementor","plugin_tags-shortcode","plugin_tags-woocommerce","plugin_category-media","plugin_contributors-scottpaterson","plugin_contributors-wp-plugin","plugin_committers-scottpaterson","plugin_committers-wp-plugin","plugin_support_reps-collinsasse","plugin_support_reps-scottpaterson","plugin_support_reps-wp-plugin"],"banners":{"banner":"https:\/\/ps.w.org\/majestic-before-after-image\/assets\/banner-772x250.png?rev=3565217","banner_2x":"https:\/\/ps.w.org\/majestic-before-after-image\/assets\/banner-1544x500.png?rev=3565217","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/majestic-before-after-image\/assets\/icon-128x128.png?rev=2781786","icon_2x":"https:\/\/ps.w.org\/majestic-before-after-image\/assets\/icon-256x256.png?rev=2781786","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/majestic-before-after-image\/assets\/screenshot-1.png?rev=3565356","caption":"Shortcode builder"},{"src":"https:\/\/ps.w.org\/majestic-before-after-image\/assets\/screenshot-2.png?rev=3565356","caption":"WooCommerce page with slider as product image"},{"src":"https:\/\/ps.w.org\/majestic-before-after-image\/assets\/screenshot-3.png?rev=3565356","caption":"Elementor Widget"}],"raw_content":"<!--section=description-->\n<p>Before After Image lets visitors drag a handle to compare two images side-by-side.<\/p>\n\n<p>Works in three ways \u2014 use whichever fits your site:<\/p>\n\n<ul>\n<li><strong>Shortcode<\/strong> \u2014 You can you shortcodes on any post or page. Use the built-in shortcode builder to generate shortcodes easily.<\/li>\n<li><strong>Elementor widget<\/strong> \u2014 drag and drop the widget onto any page with full style controls.<\/li>\n<li><strong>WooCommerce<\/strong> \u2014 attach a before\/after comparison to any product directly from the product editor.<\/li>\n<\/ul>\n\n<p><a href=\"https:\/\/demos.wpplugin.org\/before-after-image\/\">View Demo<\/a><\/p>\n\n<p>Full usage instructions, shortcode options, and WooCommerce setup steps are available inside the plugin under the <strong>Before After Image<\/strong> menu.<\/p>\n\n<h3>Key Features<\/h3>\n\n<ul>\n<li>Works standalone via shortcode \u2014 Elementor and WooCommerce are both optional<\/li>\n<li>WooCommerce product integration with per-product settings<\/li>\n<li>Elementor widget with full style controls<\/li>\n<li>Horizontal and vertical orientation<\/li>\n<li>Handle movement by drag or mouse hover<\/li>\n<li>Customisable before\/after labels (on hover, always, or never)<\/li>\n<li>Enable\/disable overlay<\/li>\n<li>Default handle offset position<\/li>\n<li>Six handle styles<\/li>\n<li>Handle types: Arrows or Text<\/li>\n<li>Slider colour \u2014 white or black (line, handle, and arrows)<\/li>\n<li>Image size option<\/li>\n<li>Typography and colour options (Elementor)<\/li>\n<li>Touch and pointer-event support<\/li>\n<\/ul>\n\n<h3>Before After Image Pro<\/h3>\n\n<p>Want more features? Check out <strong>Before After Image Pro<\/strong>:<\/p>\n\n<ul>\n<li><strong>Auto-Slide Animation<\/strong> \u2014 Grab attention with an automatically sweeping handle. Configure speed and pause-on-hover behavior.<\/li>\n<li><strong>3-Image Comparison<\/strong> \u2014 Show before, during, and after with two draggable handles.<\/li>\n<li><strong>Full-Screen View<\/strong> \u2014 Let visitors zoom in with a button to expand the slider to full screen.<\/li>\n<li><strong>Custom Colors<\/strong> \u2014 Fine-tune the line, circle, and arrows independently to match your brand.<\/li>\n<li><strong>Rounded Corners<\/strong> \u2014 Add subtle to fully rounded corners for a polished look.<\/li>\n<li><strong>Shortcode Manager<\/strong> \u2014 Save and reuse slider configurations with <code>[mbai_preset id=\"...\"]<\/code> shortcodes.<\/li>\n<li><strong>Premium Support<\/strong> \u2014 Get priority support and automatic updates.<\/li>\n<\/ul>\n\n<p><a href=\"https:\/\/wpplugin.org\/downloads\/before-after-image-pro\/\">Get Before After Image Pro<\/a><\/p>\n\n<!--section=installation-->\n<h4>Using The WordPress Dashboard<\/h4>\n\n<ol>\n<li>Navigate to the Add New Plugin page.<\/li>\n<li>Select <code>majestic-before-after-image.zip<\/code> from your computer.<\/li>\n<li>Install and activate.<\/li>\n<\/ol>\n\n<h4>Using FTP<\/h4>\n\n<ol>\n<li>Extract <code>majestic-before-after-image.zip<\/code>.<\/li>\n<li>Upload the <code>majestic-before-after-image<\/code> folder to <code>\/wp-content\/plugins\/<\/code>.<\/li>\n<li>Activate via the WordPress Plugins dashboard.<\/li>\n<\/ol>\n\n<p>After activation, open the <strong>Before After Image<\/strong> menu for usage instructions.<\/p>\n\n<!--section=faq-->\n<dl>\n<dt id=\"does%20the%20plugin%20require%20elementor%3F\"><h3>Does the plugin require Elementor?<\/h3><\/dt>\n<dd><p>No. The plugin works on its own via the <code>[mbai_before_after_image]<\/code> shortcode. Elementor is optional \u2014 the drag-and-drop widget is available when Elementor is active.<\/p><\/dd>\n<dt id=\"does%20the%20plugin%20require%20woocommerce%3F\"><h3>Does the plugin require WooCommerce?<\/h3><\/dt>\n<dd><p>No. WooCommerce is optional. When active, a meta box appears on each product so you can enable the comparison widget per product.<\/p><\/dd>\n<dt id=\"does%20this%20plugin%20work%20with%20all%20themes%3F\"><h3>Does this plugin work with all themes?<\/h3><\/dt>\n<dd><p>Yes.<\/p><\/dd>\n<dt id=\"where%20do%20i%20find%20the%20shortcode%20options%3F\"><h3>Where do I find the shortcode options?<\/h3><\/dt>\n<dd><p>Open the <strong>Before After Image<\/strong> menu and click the Shortcode tab for a full list of options with descriptions.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>3.0.2 - 10 June 2026<\/h4>\n\n<ul>\n<li>Improved: Welcome banner styling \u2014 now white with subtle border for better integration<\/li>\n<li>Improved: Pro features sidebar \u2014 increased font size and added subtle shadow for better visibility<\/li>\n<li>Improved: Pro features list order \u2014 moved 3-image comparison to second position for emphasis<\/li>\n<\/ul>\n\n<h4>3.0.1 - 8 June 2026<\/h4>\n\n<ul>\n<li>Removed: Admin notice shown when Elementor is not active - this was not hiding correctly<\/li>\n<\/ul>\n\n<h4>3.0.0 - 8 June 2026<\/h4>\n\n<ul>\n<li>New: Standalone shortcode <code>[mbai_before_after_image]<\/code> \u2014 no Elementor or WooCommerce required<\/li>\n<li>New: WooCommerce product integration with per-product meta box<\/li>\n<li>New: In-plugin help pages (Before After Image menu) with shortcode reference, Elementor guide, and WooCommerce setup steps<\/li>\n<li>New: Custom vanilla JavaScript engine replaces jQuery-dependent event.move.js and twentytwenty.js<\/li>\n<li>New: Single self-contained CSS file replaces the third-party twentytwenty.css<\/li>\n<li>Removed: <code>third-party\/<\/code> folder (event-move, twentytwenty) \u2014 no longer needed<\/li>\n<li>Updated: All CSS class names migrated from <code>.twentytwenty-*<\/code> to <code>.mbai-*<\/code> (legacy aliases kept for backwards compatibility)<\/li>\n<li>Updated: Elementor widget updated to use new class names and vanilla JS engine<\/li>\n<li>Updated: Plugin header \u2014 <code>Requires Plugins: elementor<\/code> removed (Elementor now optional)<\/li>\n<li>Updated: Requires PHP lowered to 5.6<\/li>\n<li>Fixed: Widget hidden when Elementor \"Align Self\" is set to anything other than Stretch<\/li>\n<li>Improved: Touch support rewritten using native pointer events<\/li>\n<li>Improved: ResizeObserver replaces window resize event for more efficient layout updates<\/li>\n<\/ul>\n\n<h4>2.0.4 - 21 April 2026<\/h4>\n\n<ul>\n<li>WP Compatibility 6.9<\/li>\n<li>Code improvements<\/li>\n<\/ul>\n\n<h4>2.0.3 - 09 Sep 2025<\/h4>\n\n<ul>\n<li>Minor JS fixes<\/li>\n<\/ul>\n\n<h4>2.0.2 - 08 Sep 2025<\/h4>\n\n<ul>\n<li>WP Compatibility 6.8<\/li>\n<li>Admin page update<\/li>\n<\/ul>\n\n<h4>2.0.1 - 27 Nov 2024<\/h4>\n\n<ul>\n<li>WP Compatibility 6.7<\/li>\n<li>Update packages<\/li>\n<\/ul>\n\n<h4>2.0.0 - 31 Jul 2024<\/h4>\n\n<ul>\n<li>WP Compatibility 6.6<\/li>\n<li>Upgrade dependencies<\/li>\n<\/ul>\n\n<h4>1.0.12 - 28 June 2024<\/h4>\n\n<ul>\n<li>Fix PCP issues<\/li>\n<\/ul>\n\n<h4>1.0.11 - 17 June 2024<\/h4>\n\n<ul>\n<li>Update admin page and URL<\/li>\n<\/ul>\n\n<h4>1.0.10 - 02 August 2023<\/h4>\n\n<ul>\n<li>Update author info and links<\/li>\n<\/ul>\n\n<h4>1.0.5 - 25 May 2023<\/h4>\n\n<ul>\n<li>Update Admin Notice package<\/li>\n<\/ul>\n\n<h4>1.0.4 - 19 Feb 2023<\/h4>\n\n<ul>\n<li>Fix PHP 8 issue<\/li>\n<\/ul>\n\n<h4>1.0.3 - 13 Sep 2022<\/h4>\n\n<ul>\n<li>Fix PHP issue<\/li>\n<\/ul>\n\n<h4>1.0.2 - 30 Sep 2022<\/h4>\n\n<ul>\n<li>Update dashboard<\/li>\n<li>Minor bug fixes<\/li>\n<\/ul>\n\n<h4>1.0.1 - 8 Sep 2022<\/h4>\n\n<ul>\n<li>Update screenshots<\/li>\n<li>Minor bug fixes<\/li>\n<\/ul>\n\n<h4>1.0.0 - 1 Sep 2022<\/h4>\n\n<ul>\n<li>Initial release<\/li>\n<\/ul>","raw_excerpt":"Before After Image with a draggable handle. Works with Elementor, WooCommerce, and shortcode.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/kab.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/162049","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kab.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/kab.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/kab.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=162049"}],"author":[{"embeddable":true,"href":"https:\/\/kab.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/scottpaterson"}],"wp:attachment":[{"href":"https:\/\/kab.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=162049"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/kab.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=162049"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/kab.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=162049"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/kab.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=162049"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/kab.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=162049"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/kab.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=162049"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}