800,000+ WordPress sites are already using MetaSlider!

How to Show Portrait and Landscape Images Together in MetaSlider

We are often asked at MetaSlider if it is possible build a slideshow using variety of image orientations. People want to do this because they have some images in portrait mode and some in landscape. These images have different orientations and different sizes.

The answer is “Yes, this is possible”.

One option is that MetaSlider can help by automatically cropping and resizing these images. This allows you to maintain a consistent slideshow height between slides and avoid any bumpy transitions.

However, there is an alternative if you don’t want your images to be cropped or resized.

MetaSlider has a “Smart Pad” option which allows to have a slideshow with a mixture of different image sizes. Each image will display in it’s original orientation.

Smart Pad will disable MetaSlider’s cropping features. Instead, Smart Pad will automatically add padding to portrait images.

In this guide, I’ll introduce you to how Smart Pad works.

  • Inside your slideshow, look for the “Advanced Settings” area.
  • Under “Image Crop”, choose “Disabled (Smart Pad).
  • Please note that the Smart Pad option is only compatible with Flex Slider, so you’ll need to make sure you’re using that slideshow library.

To show you how Smart Pad works, I’ve created a slideshow with one portrait and one landscape image. This screenshot below shows how the landscape image appears:

This next screenshot shows how the portrait image appears in the same slideshow. The image maintains the correct height and width ratio and also doesn’t disrupt the size of the slideshow. Smart Pad has automatically added the correct amount of padding to this portrait image.


More about Smart Pad and Cropping

Smart Pad is one solution to a tricky problem. 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.

If you want to disable cropping completely, go to 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.


Leave a Comment

Start Using Your Slider Today!

Create and publish WordPress slideshows in minutes… What are you waiting for?