keighl

<p>Organize “before and after” style portfolios embedded within WordPress posts. Before/After allows you to select specific images out of your media library, and sort them into respective before and after groups from the post editing page. Useful for anyone who features their work or services (web-designers, artists, plumbers, etc.) on their site.</p>
<p><strong><a href="http://www.keighl.com/plugins/before-after/" rel="nofollow ugc">Support & Examples</a></strong></p>
<p>=Use=</p>
<ul>
<li>Add images to your Media Library; these images will become available to you on the post add/edit page.</li>
<li>On the post add/edit page, simply drag images from the Media Library column into the Before and After columns.</li>
<li>To remove an item, double-click it.</li>
</ul>
<p>=Template Tags=</p>
<p>=<code><?php $beforeafter->is_gallery( id ); ?></code>=</p>
<p>Returns true if there is a Before/After gallery associated with a particular post.</p>
<ul>
<li>id:
<ul>
<li>A post id. Typically the current post, $post->ID</li>
</ul>
</li>
</ul>
<p>=<code><?php $beforeafter->gallery( type , id , file , links , list , rel , limit ); ?></code>=</p>
<p>Returns the images stored in a particular Before/After gallery.</p>
<ul>
<li>
<p>type:</p>
<ul>
<li>Determines which gallery to return: before or after.</li>
<li>Values: ‘before’ , ‘after’</li>
<li>Default: ‘after’</li>
</ul>
</li>
<li>
<p>id:</p>
<ul>
<li>The post id. If set to 0, will return images from all posts with Before/After galleries.</li>
<li>Default: 0</li>
</ul>
</li>
<li>
<p>file:</p>
<ul>
<li>Determines the type of image to return: the original image file, or the thumbnail.</li>
<li>Values: ‘thumb’ , ‘file’</li>
<li>Default: ‘thumb’</li>
</ul>
</li>
<li>
<p>links:</p>
<ul>
<li>If set to true, will wrap images with links to the original files.</li>
<li>Values: true, false</li>
<li>Default: true</li>
</ul>
</li>
<li>
<p>list:</p>
<ul>
<li>If set to true, wraps the image in </li>
<li> tags.</li>
<li>Values: true, fase</li>
<li>Default: false</li>
</ul>
</li>
<li>
<p>rel:</p>
<ul>
<li>Alters the default rel parameter for image links.</li>
<li>Default: ‘beforeafter’</li>
</ul>
</li>
<li>
<p>limit:</p>
<ul>
<li>Limits how many items are returned.</li>
<li>Default: all of ’em.</li>
</ul>
</li>
</ul>


Before/After

A "before and after" portfolio generator. Uses images uploaded to the media library; organize galleries from the post add/edit page.

Mirza Md. Hasan

Tawhid Islam Raihan

Kamrul Hasan

Themefic

Abu Hena

