I have encountered problems using several templates and several components:
Issue: When the template loads the component, usually the images, icons or other photos are distorted. Once I reload the page the image will correct itself. This happens in many of the components. What is the cause? How can I prevent this?
Thanks
Please let us know what template you're using and also a link to your page so we can check things out.
Trying to guess at this though, I'd say that you're using a gantry based template and you have the "smart load" feature turned on. This feature only loads the images that the user can see on the screen and waits to load the rest til the user scrolls down the page.
This is a nice feature and speeds up the page, but it does require that your images have a specified width and height to work right every time. It's best to turn this feature off when components are the issue as those are likely dynamically generated images such as user avatars or photo uploads and such.
I've encountered this issue on a number of RT templates... and found that - indeed - turning off the smart load feature addresses the problem completely.
But... I LOVE the smart load. I hope you (wonderful) RT gurus can address this issue in a future Gantry update.
Yeah, this is a trick. 15 years ago, it was pretty standard that you had the image sizes in the code and that was the best thing. Since then, people have become very lazy and all browsers and website systems are able to display images at their size anyways, so the size tags were dropped...now it's tough again because you need to reserve space on the page, but don't want to load the image yet, so we need the sizes again.
For now, until there is another solution, if you can put in image sizes, that will help out, but I know that's tough with components or auto generated thumbs and stuff.
Putting in image sizes for general pages is no biggie. But a fine art gallery site with Phoca Gallery is:
morriswhiteside.com
(See artist pages.)
Nonetheless, I (for one) look forward to future RocketTheme releases.