Our problem happens VERY frequently but not reliably - we haven't been able to isolate exactly what causes the issue.
Often when we navigate to a slide, the images appear squished - way too tall or way too wide. This seems to happen on slides that are not initially visible. Refreshing the entire page will usually clear the issue for the slide, as though we're forcing a recalculation of the images with that particular window size.
I've tried setting the width to be a percentage of the project and screen width (and letting the height calculate automatically), and setting the height to be a % of the project / screen height (and allowing automatic width). It happens with PNG and JPG files.
It seems to happen with images that have been replaced (swapped out for an updated version of the image), as thought the system is locked to the original proportions -- this is just a guess, obviously.
Duplicating the problem is problematic, because refreshing the page usually clears the issue, for the moment.
I tried creating a class with: height: auto !important;
and adding it to some problematic images. They displayed with the correct proportions, but at the wrong position on the page. Other images in the same slide were squished as usual. So, a partial solution, of sorts. (second attached image)
I'm at the point where I'm looking at recreating every slider from scratch, just to try to avoid the problem. I'm hoping you have a better solution!
Wow, first of all, let me tell you that I am impressed by the slider you've created on https://ifg.thewilsongroup.net/ We are always happy if someone can use our product so professionally.
This issue can happen if you use an image optimizer/preloader plugin because it can break LayerSlider's built-in solution.
I would like to ask you about what you said in your message:
"It seems to happen with images that have been replaced (swapped out for an updated version of the image)."
Please tell me more about this. Are you trying to replace the image layers on-the-fly with a 3rd party plugin? Because that won't work.
Thank you for the feedback! I really appreciate the compliment.
I've just checked to make sure the optimizer plugin was disabled (it was), and I don't think we're doing anything else for images.
When I mentioned that some images had been replaced, I meant the source image -
We first add image to our slider, position & size them, and set the transitions. At some later time, we may replace the image with a different one - we swap the source image for something else in the media library.
BTW, I am doing modifications thru a plugin, but it's just adding and removing classes to existing layers.
I think that if you swap an image to another with a different aspect ratio, that can cause an issue like this (but only if you've resized the original image in the project editor, so its width and height properties were not auto (empty))
Hmm.. I resize most of our pictures in order to place & size them correctly within the slide. Usually they are set to a percentage of the slide width, and the height is left at auto.
Perhaps I'm misunderstanding the intent? Swapping images allows us to reuse configurations without building everything from scratch, and sizing by % allows us to easily fit image to our compositions. Should I not be using them this way?
Thanks for the assistance. We're eager to isolate and correct the problem.
Our problem happens VERY frequently but not reliably - we haven't been able to isolate exactly what causes the issue.
Often when we navigate to a slide, the images appear squished - way too tall or way too wide. This seems to happen on slides that are not initially visible. Refreshing the entire page will usually clear the issue for the slide, as though we're forcing a recalculation of the images with that particular window size.
I've tried setting the width to be a percentage of the project and screen width (and letting the height calculate automatically), and setting the height to be a % of the project / screen height (and allowing automatic width). It happens with PNG and JPG files.
It seems to happen with images that have been replaced (swapped out for an updated version of the image), as thought the system is locked to the original proportions -- this is just a guess, obviously.
Duplicating the problem is problematic, because refreshing the page usually clears the issue, for the moment.
I tried creating a class with: height: auto !important;
and adding it to some problematic images. They displayed with the correct proportions, but at the wrong position on the page. Other images in the same slide were squished as usual. So, a partial solution, of sorts. (second attached image)
I'm at the point where I'm looking at recreating every slider from scratch, just to try to avoid the problem. I'm hoping you have a better solution!
Attached files: squished.png
squished-2.png
Hello Philip,
Wow, first of all, let me tell you that I am impressed by the slider you've created on https://ifg.thewilsongroup.net/
We are always happy if someone can use our product so professionally.
This issue can happen if you use an image optimizer/preloader plugin because it can break LayerSlider's built-in solution.
I would like to ask you about what you said in your message:
"It seems to happen with images that have been replaced (swapped out for an updated version of the image)."
Please tell me more about this. Are you trying to replace the image layers on-the-fly with a 3rd party plugin? Because that won't work.
Best Regards,
George | Kreatura Dev Team
Thank you for the feedback! I really appreciate the compliment.
I've just checked to make sure the optimizer plugin was disabled (it was), and I don't think we're doing anything else for images.
When I mentioned that some images had been replaced, I meant the source image -
We first add image to our slider, position & size them, and set the transitions. At some later time, we may replace the image with a different one - we swap the source image for something else in the media library.
BTW, I am doing modifications thru a plugin, but it's just adding and removing classes to existing layers.
I see... and the dimension/spect ratio of the new images were the same as the replaced ones?
Best Regards,
George | Kreatura Dev Team
Not necessarily - which is why I think this may be the cause.
I was using the image-swap method quite a bit, as a way to create multiple slides using similar animation but different images & text.
I think that if you swap an image to another with a different aspect ratio, that can cause an issue like this (but only if you've resized the original image in the project editor, so its width and height properties were not auto (empty))
Best Regards,
George | Kreatura Dev Team
Hmm.. I resize most of our pictures in order to place & size them correctly within the slide. Usually they are set to a percentage of the slide width, and the height is left at auto.
Perhaps I'm misunderstanding the intent? Swapping images allows us to reuse configurations without building everything from scratch, and sizing by % allows us to easily fit image to our compositions. Should I not be using them this way?
Thanks for the assistance. We're eager to isolate and correct the problem.
Yes, this should work fine, but we will make some tests on our server.
Best Regards,
George | Kreatura Dev Team