Awaiting an answer SP Page Builder

Image Carousel images distortion - previously everything worked fine

Asked by Claudio 1 year ago Last activity 1 year ago

image carousel addon problems after SPPB update
the "image carousel" addon has resized all the banners that no longer appear in the correct format, also resizing the browser window (or visiting the page from a mobile device) the image becomes deformed...
on the contrary the "Carousel" addon behaves well and scales the image depending on the size of the browser window

previously everything worked fine

see this document https://www.scandella.net/public/SPPB_error.pdf
and try resizing the browser page yourself at this url
Addon Carousel https://www.scandella.net/it/test-carousel work fine... the border is red colour to highlight how the image goes beyond

Addon Image Carousel https://www.scandella.net/it/test-image-carousel work bad
AGAIN previously everything worked fine !!!

Note: I work exclusively in the backend !!!

23 replies

Toufiq Senior Staff

1 year ago

Hi there,

Thank you for reaching out, and I apologize for any inconvenience caused by this oversight. To better address the issue, could you kindly provide Joomla administrator access? This will enable me to thoroughly investigate the matter and provide you with a prompt resolution.

I appreciate your cooperation and will ensure to get back to you as soon as possible.

Best regards,

Toufiqur Rahman (Team Lead, Support)

Claudio Asked this

1 year ago

Check the hidden content please.
the add-on also has other problems...
check the border radius property that does not work and also from smartphones (especially with Google Chrome) the images scroll automatically but jerkily and often the second slide is not displayed or is skipped.

I made backups but the last time I gave you access as super user you didn't solve the problem leaving me with the site blocked and down.

Toufiq Senior Staff

1 year ago

Username and password do not match or you do not have an account yet.

Claudio Asked this

1 year ago

Oh my god....

Toufiq Senior Staff

1 year ago

Sorry! Still it doesn't work.

Username and password do not match or you do not have an account yet.

Claudio Asked this

1 year ago

sorry for my mistake, the account is working but... see hidden content.

Toufiq Senior Staff

1 year ago

Please check now. You had added custom css code for the height. I just remove this css code.

.sppb-carousel-extended-outer-stage{
    height: 1080px !important;
}

Claudio Asked this

1 year ago

thanks, it's much better but not like the "carousel" add-on

I had tried to insert :

.sppb-carousel-extended-item {
width: auto !important;
}

img.sppb-carousel-extended-item {
width: auto !important;
}

.sppb-carousel-extended-list{
width: auto !important; height: 1080px !important;
}

.sppb-carousel-extended-outer-stage{
height: 1080px !important;
}

in the custom css, but I didn't solve it

