#1003 Posted in ‘Showtime Image Gallery’

Latest post by Lefteris Kavadas on Tuesday, 21 February 2023 11:15 EET

Kara J Brittain
I'm working on a development site here. https://brokenarrow.cloudaccess.host/index.php/properties/2-build-your-dream-home-creede

I have the Showtime Gallery set to Slideshow and using the LightGallery Renderer.
Most of the images are landscape, with one exception (the second image is very tall, and more narrow).
How can I scale the tall image to "match" the first image, or something like that, so that the slideshow stays close to the same height?

Lefteris Kavadas
Hi Kara,

Having images with different ratio in a slideshow is not a good idea. It will always result in extra space. It's a matter of physics.
Here is what I suggest:

1. Use a different layout, not slideshow.
2. Keep the slideshow layout but make sure the images have the same ratio.
3. Keep the slideshow as it is and I will provide some code that will adjust the slideshow height depending on the current image height. Note that this is not a good practice since it will change the slideshow (and the page) height each time you have a tall image.

Regards

Kara J Brittain
I added this CSS. It seems to be accomplishing what I wanted. Do you see any potential major issues with this?
.showtime-slideshow .showtime-image img {
    width: auto !important;
    max-height:666px !important;
    outline: solid 1px transparent;
    margin: auto;
}


See it in play here: https://brokenarrow.cloudaccess.host/index.php/properties/2-build-your-dream-home-creede

Kara J Brittain
Nevermind. I realize this doesen't work for resizing screens, aka tablets and phones.
Ugh. I just want the vertical images to fill in with gray on each side, rather than skew the whole thing.

Lefteris Kavadas
You can try to set a fixed height in that case. In order to adapt to all screens you can use viewport height. Example (not tested):
.showtime-slideshow  {
    width: auto !important;
    height: 70vh !important;
}
.showtime-slideshow .showtime-image img {
    width: auto !important;
    height:100% !important;
}

Note: An active subscription is required in order to get support for our paid extensions. For our free extensions, if you don't have an account, register and then submit your support request.  In case you just want to ask a question, you can also use the contact form .

Firecoders
Are you using our extensions? Please post a review at the Joomla extensions directory!
Post a review