#548 – Whitespace when using portrait and landscape format images

 Hello Lefteris,

On my test website I'm using Showtime Image Gallery. When I have a image in portrait orientated format along mainly landscape orientated images, the gallery has a large white space between the image field and the thumbs. How can I fix this?
Thanks!
Greetings, Ton

Hi there!

Unfortunately there is no option for this in the layout controls and you will have to create an override and add it manually. All you need to do is add the following code in the initialization script:

adaptiveHeight: true,

The actual layout file depends on how you use Showtime Image Gallery(custom field, in editor or module). if you are not familiar with overrides or you need more help please let me know so I can provide more details.

Note: This option will change the height of the slideshow depending on the current image height. In my opinion this is a bad user experience. If you want an alternative you can rotate the image on your computer and then upload it again.

Regards

Hello Lefteris,

Thanks for your reply!
I would not know where to put: "add the following code in the initialization script:adaptiveHeight: true,"
Can you explain where to do this?
Als rotating the image is not an option because it is taken in portrait view.

What I was hoping for is that with Econa I can crop this image to the right size but I don't know how to use Econa 'standalone' in the backend. It has to be simple for my client. Cropping in another program like Photoshop, in Windows or online will be to dificult.

Thanks!

The first thing you need to do is create a layout override. Please read the section named "Layouts" on the documentation page:

https://www.firecoders.com/documentation/showtime-image-gallery#layouts

After you create the override find the line with the following content:

jQuery('[data-showtime-id="<?php echo $gallery->id; ?>"]').slick({

You need to insert a new line right below it, so it looks like:

jQuery('[data-showtime-id="<?php echo $gallery->id; ?>"]').slick({
adaptiveHeight: true,

If you don't make it, please create a new private ticket and include administration credentials so I can do it for you.

Regards