the problem is still there by tightening the window... see https://www.scandella.net/wrong.png
same thing for mmairo (https://www.scandella.net/wrong_on_mmairo.png)

Toufiq Senior Staff

1 year ago

Both site Page Builder version is same. Please check.

Claudio Asked this

1 year ago · edited

yes, the versions are the same (5.5.7) and the control panels do not report new updates available
It shouldn't be a big problem to fix since the "carousel" addon is working fine, so please fix the "image carousel" addon!!!

Toufiq Senior Staff

1 year ago

Same slide works fine on your site.

Claudio Asked this

1 year ago · edited

abolutely NO.!!! see here please..

https://www.scandella.net/public/wrong_1_scandella.png
https://www.scandella.net/public/wrong_2_resized_scandella.png
https://www.scandella.net/public/wrong_3_resized_mmairo.png
https://www.scandella.net/public/wrong_4_border_radius_not_working.png
https://www.scandella.net/public/wrong_5_border_radius_not_working_again.png

the "carousel" addon works well,
the "image carousel" addon is BAD...!!!

resizing windows does not maintain the correct aspect ratio of the image... fix it please!

in the images even the rounded corners do not work (border-radius)

Claudio Asked this

1 year ago

Is the team working on the issue I reported? Thanks.

Toufiq Senior Staff

1 year ago

Yes, I have shared your issue to our developer team. Thanks

Claudio Asked this

1 year ago

Thank you very much...

the reported problem is real and you can also find it in your site "SP Page Builder > Live Demo > Edit Page"
I activated the SPPB demo editor online then I added a row with 2 columns and finally I inserted an "image carousel" addon... activating the previews for the various devices in the top bar, the image is resized WITHOUT maintaining the correct aspect ratio.
See this summary document:

https://www.scandella.net/public/your_online_editor.pdf

Regards.

Toufiq Senior Staff

1 year ago

Will you please check this URL again?

Claudio Asked this

1 year ago · edited

still not working...the aspect ratio is not correct already from the desktop web page..the image is almost square

https://www.scandella.net/public/bad_aspect_ratio_1.png

Toufiq Senior Staff

1 year ago

Can you tell me size of the device?

Toufiq Senior Staff

1 year ago

You have to set the height.

Claudio Asked this

1 year ago

be careful... in Joomla the article has id 22, however when I preview it in the backend, the URL says &view=page&id=17

Claudio Asked this

1 year ago

the size of device is 22"

it's a Samsung Syncmaster P2270HD monitor, it has a 1920 x 1080 resolution

Claudio Asked this

1 year ago · edited

the height is already set to 750px
the page you created (id19) looks even worse
the one I put is actually an article (id17) and it behaves better however it still doesn't work well when the window is resized

Toufiq Senior Staff

1 year ago

Please check it real time device and let me know. Like, iPad, phone.

Toufiq Senior Staff

1 year ago

Check again this URL.

Claudio Asked this

1 year ago

OK !!!

Congratulations...!!!

now the image seems to have the correct proportions that are maintained even by reducing the window, however for some device settings (resolution), or window dimensions, it is cut by the container that is lower/smaller... the worst result is with the entire window of the desktop PC.

You should be close to the solution.
Also remember that the container is inside one of the 2 columns in the row (the right column is moved below reducing the size of the window) ... but you who are a professional probably know this well

Toufiq Senior Staff

1 year ago

Check again. Thanks

Claudio Asked this

1 year ago

no, the container still cuts the image... it is cut a lot... it is even wider than it is high, however the contained image maintains the correct proportions

Toufiq Senior Staff

1 year ago

Share a screenshot.

Claudio Asked this

1 year ago · edited

see hidden contents

Toufiq Senior Staff

1 year ago

Please watch the video.

Claudio Asked this

1 year ago

I don't understand what I have to do...
see hidden contents

Claudio Asked this

1 year ago

Strange... the page opened with Mozilla Firefox is squashed, the same page opened with Microsoft Edge is not... it is more regular.
however, a ONLY horizontal resizing always occurs while maintaining the same height, therefore varying the width always results in a distortion of the image.
All this does not happen in the "Carousel" add-on and the image is correctly resized both horizontally and vertically.

Toufiq Senior Staff

1 year ago

Firefox browser.

Claudio Asked this

1 year ago

The display in Mozilla Firefox is now correct but the resizing problem remains.

the problem also remains in Microsoft Edge see the screenshot

I also tried with another notebook and the problem is present there too (microsoft edge).

But basically, the "Carousel" add-on does not suffer from this problem and the resizing is always correct... "image carousel" has the problem.

Toufiq Senior Staff

1 year ago

Sorry in this way it doesn't work. Process is, Please check edting mode of front end and check your issue like this sizes.

320px

480px

540px

992px

Claudio Asked this

1 year ago

thanks for the support
by changing the parameters indicated you still do not get a well-proportioned image.

however I understood that the only solution to the problem is for you to write the entire add-on again because the width (and height) is changed "in steps" based on the height values which, if not set, inherit the standard ones of the component (eg data-height-xl="699" data-height-lg="500" data-height-md="500" data-height-sm="400" data-height-xs="301").

look at this:

https://www.scandella.net/public/inspection.png

and this (browser window shrunken):

https://www.scandella.net/public/inspection_2.png

since these CSS parameters (data-height-xl data-height-lg data-height-md data-height-sm data-height-xs) are specific to each single object, it is difficult to be able to change them with custom CSS (or you have to edit all the articles individually, and if there are a lot of them it becomes a significant problem):
do you have a solution to use custom values in the CSS of data-height-xl data-height-lg data-height-md data-height-sm data-height-xs ???

As I have already written other times, what I can't understand is how the "Carousel" add-on is perfect and adapts to any screen width, while "image carousel" has all these problems... ultimately it's just a matter of shrinking the image while maintaining the correct proportions!!!

Toufiq Senior Staff

1 year ago

This slideshow image dimension is not same

https://prnt.sc/tEOVF_wa6v7C

https://prnt.sc/szygH9MSwmKl

For this reason i had to set height 750px. Please check the settings.

Claudio Asked this

1 year ago

you need to check the Joomla article named "test-2" that has preview "https://www.scandella.net/it/?option=com_sppagebuilder&view=page&id=17"

you have created a SPPB page named "Hola" that has preview "https://www.scandella.net/it/?option=com_sppagebuilder&view=page&id=19"

now i have used 3 identical (geometry) images of height 750px, but you will notice that it is the width that is adapted with distortion of the image.

So, please check the Joomla article named "test-2", thank you.

Toufiq Senior Staff

1 year ago

Please check now the both URL.

Claudio Asked this

1 year ago

now it's much better even if the behavior is not yet that of the "Carousel" add-on, however in the last 3 smaller sizes (so also in mobile devices) the image is still strongly disproportionate.

if you take a look at these 2 articles, I used the "Carousel" add-on and the images are adapted perfectly... but they have the selection dots overlapping the image and I don't have the possibility to associate a link to the photo that refers to another complete gallery. (I had to put an external link)... the rounded edges of the image, and the colors of the dots I changed them via custom CSS since the add-on does not provide them as they are instead present in "image carousel" (to tell the truth there is the "border radius" control but it does not work as I have already reported)

https://www.mmairo.com/it/articoli/nissa-dining

https://www.mmairo.com/it/articoli/nissa-coffee

Toufiq Senior Staff

1 year ago

I told you previously that your image sizes is not same that you shown me as example. Try to understand.

Claudio Asked this

1 year ago · edited

ok, I was wrong.

now I used the images of the same dimensions (500x750px) but as you can see from this summary image, the proportions are not maintained.

https://www.scandella.net/public/same_problem.png

there are the screenshots of the smallest window size (PC desktop), then the one just enlarged by one step, and then one more... the subsequent steps present an acceptable image but which still does not respect the correct aspect ratio.

Toufiq Senior Staff

1 year ago

Check the image dimension

https://www.mmairo.com/images/articoli/Carlo/images/01_danese%20romeo%20carlo.jpg

https://www.scandella.net/images/chiara/chiara-1.jpg

Claudio Asked this

1 year ago · edited

what's the problem?
one is 600x750 and the other 500x750, but they are not used in the same carousel!!!
on the mmairo site they are all 600x750 and those used for tests in scandella.net are 500x750... the situation does not change! there is a resizing problem in the "image carousel" add-on (which is not present in the "carousel" add-on).

the height of the images is in both cases 750px as also specified for the height of the carousel!

As I said before the situation has improved, however in some cases the image is still strongly distorted... have you seen the file https://www.scandella.net/public/same_problem.png ?

what you see is absolutely not normal.

Claudio Asked this

1 year ago

here you can see the correct behavior of the "carousel" add-on

www.scandella.net/public/Carousel_perfect_resizing.mkv

here the incorrect resizing in Mozilla Firefox of the "image-carousel" add-on

www.scandella.net/public/image_carousel_on_mozilla.mkv

here the incorrect resizing in microsoft edge of the "image-carousel" add-on

www.scandella.net/public/image_carousel_on_microsoft_edge.mkv

Toufiq Senior Staff

1 year ago

This site used custom id and css. Then user made custom css code inside the custom.css file. Also, I have used the same css code and same layout on your article (id 17). Please compare now your design.

Claudio Asked this

1 year ago

it's not good... before the image distortion was only with very small screen sizes, now the aspect ratio becomes bad even before the right column containing the text is moved under the image (both Microsoft Edge and Mozilla Firefox)

see this screenshot

https://www.scandella.net/public/modified_css.png

which lines did you change or add to the custom css? Thank you.

Toufiq Senior Staff

1 year ago

If you remove the custom css class and code from this site then you will get same issue on this site also(link hidden content). Now i have removed the custom css code from the custom.css file.

Claudio Asked this

1 year ago

Thanks for the support - so what are the next steps to get to the final solution of the problem?

Claudio Asked this

1 year ago

Good morning and thanks for the assistance...
I don't want to sound rude, but I downloaded the "smartslider3" extension and it behaves perfectly at any browser window size... you can check the "test-2" article now.
It seems very strange to me that you can't fix the "image gallery" add-on to make it as perfect as the "Gallery" add-on.

Toufiq Senior Staff

1 year ago

We’ve used the Owl Carousel JS for this slideshow. If you need more precise control or adjustments beyond the current settings, you may need to add custom CSS until the Page Builder update is released.

Claudio Asked this

1 year ago

A new version of SPPB has been released but the problem has not been fixed... bad... very bad.