<h4>The easiest and best Before After Image Slider for WooCommerce</h4>
<p>eBEAF is the Ultimate Before After WooCommerce Plugin with which you can easily create beautiful Before After Image comparison Slider for WooCommerce.</p>
<p>👉 Official Demo Link: <a href="https://themefic.com/plugins/ebeaf" rel="nofollow ugc">eBEAF Live Preview</a><br />
👉 eBEAF Pro Version: <a href="https://themefic.com/plugins/ebeaf/pro" rel="nofollow ugc">Check Pro</a><br />
👉 Documentation: <a href="https://themefic.com/docs/ebeaf/how-it-works/" rel="nofollow ugc">Written Installation Guide</a><br />
👉 Video Guide: <a href="https://www.youtube.com/watch?v=FHvrLiMb5Wg&list=PLY0rtvOwg0ylYTUGOHk-DFt8qAvQ7ZYxY&ab_channel=Themefic" rel="nofollow ugc">Complete Step by Step Guide</a><br />
👉 Join Our FB Community: <a href="https://facebook.com/groups/beaf.wp" rel="nofollow ugc">eBEAF Facebook Group</a></p>
<h4>Theme Compatibility</h4>
<p>This plugin should work with any WooCommerce based WordPress theme if it’s developed following the WooCommerce coding standard. But if your theme completely restructured the Single Product page, then you need to do little bit of custom coding in order to make this plugin work. <strong>Please contact our <a href="https://portal.themefic.com/support/" rel="nofollow ugc">support</a> if you are facing such issues.</strong> We would be happy to assist. For now, we have tested the plugin with the following popular themes:</p>
<ul>
<li>Astra</li>
<li>Storefront</li>
<li>Divi</li>
<li>Avada</li>
<li>Porto</li>
<li>WoodMart</li>
<li>GeneratePress</li>
</ul>
<h4>How it works</h4>
<p>The plugin works on “Single Product Page” only and you can add 1 Slider per product.</p>
<h4>Looking for a WooCommerce Before and After Slider Plugin? Want to show comparison of two images on your WooCommerce Store?</h4>
<p>eBEAF let’s you add Before After Slider in WooCommerce Single Product page. eBEAF also comes up with premium high-quality features that will help you showcase your product in a better way than others:</p>
<ul>
<li>Horizontal or Vertical layout</li>
<li>Alt tag on each images for Better SEO</li>
<li>Label Color and background Change</li>
<li>Disable Overlay</li>
<li>On Scroll Slider</li>
<li>Mouse Hover Options</li>
<li>Easy-to-use option panel</li>
<li>10 Preview Styles (Pro)</li>
<li>Single Image Slider (Pro)</li>
<li>Auto Slider (Pro)</li>
<li>Disable slider handle (Pro)</li>
</ul>
<p><strong>Demo Link </strong></p>
<blockquote>
<p><strong><a href="https://themefic.com/plugins/ebeaf" rel="nofollow ugc">Check out the demo</a></strong> to see it in action!</p>
</blockquote>
<p>With this Before and After WordPress plugin, You can showcase your before and after product by comparing two before and after images and add it on Single Product page of your WooCommerce Store.</p>
<p><strong>Pro Version </strong></p>
<p>We believe the free version is good enough for most business. However, we have a <strong>Pro version</strong> of this plugin which has more advanced features including <strong>10 Awesome looking Preview Styles, Before-After with Single Image, Auto Slide</strong> and many more.</p>
<blockquote>
<p><strong><a href="https://themefic.com/plugins/ebeaf/pro" rel="nofollow ugc">Check eBEAF Pro</a></strong></p>
</blockquote>
<h3>Video Tutorials:</h3>
<span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/FHvrLiMb5Wg?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span>
<p>Want to know all the latest news and be a part of the eBEAF community? Join our <a href="https://www.facebook.com/groups/beaf.wp" rel="nofollow ugc">Facebook Community group!</a></p>
<h3>Features:</h3>
<p>Here are the most important features of eBEAF. If you need any further information, please feel free to contact us. Below are the best offerings of eBEAF:</p>
<h4>Multiple layout</h4>
<p>Display Sliders in <a href="https://demo.themefic.com/before-after-for-woocommerce/product/demo-product-horizontal-preview/" rel="nofollow ugc">Horizontal</a> or <a href="https://demo.themefic.com/before-after-for-woocommerce/product/demo-product-vertical-preview/" rel="nofollow ugc">Vertical</a> layout.</p>
<h4>Label Change</h4>
<p>You can easily change the Label of Before-After to something you want from eBEAF’s Option panel. <a href="https://demo.themefic.com/before-after-for-woocommerce/product/demo-product-before-after-label/" rel="nofollow ugc">Click here</a> for a quick preview.</p>
<h4>Label Color Change</h4>
<p>You can easily change the color and background of each Label. <a href="https://demo.themefic.com/before-after-for-woocommerce/product/demo-product-label-color-change/" rel="nofollow ugc">Click here</a> for a quick preview.</p>
<h4>Disable Overlay</h4>
<p>You can disable the overlay from the options Panel. <a href="https://demo.themefic.com/before-after-for-woocommerce/product/demo-product-hover-no-title-and-overlay/" rel="nofollow ugc">Click here</a> for a quick preview.</p>
<h4>Mouse Hover</h4>
<p>You can move slider on Mouse hover. <a href="https://demo.themefic.com/before-after-for-woocommerce/product/move-slider-on-mouse-hover/" rel="nofollow ugc">Click here</a> for a quick preview.</p>
<h4>On Scroll Slider</h4>
<p>Slider will slide on Scroll (based on User Scrolling).</p>
<h4>Before After Image Alt tag</h4>
<p>You can add Alt tag on each images for Better SEO.</p>
<h4>Easy-to-use Option Panel</h4>
<p>eBEAF has built in easy-to-use option panel. You can add or remove any options from this panel.</p>
<h4>More Features</h4>
<ul>
<li>
<p><strong>Support popular page builders:</strong> eBEAF is fully compatible with popular page builders like Elementor, WP Bakery, DIVI, Beaver etc. See the list below.</p>
</li>
<li>
<p><strong>Responsive and Touch Compatibility</strong> : eBEAF is fully responsive and also supports touch on mobile devices.</p>
</li>
<li>
<p><strong>Awesome UI:</strong> Easy and clean user interface</p>
</li>
<li>
<p><strong>Lightweight:</strong> The plugin is so lightweight that it won’t impact much on your speed.</p>
</li>
<li>
<p><strong>Speed optimized:</strong> Compatible with any lazy load plugins. It also works with WEBP images.</p>
</li>
<li>
<p><strong>SEO Friendly:</strong> Support WP Image alt as image alt and title.</p>
</li>
<li>
<p><strong>Flexible Image</strong> — You can use any image size.</p>
</li>
</ul>
<h3>Pro Features</h3>
<p>You will get more features and advantages on the pro version. Here are few feature of the Pro Version:</p>
<ul>
<li>10 Preview Styles</li>
<li>Single Image Slider</li>
<li>Auto Slider</li>
<li>Change Read More text</li>
<li>Disable slider handle</li>
</ul>
<h4>All Free Features</h4>
<p>The Pro version includes all the features of the Free version (as described above). Plus:</p>
<h4>10 Preview Styles</h4>
<p>The Pro version includes 10 Additional Awesome looking Preview Styles. <a href="https://demo.themefic.com/before-after-for-woocommerce/10-different-preview-styles/" rel="nofollow ugc">Click here</a> for a quick preview.</p>
<h4>Single Image Slider</h4>
<p>Create Before After slider using a single image. The Single image has filter effects like <a href="https://demo.themefic.com/before-after-for-woocommerce/product/pro-grayscale-filter/" rel="nofollow ugc">Grayscale</a>, <a href="https://demo.themefic.com/before-after-for-woocommerce/product/pro-blur-filter/" rel="nofollow ugc">Blur</a>, <a href="https://demo.themefic.com/before-after-for-woocommerce/product/pro-saturate-filter/" rel="nofollow ugc">Saturate</a>, <a href="https://demo.themefic.com/before-after-for-woocommerce/product/pro-sepia-filter/" rel="nofollow ugc">Sepia</a> etc. The filter can be added on Before or After image.</p>
<h4>Auto Slider</h4>
<p>Slider will slide automatically. Options to add Pause on hover. <a href="https://demo.themefic.com/before-after-for-woocommerce/product/pro-auto-slide/" rel="nofollow ugc">Click here</a> for a quick preview.</p>
<h4>Disable slider handle</h4>
<p>You can easily disable slider handle.</p>
<blockquote>
<p><strong><a href="https://themefic.com/plugins/ebeaf/pro" rel="nofollow ugc">View Pro Version</a></strong></p>
</blockquote>
<p><strong>Premium Support</strong></p>
<p>We provide full support on the WordPress.org forums. You can also post questions or bug reports through our <a href="https://www.facebook.com/groups/beaf.wp" rel="nofollow ugc">Facebook group</a> or <a href="https://portal.themefic.com/support/" rel="nofollow ugc">our website</a>. However, please note that, for free version’s support/replies, there can be delays upto 24-48 hours. So, if you need urgent support, we recommend purchasing <strong><a href="https://themefic.com/plugins/ebeaf/pro" rel="nofollow ugc">Pro Version</a></strong>.</p>
<p><strong>Privacy Policy : </strong></p>
<p>Before After Slider for WooCommerce – eBEAF uses <a href="https://appsero.com" rel="nofollow ugc">Appsero</a> SDK to collect some telemetry data upon user’s confirmation. This helps us to troubleshoot problems faster & make product improvements.</p>
<p>Appsero SDK <strong>does not gather any data by default.</strong> The SDK only starts gathering basic telemetry data <strong>when a user allows it via the admin notice</strong>. We collect the data to ensure a great user experience for all our users.</p>
<p>Integrating Appsero SDK <strong>DOES NOT IMMEDIATELY</strong> start gathering data, <strong>without confirmation from users in any case.</strong></p>
<p>Learn more about how <a href="https://appsero.com/privacy-policy/" rel="nofollow ugc">Appsero collects and uses this data</a>.</p>
<h3>Credit</h3>
<p>BEAF is based on the famous <a href="https://zurb.com/playground/twentytwenty" rel="nofollow ugc">TwentyTwenty</a> script that developed by Zurb team. Our icon is taken from <a href="https://iconfinder.com/" rel="nofollow ugc">Iconfinder</a>.</p>
<h3>Our Plugins</h3>
<ul>
<li><a href="https://wordpress.org/plugins/tourfic" rel="ugc">Tourfic – Ultimate Hotel Booking, Travel Booking & Apartment Booking WordPress Plugin</a></li>
<li><a href="https://wordpress.org/plugins/ultimate-addons-for-contact-form-7/" rel="ugc">Ultimate Addons For Contact Form 7</a></li>
<li><a href="https://wordpress.org/plugins/instantio" rel="ugc">Onepage / Direct Checkout for WooCommerce – Instantio</a></li>
<li><a href="https://wordpress.org/plugins/hydra-booking" rel="ugc">Hydra Booking – All in One Appointment Scheduling and Booking Calendar Solution</a></li>
</ul>
<h3>Our Themes</h3>
<ul>
<li><a href="https://wordpress.org/themes/travelfic/" rel="ugc">Travelfic – Ultimate Travel Booking WordPress Theme</a></li>
<li><a href="https://wordpress.org/themes/ultimate-hotel-booking/" rel="ugc">Ultimate Hotel Booking WordPress Theme</a></li>
</ul>


Before After Slider for WooCommerce – eBEAF

Want to show comparison of two images on your WooCommerce Store? Easily create before and after image slider for WooCommerce and add it on your single …

Before/After vs Before After Slider for WooCommerce – eBEAF