Why does my gallery look like this?!

Hi @ristretto6

The page https://campthundercraft.com/camper-resources that has the galleries appears to have a gallery that is password protected and so I can’t view the gallery.

Kindly share the password with me so that I can be able to view the gallery layout from my end before I can advise further on this. You can change the password later on once the issue is resolved. Thanks in advance for doing so.

Kind regards,
Elvis.

I actually do need to keep it protected with that same password which is why I included the screenshots. Are those not enough to show what the display issues are? I unfortunately can’t change the password mid-season as this is what all of our campers are using to access the site. Is there a way to share it with you privately if needed?

Hi @ristretto6

You can share the password with me via email at “elvis at fooplugins dot com” and I’ll take it from there after that.

Kind regards,
Elvis

Hi @ristretto6

Thanks for sharing the password with me.

After investigating this, I have realized that the issue here is one with HTTP and HTTPS on your site. If you check the developer console there are a few errors relating to this problem but in short, your site is being loaded with mixed content. The error message is:

Mixed Content: The page at 'https://campthundercraft.com/camper-resources/?ppwp=1' was loaded over HTTPS, but requested an insecure stylesheet 'https://campthundercraft.com/wp-content/plugins/foogallery/extensions/default-templates/shared/css/foogallery.min.css?ver=2.2.16'. This request has been blocked; the content must be served over HTTPS.

What this means is the page itself is saying it is HTTPS secure while some of the assets being loaded into the page are being supplied as HTTP unsecure. Most modern browsers will block all unsecure content from loading at all, and in this case, the FooGallery CSS stylesheets are being delivered as HTTP and are therefore not being loaded by the browser. This results in the alignment issue as there is no CSS on the page at all to style the galleries.

Once this mixed content issue is resolved the gallery issues should also disappear. One thing you can try as a workaround is to enable the FooGallery > Settings > Advanced > Force HTTPS option.

However, if the solution above does work, you can go through this guide to fix mixed content errors on your site: https://www.wpbeginner.com/plugins/how-to-fix-the-mixed-content-error-in-wordpress-step-by-step/

Hope this helps.

Kind regards,
Elvis.

The plugin you suggested did not fix the issue, and I’m not sure how to fix the issue manually when it sounds like it’s being caused by Foogallery itself, and that Foogallery is the culprit that is displaying insecure content. Can you please let me know how to fix that specifically? Or is there another workaround here?

Thanks,

Hi @ristretto6

First, it’s important for me to clarify that FooGallery cannot cause a mixed content error on any site and so kindly note that FooGallery is not causing this issue.

We do understand that the mixed content error is a common issue that can affect any theme and/or plugin’s functionalities and that’s why for FooGallery, we came up with a workaround in case such an issue did occur, which is to enable the FooGallery > Settings > Advanced > Force HTTPS option.

If this doesn’t work for you, kindly try to use a plugin such as the Really Simple SSL plugin which is great at resolving mixed content errors. I’d also suggest you get in touch with your developer or even hosting provider, who would be able to pinpoint exactly why the HTTPS assets are being loaded as HTTP a web page that was requested to be fetched as HTTPS.

Kind regards,
Elvis.