Hi,
I was previously using the SP Smart Slider extension in Joomla3. The slider images were 1240x500px.
However, I am using Joomla4 and SPPB Slideshow module now, but setting the slider height to 500px still cut-off a part of the image. I also tried other values but images are always cut in some dimension. How can I circumvent without the need to edit all my slider images?
Please find the slider at the top of the page here:
Thanks and best regards,
Bernd
Hi. This is the expected behavior, as the background image is used. You should use the image item in content section instead.
Hi Bernd
Thanks for contacting us. You can follow Pavel's instructions. It may help you.
-Regards.
Hi,
thanks for your reply, although I do not understand what you mean by "background image". But the image content add-on is something completely different. I want to implement a slider at that position, not a still image.
Any other suggestions? In some way, an image slider should be able to display the full-size image...
Best regards,
Bernd
Okay, two things:
Background image - I understand that e.g. the timer (or text) will be overlay. IF I take the timer away, I gain the height of it for image display
Images are rescaled according to the width and height of the add-on. Since 100% width is limited by the template to 1140px, images with 1240px width should be set to (1140/1240)x500=460px height to keep the correct zoom for full image display.
I think it would be good to improve on that further, because this behavior is a bit counter-intuitive...
Thanks and best regards,
Bernd
Update: even saving the image to 1140x500px will not be displayed correctly unfortunately. When I use the "Inspect mode" in my browser, the image dimensions are correctly displayed, however, the browser view is showing an image at the wrong scale...
Any ideas here?
If you want to use Slideshow addon outside its behavior by default, this requires additional CSS coding. In this regard, it is very flexible and has fields of classes for most elements where you can enter your classes and write CSS code for theese classes.
My background image of the slide was not displaying correctly as the autosize always cut of parts of the image.
I entered the following in the custom css block, and finally it is working for me;
.sp-slider .sp-item .sp-background{
background-size: contain;
background-repeat: no-repeat;
background-position: top right;
}
Glad to know that.
