Description
Show Every Transformation Clearly
BaqFlo BeforeAfter helps you present two images in a clear, interactive comparison.
Create a comparison, choose the before and after images, select a display style, customise the presentation and place it anywhere using the generated shortcode.
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.
Designed to be lightweight, responsive and easy to use, BeforeAfter works beautifully on desktop, tablet and mobile devices.
Why Choose BeforeAfter?
Three Flexible Comparison Styles
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.
Responsive and Touch Friendly
Every comparison adapts to desktop, tablet and mobile screens. Slider, reveal and panning interactions work with mouse, touch and keyboard input.
Landscape and Portrait Ready
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.
Flexible Image Presentation
Choose cover or contain fitting, control horizontal and vertical alignment, and adjust the starting slider position for each comparison.
Intelligent Drag Panning
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.
Lightweight by Design
Frontend assets load only when a BeforeAfter comparison is displayed on the page, helping keep the rest of your website efficient.
Core Features
- Draggable before-and-after image slider
- Side-by-side image comparison
- Hover or press-to-reveal comparison
- Responsive and touch-friendly interactions
- Custom before and after labels
- Common, custom and image-calculated aspect ratios
- Cover and contain image fitting
- Horizontal and vertical image alignment
- Individual, tandem and scale-aware drag panning
- Adjustable starting slider position
- Media Library image selection
- Animated GIF image comparisons
- Direct image URL support
- Shortcode placement
- Multiple comparisons on the same page
- Lightweight conditional asset loading
Perfect For
BeforeAfter is ideal for:
- Hair and beauty transformations
- Surgery and dental treatment results
- Website redesigns
- Home renovations
- Landscaping projects
- Photography retouching
- AI image generation comparisons
- Graphic design revisions
- Product development
- Restoration and repair work
- Before-and-after marketing campaigns
Built for Real-World Images
Before and after images are not always perfectly matched or conveniently shaped.
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.
Ready for More? Upgrade to BeforeAfter Pro
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.
Unlock Pro features including:
- Video comparisons
- Live webpage iframe comparisons
- Two-to-four image Comparison Sets with automatic pair generation
- Pair selector styles and advanced set layouts
- Zoom with synchronised panning
- All-image grids with synced drag
- Progression playback controls
- Future premium enhancements
Learn more about BeforeAfter Pro:
https://baqflo.com/beforeafter/
Built by BaqFlo
BeforeAfter is part of the growing BaqFlo family of WordPress plugins.
Our goal is simple: build professional WordPress plugins that are fast, thoughtfully designed and genuinely enjoyable to use.
Screenshots
Installation
- Install and activate BaqFlo BeforeAfter.
- Open BeforeAfter from the BaqFlo admin menu.
- Create a new comparison.
- Choose the before and after images.
- Select a comparison style and configure the presentation settings.
- Publish the comparison.
- Copy the generated shortcode into a page, post or widget.
FAQ
-
Which comparison styles are included?
-
The free plugin includes a draggable slider, a side-by-side layout, and a hover or press-to-reveal layout.
-
Does BeforeAfter work on phones and tablets?
-
Yes. Comparisons are responsive and their interactive controls support touch input.
-
Can I compare tall screenshots or wide panoramic images?
-
Yes. Choose a suitable aspect ratio and use the available alignment and side-by-side panning controls to explore clipped areas.
-
Can BeforeAfter calculate the aspect ratio from my images?
-
Yes. The image aspect-ratio option uses the smallest shared width and height from the two selected images to create a practical comparison ratio.
-
Can I use animated GIFs in the free plugin?
-
Yes. Animated GIF files can be selected from the Media Library or used through a direct image URL.
-
Can I compare videos or live webpages?
-
Video and live webpage iframe comparisons are available in BeforeAfter Pro. The free plugin supports standard images and animated GIF image files.
-
Can I use direct image URLs?
-
Yes. You can select supported images from the WordPress Media Library or enter a direct URL to a supported image file.
-
Can I display multiple comparisons on one page?
-
Yes. Each comparison has its own shortcode, and multiple comparison shortcodes can be placed on the same page.
-
Can I edit a comparison after publishing it?
-
Yes. Update the comparison in WordPress and every instance of its shortcode will use the new settings.
-
Does BeforeAfter load files on every page?
-
No. Frontend assets are loaded only when a BeforeAfter comparison is rendered.
-
What does BeforeAfter Pro add?
-
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.
-
Can I upgrade without rebuilding my comparisons?
-
Yes. Existing core comparisons remain available when moving to the separately distributed Pro plugin.
-
Where can I learn more about BeforeAfter Pro?
-
https://baqflo.com/beforeafter/
Reviews
There are no reviews for this plugin.
Contributors & Developers
“BaqFlo BeforeAfter” is open source software. The following people have contributed to this plugin.
Contributors
Translate “BaqFlo BeforeAfter” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Changelog
1.01
- Updated to the current BaqFlo framework.
- Added safe plugin-specific identifier and stored-data migration.
- Improved Lite and Pro replacement compatibility.
- Updated the admin JavaScript global to the product-specific namespace.
- Restored reliable list-screen previews and added automatic asset cache invalidation.
1.00
- Initial WordPress.org release.