Templates Plugins Courses

Before & after slider distorts image ratio of wide images

When using the before after slider plugin the input images are getting squeezed.

Input Image:

Output Image:

Cannot seem to fix it with own dimensions / % width etc.

Any idea?

Also sometimes the plugin does not load, so the before after slider space is empty. Any idea here?

Thank you!

Hi @juliangrimme,

In this case, the image issue may be due to differences in the sizes of the two pictures you’ve added. To prevent modifications, ensure that the images have the same dimensions.

Please take a moment to verify this aspect. :pray:

If the problem persists, reach out to us with screenshots of your setup, along with any other details you believe are relevant to the issue. We’re here to help!

Best regards,

Hi @adarina.efros

thank you for your help.
The images have the same ratio.
Also, only wide images are impacted.

Width of Before-after-Slider can be increased, but it does not allow for more room (instead of compressing image).

So e.G. Slider Width and height are set to 600x600.
All images wider than this get compressed/distorted.
Tried changing the width but the frame does not change.
Also tried changing width to dynamic % width, but it still does not change.

here it is : Loom | Free Screen & Video Recording Software | Loom

Hi @juliangrimme,

Thank you for your message.:pray:

Due to the 600x600 setup, the image is getting distorted to fit within a square shape. To resolve this, I recommend adjusting the width and height settings while setting ‘Maximum width (% of current width)’ to 200. This should help maintain the proper arrangement.

As an example, on the test page we created to address your issue, we used dimensions of Width-600 by Height-390, and we didn’t encounter any problems, even with the image you initially shared.

To further assist you, please try these adjustments and see if the issue persists. If it does, kindly provide us with 1-2 images that are causing problems and a screenshot of your current setup. This will allow us to investigate the issue more thoroughly and provide you with a more accurate solution.

Best regards,