Image Cropping in Meta Slider

We often receive support requests from people asking why their images are being cropped automatically by Meta Slider. In this post I’ll attempt to explain why and how Meta Slider crops images.

The Problem

You cannot mix portrait and landscape images in a responsive slideshow, whilst maintaining a consistent slideshow height between slides.

To explain the problem, we’ll use this image set; 2 landscape images and 1 portrait image.

cropdemo-3 cropdemo-2 cropdemo

We’ll aim for a slideshow size of 200px x 100px by setting this in our slideshow settings.

Demo 1: Smart Crop Disabled, landscape images only

To begin with, let’s just add the 2 landscape images and see what happens:

test

All good so far. No cropping has occurred and the height of the slideshow is constant between all slides.

Demo 2: Smart Crop Disabled, landscape & portrait images

Each image in a responsive slideshow is scaled along it’s width so that it fills the whole width of the slideshow. When the width is changed, the height is changed also.

Now lets add the portrait image and see what happens (slide 2):

test

Again, no cropping has occured, but our small portrait image has become huge. Why is this happening? Well, each image in a responsive slideshow is scaled along it’s width so that it fills the entire width of the slideshow. When the width is changed, the height is changed also. The width of the portrait image is scaled from 70px to 200px wide (that’s 2.85 time’s its original width), but the height has been scaled up at the same rate, making it 285px tall (100px x 2.85).

This is why you cannot mix portrait and landscape images in a responsive slideshow, whilst maintaining a consistent slideshow height between slides.

Demo 3: Smart Crop Enabled, landscape & portrait images

This is where Smart Crop comes in.  Smart Crop takes the largest, most central area of your image, whilst maintaining the width:height ratio of the slideshow itself. Let’s take a look at what happens when Smart Crop is enabled:

  • test

The landscape images are unaffected because they are already the correct size. Our portrait image is still being scaled up along it’s width at a rate of 2.85x, but Smart Crop has taken care of the height to ensure the overall slideshow height remains constant. We’ve purposely used a tricky sample set of slides to demonstrate the problem. Smart crop is a suitable ‘quick fix’ if your images are roughly the same size.

The ultimate solution

If you don’t want your images to be cropped at all, and you want your slideshow to remain a consistent height, then you need to upload correctly sized images to begin with. The solution for portrait images is to add padding to the left and right hand size of your image as demonstrated below.

test

Want to disable cropping completely?

You can bypass all of the Meta Slider cropping functionality by adding the following code to your themes functions.php file:

Warning: Use with caution, this really will disable all cropping in Meta Slider, including thumbnails! Not suitable if you’re using filmstrip or thumbnail navigation.