Version 3.3 of MetaSlider introduced a ‘Smart Pad’ option (cropping disabled) which automatically adds padding to portrait images allowing you to mix portrait and landscape images and maintain a consistent slideshow height.
Here is an example using the same images as below:
Please note that the Smart Pad option is only compatible with Flex Slider.
We often receive support requests from people asking why their images are being cropped automatically by MetaSlider. In this post I’ll attempt to explain why and how MetaSlider crops images.
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.
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:
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):
Again, no cropping has occured, but our small portrait image has become huge. This happens because each image in a responsive slideshow is scaled along its 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:
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.
Want to disable cropping completely?
In the Advanced Slideshow settings, change ‘Crop’ to ‘Disabled’. With cropping disabled, the height of your slideshow will change if you mix portrait and landscape images in the same slideshow.