{"id":341914,"date":"2026-07-22T07:09:18","date_gmt":"2026-07-22T07:09:18","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/baqflo-beforeafter\/"},"modified":"2026-07-22T07:09:01","modified_gmt":"2026-07-22T07:09:01","slug":"baqflo-beforeafter","status":"publish","type":"plugin","link":"https:\/\/test.wordpress.org\/plugins\/baqflo-beforeafter\/","author":23521110,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"1.01","stable_tag":"1.01","tested":"7.0.2","requires":"6.0","requires_php":"7.4","requires_plugins":null,"header_name":"BaqFlo BeforeAfter","header_author":"BaqFlo","header_description":"Responsive before and after image comparison sliders with side-by-side, hover, labels, and shortcode output.","assets_banners_color":"567376","last_updated":"2026-07-22 07:09:01","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"https:\/\/www.baqflo.com\/beforeafter\/","header_author_uri":"https:\/\/baqflo.com\/","rating":0,"author_block_rating":0,"active_installs":0,"downloads":23,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.01":{"tag":"1.01","author":"baqflo","date":"2026-07-22 07:09:01"}},"upgrade_notice":[],"ratings":[],"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":3618307,"resolution":"128x128","location":"assets","locale":"","width":128,"height":128},"icon-256x256.png":{"filename":"icon-256x256.png","revision":3618307,"resolution":"256x256","location":"assets","locale":"","width":256,"height":256}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":3618092,"resolution":"1544x500","location":"assets","locale":"","width":1544,"height":500},"banner-772x250.png":{"filename":"banner-772x250.png","revision":3618092,"resolution":"772x250","location":"assets","locale":"","width":772,"height":250}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.01"],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":3618092,"resolution":"1","location":"assets","locale":"","width":1000,"height":619},"screenshot-10.png":{"filename":"screenshot-10.png","revision":3618092,"resolution":"10","location":"assets","locale":"","width":1193,"height":1009},"screenshot-2.png":{"filename":"screenshot-2.png","revision":3618092,"resolution":"2","location":"assets","locale":"","width":1337,"height":828},"screenshot-3.png":{"filename":"screenshot-3.png","revision":3618092,"resolution":"3","location":"assets","locale":"","width":1337,"height":828},"screenshot-4.png":{"filename":"screenshot-4.png","revision":3618092,"resolution":"4","location":"assets","locale":"","width":1193,"height":1009},"screenshot-5.png":{"filename":"screenshot-5.png","revision":3618092,"resolution":"5","location":"assets","locale":"","width":1193,"height":1009},"screenshot-6.png":{"filename":"screenshot-6.png","revision":3618092,"resolution":"6","location":"assets","locale":"","width":1337,"height":828},"screenshot-7.png":{"filename":"screenshot-7.png","revision":3618092,"resolution":"7","location":"assets","locale":"","width":1337,"height":828},"screenshot-8.png":{"filename":"screenshot-8.png","revision":3618092,"resolution":"8","location":"assets","locale":"","width":1337,"height":828},"screenshot-9.png":{"filename":"screenshot-9.png","revision":3618092,"resolution":"9","location":"assets","locale":"","width":1337,"height":828}},"screenshots":{"1":"Interactive draggable slider (left) and Side-by-side comparing two images.","2":"Drag panning for larger images.  Left example are two extra-tall images that can be vertically panned, and the right example are a before and after image that are extra-wide, horizontally panning.  Panning can be set to no panning, tandem panning, individual panning, scale-aware panning.","3":"Large images have zoom toggle option.  As seen in the left example, toggle zoom shows the full image.","4":"BeforeAfter edit page.  Note, this screenshot shows PRO Features not available in the Free Core edition.","5":"BeforeAfter admin - home showing the list of BeforeAfters with handy live preview button and quick copy shortcodes","6":"PRO: Compare video sources using the familiar BeforeAfter interface.  Slider, side-by-side, overlay available.  Comparison sets also allow usage of videos.","7":"PRO: Compare live webpages using iframe sources.  Website comparisons can block interactions, allow full interactions, or scroll-only with the scroll-safe area.  Please note not all websites allow iframe rendering.","8":"PRO: Build two-to-four image Comparison Sets with automatic pair generation (Side-by-side).","9":"PRO: Build two-to-four image Comparison Sets with automatic pair generation (Grid view).","10":"PRO: Comparison Set edit interface."}},"plugin_section":[],"plugin_tags":[11619,152095,176050,2141,224162],"plugin_category":[],"plugin_contributors":[271364],"plugin_business_model":[],"class_list":["post-341914","plugin","type-plugin","status-publish","hentry","plugin_tags-before-after","plugin_tags-comparison-slider","plugin_tags-image-comparison","plugin_tags-image-slider","plugin_tags-photo-comparison","plugin_contributors-baqflo","plugin_committers-baqflo"],"banners":{"banner":"https:\/\/ps.w.org\/baqflo-beforeafter\/assets\/banner-772x250.png?rev=3618092","banner_2x":"https:\/\/ps.w.org\/baqflo-beforeafter\/assets\/banner-1544x500.png?rev=3618092","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/baqflo-beforeafter\/assets\/icon-128x128.png?rev=3618307","icon_2x":"https:\/\/ps.w.org\/baqflo-beforeafter\/assets\/icon-256x256.png?rev=3618307","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/baqflo-beforeafter\/assets\/screenshot-1.png?rev=3618092","caption":"Interactive draggable slider (left) and Side-by-side comparing two images."},{"src":"https:\/\/ps.w.org\/baqflo-beforeafter\/assets\/screenshot-2.png?rev=3618092","caption":"Drag panning for larger images.  Left example are two extra-tall images that can be vertically panned, and the right example are a before and after image that are extra-wide, horizontally panning.  Panning can be set to no panning, tandem panning, individual panning, scale-aware panning."},{"src":"https:\/\/ps.w.org\/baqflo-beforeafter\/assets\/screenshot-3.png?rev=3618092","caption":"Large images have zoom toggle option.  As seen in the left example, toggle zoom shows the full image."},{"src":"https:\/\/ps.w.org\/baqflo-beforeafter\/assets\/screenshot-4.png?rev=3618092","caption":"BeforeAfter edit page.  Note, this screenshot shows PRO Features not available in the Free Core edition."},{"src":"https:\/\/ps.w.org\/baqflo-beforeafter\/assets\/screenshot-5.png?rev=3618092","caption":"BeforeAfter admin - home showing the list of BeforeAfters with handy live preview button and quick copy shortcodes"},{"src":"https:\/\/ps.w.org\/baqflo-beforeafter\/assets\/screenshot-6.png?rev=3618092","caption":"PRO: Compare video sources using the familiar BeforeAfter interface.  Slider, side-by-side, overlay available.  Comparison sets also allow usage of videos."},{"src":"https:\/\/ps.w.org\/baqflo-beforeafter\/assets\/screenshot-7.png?rev=3618092","caption":"PRO: Compare live webpages using iframe sources.  Website comparisons can block interactions, allow full interactions, or scroll-only with the scroll-safe area.  Please note not all websites allow iframe rendering."},{"src":"https:\/\/ps.w.org\/baqflo-beforeafter\/assets\/screenshot-8.png?rev=3618092","caption":"PRO: Build two-to-four image Comparison Sets with automatic pair generation (Side-by-side)."},{"src":"https:\/\/ps.w.org\/baqflo-beforeafter\/assets\/screenshot-9.png?rev=3618092","caption":"PRO: Build two-to-four image Comparison Sets with automatic pair generation (Grid view)."},{"src":"https:\/\/ps.w.org\/baqflo-beforeafter\/assets\/screenshot-10.png?rev=3618092","caption":"PRO: Comparison Set edit interface."}],"raw_content":"<!--section=description-->\n<h4>Show Every Transformation Clearly<\/h4>\n\n<p>BaqFlo BeforeAfter helps you present two images in a clear, interactive comparison.<\/p>\n\n<p>Create a comparison, choose the before and after images, select a display style, customise the presentation and place it anywhere using the generated shortcode.<\/p>\n\n<p>Whether you are showcasing renovations, photography edits, beauty treatments, landscaping, restorations, design revisions or product development, BeforeAfter gives visitors an immediate and engaging way to see what changed.<\/p>\n\n<p>Designed to be lightweight, responsive and easy to use, BeforeAfter works beautifully on desktop, tablet and mobile devices.<\/p>\n\n<h4>Why Choose BeforeAfter?<\/h4>\n\n<h3>Three Flexible Comparison Styles<\/h3>\n\n<p>Choose a draggable comparison slider, a side-by-side layout, or a hover and press reveal effect to match the way you want visitors to explore your images.<\/p>\n\n<h3>Responsive and Touch Friendly<\/h3>\n\n<p>Every comparison adapts to desktop, tablet and mobile screens. Slider, reveal and panning interactions work with mouse, touch and keyboard input.<\/p>\n\n<h3>Landscape and Portrait Ready<\/h3>\n\n<p>Use common aspect ratios, enter a custom ratio, or calculate the display ratio from the selected images. BeforeAfter is designed to handle wide panoramas, tall screenshots and mobile portrait images gracefully.<\/p>\n\n<h3>Flexible Image Presentation<\/h3>\n\n<p>Choose cover or contain fitting, control horizontal and vertical alignment, and adjust the starting slider position for each comparison.<\/p>\n\n<h3>Intelligent Drag Panning<\/h3>\n\n<p>Side-by-side comparisons can use individual, tandem or scale-aware drag panning. Visitors can explore clipped areas of tall or wide images without visible scrollbars.<\/p>\n\n<h3>Lightweight by Design<\/h3>\n\n<p>Frontend assets load only when a BeforeAfter comparison is displayed on the page, helping keep the rest of your website efficient.<\/p>\n\n<h4>Core Features<\/h4>\n\n<ul>\n<li>Draggable before-and-after image slider<\/li>\n<li>Side-by-side image comparison<\/li>\n<li>Hover or press-to-reveal comparison<\/li>\n<li>Responsive and touch-friendly interactions<\/li>\n<li>Custom before and after labels<\/li>\n<li>Common, custom and image-calculated aspect ratios<\/li>\n<li>Cover and contain image fitting<\/li>\n<li>Horizontal and vertical image alignment<\/li>\n<li>Individual, tandem and scale-aware drag panning<\/li>\n<li>Adjustable starting slider position<\/li>\n<li>Media Library image selection<\/li>\n<li>Animated GIF image comparisons<\/li>\n<li>Direct image URL support<\/li>\n<li>Shortcode placement<\/li>\n<li>Multiple comparisons on the same page<\/li>\n<li>Lightweight conditional asset loading<\/li>\n<\/ul>\n\n<h4>Perfect For<\/h4>\n\n<p>BeforeAfter is ideal for:<\/p>\n\n<ul>\n<li>Hair and beauty transformations<\/li>\n<li>Surgery and dental treatment results<\/li>\n<li>Website redesigns<\/li>\n<li>Home renovations<\/li>\n<li>Landscaping projects<\/li>\n<li>Photography retouching<\/li>\n<li>AI image generation comparisons<\/li>\n<li>Graphic design revisions<\/li>\n<li>Product development<\/li>\n<li>Restoration and repair work<\/li>\n<li>Before-and-after marketing campaigns<\/li>\n<\/ul>\n\n<h4>Built for Real-World Images<\/h4>\n\n<p>Before and after images are not always perfectly matched or conveniently shaped.<\/p>\n\n<p>BeforeAfter includes flexible alignment, fitting, aspect-ratio and panning controls so you can present panoramas, portrait images, screenshots and differently sized source images without rebuilding the originals first.<\/p>\n\n<h4>Ready for More? Upgrade to BeforeAfter Pro<\/h4>\n\n<p>BeforeAfter Pro is a separate plugin available from BaqFlo. It expands the same familiar workflow with new media types, multi-image Comparison Sets and advanced inspection and playback tools.<\/p>\n\n<p>Unlock Pro features including:<\/p>\n\n<ul>\n<li>Video comparisons<\/li>\n<li>Live webpage iframe comparisons<\/li>\n<li>Two-to-four image Comparison Sets with automatic pair generation<\/li>\n<li>Pair selector styles and advanced set layouts<\/li>\n<li>Zoom with synchronised panning<\/li>\n<li>All-image grids with synced drag<\/li>\n<li>Progression playback controls<\/li>\n<li>Future premium enhancements<\/li>\n<\/ul>\n\n<p>Learn more about BeforeAfter Pro:<\/p>\n\n<p>https:\/\/baqflo.com\/beforeafter\/<\/p>\n\n<h4>Built by BaqFlo<\/h4>\n\n<p>BeforeAfter is part of the growing BaqFlo family of WordPress plugins.<\/p>\n\n<p>Our goal is simple: build professional WordPress plugins that are fast, thoughtfully designed and genuinely enjoyable to use.<\/p>\n\n<!--section=installation-->\n<ol>\n<li>Install and activate BaqFlo BeforeAfter.<\/li>\n<li>Open BeforeAfter from the BaqFlo admin menu.<\/li>\n<li>Create a new comparison.<\/li>\n<li>Choose the before and after images.<\/li>\n<li>Select a comparison style and configure the presentation settings.<\/li>\n<li>Publish the comparison.<\/li>\n<li>Copy the generated shortcode into a page, post or widget.<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id=\"which%20comparison%20styles%20are%20included%3F\"><h3>Which comparison styles are included?<\/h3><\/dt>\n<dd><p>The free plugin includes a draggable slider, a side-by-side layout, and a hover or press-to-reveal layout.<\/p><\/dd>\n<dt id=\"does%20beforeafter%20work%20on%20phones%20and%20tablets%3F\"><h3>Does BeforeAfter work on phones and tablets?<\/h3><\/dt>\n<dd><p>Yes. Comparisons are responsive and their interactive controls support touch input.<\/p><\/dd>\n<dt id=\"can%20i%20compare%20tall%20screenshots%20or%20wide%20panoramic%20images%3F\"><h3>Can I compare tall screenshots or wide panoramic images?<\/h3><\/dt>\n<dd><p>Yes. Choose a suitable aspect ratio and use the available alignment and side-by-side panning controls to explore clipped areas.<\/p><\/dd>\n<dt id=\"can%20beforeafter%20calculate%20the%20aspect%20ratio%20from%20my%20images%3F\"><h3>Can BeforeAfter calculate the aspect ratio from my images?<\/h3><\/dt>\n<dd><p>Yes. The image aspect-ratio option uses the smallest shared width and height from the two selected images to create a practical comparison ratio.<\/p><\/dd>\n<dt id=\"can%20i%20use%20animated%20gifs%20in%20the%20free%20plugin%3F\"><h3>Can I use animated GIFs in the free plugin?<\/h3><\/dt>\n<dd><p>Yes. Animated GIF files can be selected from the Media Library or used through a direct image URL.<\/p><\/dd>\n<dt id=\"can%20i%20compare%20videos%20or%20live%20webpages%3F\"><h3>Can I compare videos or live webpages?<\/h3><\/dt>\n<dd><p>Video and live webpage iframe comparisons are available in BeforeAfter Pro. The free plugin supports standard images and animated GIF image files.<\/p><\/dd>\n<dt id=\"can%20i%20use%20direct%20image%20urls%3F\"><h3>Can I use direct image URLs?<\/h3><\/dt>\n<dd><p>Yes. You can select supported images from the WordPress Media Library or enter a direct URL to a supported image file.<\/p><\/dd>\n<dt id=\"can%20i%20display%20multiple%20comparisons%20on%20one%20page%3F\"><h3>Can I display multiple comparisons on one page?<\/h3><\/dt>\n<dd><p>Yes. Each comparison has its own shortcode, and multiple comparison shortcodes can be placed on the same page.<\/p><\/dd>\n<dt id=\"can%20i%20edit%20a%20comparison%20after%20publishing%20it%3F\"><h3>Can I edit a comparison after publishing it?<\/h3><\/dt>\n<dd><p>Yes. Update the comparison in WordPress and every instance of its shortcode will use the new settings.<\/p><\/dd>\n<dt id=\"does%20beforeafter%20load%20files%20on%20every%20page%3F\"><h3>Does BeforeAfter load files on every page?<\/h3><\/dt>\n<dd><p>No. Frontend assets are loaded only when a BeforeAfter comparison is rendered.<\/p><\/dd>\n<dt id=\"what%20does%20beforeafter%20pro%20add%3F\"><h3>What does BeforeAfter Pro add?<\/h3><\/dt>\n<dd><p>BeforeAfter Pro is a separately distributed plugin that adds video and live webpage comparisons; two-to-four image Comparison Sets; automatic pair generation; selector styles; zoom and synced pan; synced image grids; and progression playback controls.<\/p><\/dd>\n<dt id=\"can%20i%20upgrade%20without%20rebuilding%20my%20comparisons%3F\"><h3>Can I upgrade without rebuilding my comparisons?<\/h3><\/dt>\n<dd><p>Yes. Existing core comparisons remain available when moving to the separately distributed Pro plugin.<\/p><\/dd>\n<dt id=\"where%20can%20i%20learn%20more%20about%20beforeafter%20pro%3F\"><h3>Where can I learn more about BeforeAfter Pro?<\/h3><\/dt>\n<dd><p>https:\/\/baqflo.com\/beforeafter\/<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>1.01<\/h4>\n\n<ul>\n<li>Updated to the current BaqFlo framework.<\/li>\n<li>Added safe plugin-specific identifier and stored-data migration.<\/li>\n<li>Improved Lite and Pro replacement compatibility.<\/li>\n<li>Updated the admin JavaScript global to the product-specific namespace.<\/li>\n<li>Restored reliable list-screen previews and added automatic asset cache invalidation.<\/li>\n<\/ul>\n\n<h4>1.00<\/h4>\n\n<ul>\n<li>Initial WordPress.org release.<\/li>\n<\/ul>","raw_excerpt":"Create responsive before-and-after image comparisons with draggable sliders, side-by-side views, reveal effects and intelligent image panning.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/test.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/341914","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/test.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/test.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/test.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=341914"}],"author":[{"embeddable":true,"href":"https:\/\/test.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/baqflo"}],"wp:attachment":[{"href":"https:\/\/test.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=341914"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/test.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=341914"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/test.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=341914"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/test.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=341914"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/test.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=341914"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/test.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=341914"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}