FAIR

Federated and Independent Repositories

Before After Image Compare — Gutenberg & Elementor

Plugin Banner

Before After Image Compare — Gutenberg & Elementor

by Zelvigo

Download
Description

Before After Image Compare for Gutenberg & Elementor

Showcase transformations, renovations, photo edits, and product comparisons with a smooth before/after image slider. This plugin works in the WordPress block editor (Gutenberg) and Elementor — no coding required.

Built by Zelvigo — the WordPress developer tools platform for generating production-ready plugins, CPTs, taxonomies, settings pages, shortcodes, and Gutenberg blocks.

Features

  • Gutenberg block and Elementor widget

  • Horizontal and vertical slider orientation

  • Default offset control (0–1)

  • Move slider on mouse hover

  • Swipe and click-to-move options

  • Before/after overlay labels

  • Works with any WordPress theme

Need more WordPress tools?

Visit Zelvigo Dev Studio to generate custom post types, taxonomies, plugin boilerplates, and more — in minutes.

  1. Upload the wptd-image-compare folder to /wp-content/plugins/.

  2. Activate the plugin through the Plugins menu in WordPress.

  3. Add the Before After Image Compare block in Gutenberg, or the widget in Elementor.

  1. <p>Gutenberg block — before after image compare in the block editor.</p>

    Gutenberg block — before after image compare in the block editor.

  2. <p>Elementor widget — search for "compare" or "before after".</p>

    Elementor widget — search for "compare" or "before after".

  3. <p>Vertical before/after slider.</p>

    Vertical before/after slider.

  4. <p>Horizontal before/after slider.</p>

    Horizontal before/after slider.

  5. <p>Overlay labels on the comparison slider.</p>

    Overlay labels on the comparison slider.

Can I use this plugin without Elementor?

Yes. Use the Gutenberg block in the block editor. Elementor support is included when Elementor is installed.

Does it work with any theme?

Yes. It works with any WordPress theme that supports the block editor or Elementor.

Who built this plugin?

This plugin is built by Zelvigo, a WordPress developer tools platform.

The problem with the "After"

By kickermax on June 14, 2023

A good plugin, everything works fine.

But there is a problem. The inscription "after" is displayed, but copies the content "before".

It is fixed very easily. In the file image-compare.php (along the way wptd-image-compare/trunk/widgets/image-compare.php) in function renderduring subsequent rendering, "data-before" and "data-after" have the same tokens (thats all).

echo sprintf('<figure class="%1$s" data-offset="%2$s" data-orientation="%3$s" data-move="%4$s" data-swipe="%5$s" data-hover="%6$s" data-noverlay="%7$s" data-before="%8$s" data-after="%8$s">',

Just change last data-after for "%9$s"

1.4.3

  • Fixed custom widget icon not appearing in the Elementor panel.

  • Added compare icon styles for Elementor editor and preview.

1.4.2

  • Added custom compare icon for Gutenberg and Elementor.

  • Improved shared icon asset registration.

1.4.1

  • Rebranded plugin for Zelvigo. Removed legacy WPTD branding from all user-facing areas.

  • Updated plugin title, admin page, Elementor category, and promotional links to zelvigo.com.

1.4.0

  • Added Gutenberg block with the same image compare options as Elementor.

  • Shared frontend renderer for Elementor widget and block output.

  • Elementor integration is now optional; the plugin works with the block editor alone.

1.3.0

  • Fixed data-after token rendering bug in widget layout.

  • Updated plugin contributor ownership parameters.

1.1

  • Elementor _register_controls deprecation issue fixed

1.0

  • Initial release.
Back to top