Image Carousel Images Distortion - Previously Everything Worked Fine - Question | JoomShaper
🎃 Halloween Sale is Live! Get 35% OFF on all plans. Sale ends soon! Get Offer

Image Carousel Images Distortion - Previously Everything Worked Fine

Claudio

Claudio

SP Page Builder 5 months 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 !!!

0
52 Answers
Toufiq
Toufiq
Accepted Answer
Senior Staff 5 months ago #193186

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)

0
Claudio
Claudio
Accepted Answer
5 months ago #193232

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.

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 5 months ago #193241

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

0
Claudio
Claudio
Accepted Answer
5 months ago #193266

Oh my god....

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 5 months ago #193268

Sorry! Still it doesn't work.

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

0
Claudio
Claudio
Accepted Answer
5 months ago #193282

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

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 5 months ago #193288

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;
}
0
Claudio
Claudio
Accepted Answer
5 months ago #193290

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)

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 5 months ago #193337

Both site Page Builder version is same. Please check.

0
Claudio
Claudio
Accepted Answer
5 months ago #193353

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!!!

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 5 months ago #193362

Same slide works fine on your site.

0
Claudio
Claudio
Accepted Answer
5 months ago #193373

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)

0
Claudio
Claudio
Accepted Answer
5 months ago #193532

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

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 5 months ago #193539

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

0
Claudio
Claudio
Accepted Answer
5 months ago #193723

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.

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 5 months ago #193949

Will you please check this URL again?

0
Claudio
Claudio
Accepted Answer
5 months ago #194009

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

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 5 months ago #194037

Can you tell me size of the device?

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 5 months ago #194041

You have to set the height.

0
Claudio
Claudio
Accepted Answer
5 months ago #194114

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

0
Claudio
Claudio
Accepted Answer
5 months ago #194112

the size of device is 22"

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

0
Claudio
Claudio
Accepted Answer
5 months ago #194113

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

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 5 months ago #194149

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

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 5 months ago #194151

Check again this URL.

0
Claudio
Claudio
Accepted Answer
5 months ago #194160

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

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 5 months ago #194162

Check again. Thanks

0
Claudio
Claudio
Accepted Answer
5 months ago #194164

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

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 5 months ago #194179

Share a screenshot.

0
Claudio
Claudio
Accepted Answer
5 months ago #194191

see hidden contents

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 5 months ago #194210

Please watch the video.

0
Claudio
Claudio
Accepted Answer
5 months ago #194216

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

0
Claudio
Claudio
Accepted Answer
5 months ago #194225

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.

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 5 months ago #194232

Firefox browser.

0
Claudio
Claudio
Accepted Answer
5 months ago #194258

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.

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 5 months ago #194261

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

0
Claudio
Claudio
Accepted Answer
4 months ago #194503

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!!!

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 4 months ago #194657

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.

0
Claudio
Claudio
Accepted Answer
4 months ago #194700

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.

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 4 months ago #194789

Please check now the both URL.

0
Claudio
Claudio
Accepted Answer
4 months ago #194813

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

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 4 months ago #194820

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

0
Claudio
Claudio
Accepted Answer
4 months ago #194854

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.

0
Claudio
Claudio
Accepted Answer
4 months ago #194891

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.

0
Claudio
Claudio
Accepted Answer
4 months ago #194897

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

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 4 months ago #194978

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.

0
Claudio
Claudio
Accepted Answer
4 months ago #195020

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.

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 4 months ago #195075

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.

0
Claudio
Claudio
Accepted Answer
4 months ago #195103

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

0
Claudio
Claudio
Accepted Answer
4 months ago #195175

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.

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 4 months ago #195286

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.

0
Claudio
Claudio
Accepted Answer
3 months ago #198232

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

0