OnPageLoad, wrong aspect ratio

I just noticed this same problem today on some of my sites. It seems to happen mainly on mobile devices.. Still figuring out what’s going on here, but I will work on it the coming days.

It happens on mobile devices, too, but it also occurs on desktop devices. I tried different browsers, too, too avoid that any browser extensions interfere with the plugin. Could not find the reason, however.

Thank you for your support!

I think I figured out the cause of the problem. The plugin was showing the wrong aspect ratio on some of my sites as well, and it turned out that the problem was that the images were set to max-width: 100% in CSS. This is all fine, but whenever this code appears for images it is important that it is also accompanied by height:auto. Otherwise the aspect ratio’s may get screwed up on smaller screen sizes.

So what I would like to suggest you is to look inside your CSS code for something like this:

img {
  max-width: 100%;
}

and change it to

img {
  max-width: 100%;
  height: auto;
}

If it works I’ll fix it by forcing this behavior for RGG images in the next update.

I have added the line img {height:auto;} to the CSS of RGG 2.0.3
Please update and let me know if it worked out for you

I have a similar problem.

An other problem is, that the gallery is not over the full width of the page any more…

https://www.gnilebein.de/4233/portrait-fashion-shooting-mit-svenja/

Could you have a look at my page?

Hello Jules,

thanks for your efforts.

I updated the plugin, deleted browser cache, checked my galleries. Unfortunately, the problem still exists.

I manually added the css line to my theme’s custom css to see if it works, but it failed.

So updating the plugin and/or adding “height:auto” to the css did not fix the bug, I’m afraid ??

@gnilebein. The CSS and javascript files aren’t loaded… Did you unregister some scripts or styles in your functions.php files?

@stephanfranz could you try and disable your caching plugin for a moment to see if that makes a difference?

You sir are a true genius.

I just deactivated following plugins:
– Autoptimize
– BJ Lazy Load
– Check and Enable GZIP compression
– Gator Cache

Gallery looks fine now, as expected. Will activate the plugins step by step to see which one interferes with RGG. Will let you know once I know which one to blame.

@stephanfranz looks like some code was injected in the gallery. Is see stuff like: data-lazy-srcset with a whole bunch of URLs. Probably this is part of your cache plugin function.

If you find the lazy load options somewhere in your plugins and you can point me to the plugin and the setting that causes is, that would be a great help for me to improve RGG. Thanks!

My 2 bucks are on the BJ Lazy Load thing ??

The plugin “BJ Lazy Load” is to blame. deactivating this plugin fixes the issue.

However, I’m not sure yet if only deactivating this plugin might have solved the issue, or if it is a combination of both, deactivating BJ Lazy Load and adding your suggested CSS line to the custom css option of my wordpress theme.

I’m happy though, it now looks great again and you did a great job. Thank you so much!

@stephanfranz Cool! Glad it’s solved for you. Feel free to thank me with some stars ??

I will have to look into the lazy load thing, because this is something that might be supported by more and more themes… RGG waits for all images to be loaded before it calculates the aspect ratios, but if a theme or a plugin causes lazy loading of the images, this means that RGG only knows about the first images that were loaded, and all other images will have an aspect ratio of 1:1

All Lazy Load solutions don’t work with this absolutely necessary plugin (it should be a native option of wordpress galleries). Any solution for native lazy load support?

@alexandrost I’m currently rewriting RGG Pro so that the image grid is created before any images are loaded. This should work seamlessly with lazy load plugins. I will take it into account during the test phase. Some of the new zero-configuration pro features might eventually make it to the free plugin as well.

• This reply was modified 8 years ago by Jules Colle.