{"id":292605,"date":"2026-03-30T10:20:33","date_gmt":"2026-03-30T10:20:33","guid":{"rendered":"https:\/\/de.wordpress.org\/plugins\/2fox4-before-after\/"},"modified":"2026-03-30T10:20:19","modified_gmt":"2026-03-30T10:20:19","slug":"2fox4-before-after","status":"publish","type":"plugin","link":"https:\/\/pcd.wordpress.org\/plugins\/2fox4-before-after\/","author":23455956,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","version":"1.1.3","stable_tag":"1.1.3","tested":"6.9.4","requires":"6.4","requires_php":"8.0","requires_plugins":null,"header_name":"2FOX4 Before After","header_author":"Oliver Deppe","header_description":"Von Oliver Deppe von <a href=\"https:\/\/www.2fox4.de\/wordpress-plugins\/\">2FOX4<\/a>.","assets_banners_color":"","last_updated":"2026-03-30 10:20:19","external_support_url":"","external_repository_url":"","donate_link":"https:\/\/www.paypal.com\/paypalme\/oliverdeppe\/5","header_plugin_uri":"https:\/\/www.2fox4.de\/vorher-nachher-wp-plugin\/","header_author_uri":"https:\/\/www.2fox4.de\/wordpress-plugins\/","rating":0,"author_block_rating":0,"active_installs":0,"downloads":45,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.1.3":{"tag":"1.1.3","author":"2fox4oliver","date":"2026-03-30 10:20:19"}},"upgrade_notice":{"1.1.3":"<p>WordPress.org review compliance: fixed Plugin URI, proper output escaping, prefixed shortcode name.<\/p>","1.1.2":"<p>Plugin renamed to &quot;2FOX4 Before After&quot; for WordPress.org directory compliance.<\/p>","1.1.1":"<p>WordPress.org compliance fixes: proper output escaping, removed deprecated function, updated compatibility.<\/p>","1.1.0":"<p>New Reveal mode added \u2014 both images stay fixed while the slider reveals one over the other.<\/p>","1.0.0":"<p>Initial release.<\/p>"},"ratings":[],"assets_icons":[],"assets_banners":[],"assets_blueprints":{},"all_blocks":{"bfas\/before-after":{"name":"bfas\/before-after","title":"2FOX4 Before After"}},"tagged_versions":["1.1.3"],"block_files":[],"assets_screenshots":[],"screenshots":{"1":"Before\/After Slider in action \u2014 horizontal mode with labels","2":"Gutenberg Block in the editor with image selection","3":"Elementor Widget with full control panel","4":"Vertical slider mode"},"jetpack_post_was_ever_published":false},"plugin_section":[],"plugin_tags":[11619,4352,176050,2141,611],"plugin_category":[],"plugin_contributors":[257847],"plugin_business_model":[],"class_list":["post-292605","plugin","type-plugin","status-publish","hentry","plugin_tags-before-after","plugin_tags-compare","plugin_tags-image-comparison","plugin_tags-image-slider","plugin_tags-slider","plugin_contributors-2fox4oliver","plugin_committers-2fox4oliver"],"banners":[],"icons":{"svg":false,"icon":"https:\/\/s.w.org\/plugins\/geopattern-icon\/2fox4-before-after.svg","icon_2x":false,"generated":true},"screenshots":[],"raw_content":"<!--section=description-->\n<p>Von Oliver Deppe von <a href=\"https:\/\/www.2fox4.de\/wordpress-plugins\/\">2FOX4<\/a>.<\/p>\n\n<p><strong>2FOX4 Before After<\/strong> lets you create beautiful, interactive image comparisons with a draggable slider. Perfect for showcasing transformations, renovations, photo edits, and any kind of visual before\/after comparison.<\/p>\n\n<h4>Features<\/h4>\n\n<ul>\n<li><strong>Three ways to use:<\/strong> Gutenberg Block, Shortcode, and Elementor Widget<\/li>\n<li><strong>Two comparison modes:<\/strong> \"Slider\" (images move with the divider) or \"Reveal\" (both images stay fixed, divider reveals one over the other)<\/li>\n<li><strong>Horizontal &amp; Vertical mode:<\/strong> Choose the slider orientation that fits your layout<\/li>\n<li><strong>Adjustable start position:<\/strong> Set where the divider appears on load (0\u2013100%)<\/li>\n<li><strong>Custom labels:<\/strong> Add \"Before\" and \"After\" text overlays (or any custom text)<\/li>\n<li><strong>Divider color:<\/strong> Pick any color for the divider line and handle<\/li>\n<li><strong>Hover mode:<\/strong> Slider follows the mouse cursor instead of requiring a drag<\/li>\n<li><strong>Touch support:<\/strong> Works perfectly on mobile devices with touch gestures<\/li>\n<li><strong>Loading animation:<\/strong> Smooth entrance animation when the slider appears<\/li>\n<li><strong>Custom CSS class:<\/strong> Add your own class for additional styling<\/li>\n<li><strong>Keyboard accessible:<\/strong> Navigate the slider with arrow keys<\/li>\n<li><strong>Lightweight:<\/strong> No jQuery dependency on the frontend, pure vanilla JavaScript<\/li>\n<\/ul>\n\n<h4>Shortcode Usage<\/h4>\n\n<pre><code>[bfas_before_after_slider before=\"URL\" after=\"URL\"]\n<\/code><\/pre>\n\n<p>Full example with all options:<\/p>\n\n<pre><code>[bfas_before_after_slider before=\"https:\/\/example.com\/before.jpg\" after=\"https:\/\/example.com\/after.jpg\" start=\"30\" mode=\"reveal\" orientation=\"horizontal\" label_before=\"Before\" label_after=\"After\" divider_color=\"#ffffff\" hover=\"0\" animate=\"1\" css_class=\"my-class\"]\n<\/code><\/pre>\n\n<h4>Shortcode Parameters<\/h4>\n\n<ul>\n<li><strong>before<\/strong> (required) \u2014 URL of the before image<\/li>\n<li><strong>after<\/strong> (required) \u2014 URL of the after image<\/li>\n<li><strong>start<\/strong> \u2014 Start position in percent (default: 50)<\/li>\n<li><strong>mode<\/strong> \u2014 \"slider\" or \"reveal\" (default: slider). In reveal mode, both images stay fixed and the divider reveals one over the other.<\/li>\n<li><strong>orientation<\/strong> \u2014 \"horizontal\" or \"vertical\" (default: horizontal)<\/li>\n<li><strong>label_before<\/strong> \u2014 Text label for the before side<\/li>\n<li><strong>label_after<\/strong> \u2014 Text label for the after side<\/li>\n<li><strong>divider_color<\/strong> \u2014 Hex color for the divider (default: #ffffff)<\/li>\n<li><strong>hover<\/strong> \u2014 Set to \"1\" to enable hover mode (default: 0)<\/li>\n<li><strong>animate<\/strong> \u2014 Set to \"1\" for entrance animation (default: 0)<\/li>\n<li><strong>css_class<\/strong> \u2014 Custom CSS class for the container<\/li>\n<\/ul>\n\n<h3>External services<\/h3>\n\n<p>This plugin includes a voluntary donation link that points to PayPal (paypal.com). The link is displayed inside an admin notice (\"Buy me a coffee\") and does not transmit any data automatically. No connection to PayPal is made unless the site administrator clicks the link themselves.<\/p>\n\n<ul>\n<li>Service provider: PayPal (Europe) S.\u00e0 r.l. et Cie, S.C.A.<\/li>\n<li><a href=\"https:\/\/www.paypal.com\/de\/webapps\/mpp\/ua\/useragreement-full\">PayPal Terms of Service<\/a><\/li>\n<li><a href=\"https:\/\/www.paypal.com\/de\/webapps\/mpp\/ua\/privacy-full\">PayPal Privacy Policy<\/a><\/li>\n<\/ul>\n\n<!--section=installation-->\n<ol>\n<li>Upload the plugin folder to the <code>\/wp-content\/plugins\/<\/code> directory, or install the plugin through the WordPress plugins screen directly.<\/li>\n<li>Activate the plugin through the 'Plugins' screen in WordPress.<\/li>\n<li>Use the Gutenberg block \"2FOX4 Before After\", the Elementor widget, or the <code>[bfas_before_after_slider]<\/code> shortcode to add image comparisons to your pages.<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id=\"does%20this%20plugin%20work%20with%20elementor%3F\"><h3>Does this plugin work with Elementor?<\/h3><\/dt>\n<dd><p>Yes! The plugin includes a native Elementor widget. After activation, you will find the \"2FOX4 Before After\" widget in the Elementor panel under the General category.<\/p><\/dd>\n<dt id=\"does%20it%20work%20on%20mobile%20devices%3F\"><h3>Does it work on mobile devices?<\/h3><\/dt>\n<dd><p>Yes, the slider has full touch support and works smoothly on all mobile devices and tablets.<\/p><\/dd>\n<dt id=\"can%20i%20use%20multiple%20sliders%20on%20one%20page%3F\"><h3>Can I use multiple sliders on one page?<\/h3><\/dt>\n<dd><p>Yes, you can add as many sliders as you need. Each one works independently.<\/p><\/dd>\n<dt id=\"what%20image%20sizes%20should%20i%20use%3F\"><h3>What image sizes should I use?<\/h3><\/dt>\n<dd><p>Both images should have the same dimensions for the best visual result. The slider will work with different sizes, but the comparison is most effective with matching images.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>1.1.3<\/h4>\n\n<ul>\n<li>Fix: Corrected Plugin URI to point to a valid, publicly accessible URL.<\/li>\n<li>Fix: Replaced all phpcs:ignore escape comments with proper wp_kses() escaping for full WordPress.org compliance.<\/li>\n<li>Fix: Renamed shortcode from <code>before_after_slider<\/code> to <code>bfas_before_after_slider<\/code> to use a unique, prefixed name.<\/li>\n<\/ul>\n\n<h4>1.1.2<\/h4>\n\n<ul>\n<li>Change: Renamed plugin from \"Before After Slider\" to \"2FOX4 Before After\" for WordPress.org uniqueness.<\/li>\n<li>Change: Updated slug and text domain to 2fox4-before-after.<\/li>\n<\/ul>\n\n<h4>1.1.1<\/h4>\n\n<ul>\n<li>Fix: Properly escape translated output in donation notice (EscapeOutput compliance).<\/li>\n<li>Fix: Removed deprecated load_plugin_textdomain() call (unnecessary since WordPress 4.6).<\/li>\n<li>Fix: Updated \"Tested up to\" to WordPress 6.9.<\/li>\n<li>Fix: Prefixed data-nonce attribute to data-bfas-nonce for full prefix compliance.<\/li>\n<\/ul>\n\n<h4>1.1.0<\/h4>\n\n<ul>\n<li>New: Added \"Reveal\" mode \u2014 both images stay fixed while the slider reveals one over the other.<\/li>\n<li>New: Mode selector available in Gutenberg Block, Elementor Widget, and Shortcode (mode=\"reveal\").<\/li>\n<\/ul>\n\n<h4>1.0.0<\/h4>\n\n<ul>\n<li>Initial release.<\/li>\n<\/ul>","raw_excerpt":"Compare two images with an interactive before\/after slider. Supports Gutenberg, Shortcode and Elementor.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/292605","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=292605"}],"author":[{"embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/2fox4oliver"}],"wp:attachment":[{"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=292605"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=292605"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=292605"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=292605"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=292605"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=292605"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}