Gallery displays fine when I’m logged into the site, however when I check from a different browser, or log out of my admin user in the same browser and try to view, the gallery isn’t working correctly.
When not logged in, it will briefly display the images in the default format (full width, stacked), then they all become hidden. You can click on them, and still view the images directly (but not in lightbox).
When I’m logged into the site, everything works as expected, masonry layout, lightbox etc.
I have permitted /wp-admin/admin-ajax.php via .htaccess, which works with another plugin that I use that requires ajax. But I have also toggled ajax functionality off since it was marked beta, and there did not seem to be any difference in behavior.
The page I need help with: [log in to see the link]
The problem is caused by Autoptimize (@optimizingmatters). It’s the second case in few days, I don’t know if they made some update recently that causes the issue.
AO 2.3.2 was released 22 days ago, but there were only minor changes to the JS minifier. I see you’re also using Cloudflare’s rocketloader, that might … complicate things as well. But anyway; I’d be happy to help troubleshoot, but I’d need to see it broken in order to do so I’m afraid.
have a nice weekend,
I put it back to broken by re-enabling the JS minifier. I also disabled rocketloader just so it doesn’t do anything weird, so you can take a look.
All caching cleared.
Happy to test anything as well.
can’t access it I’m afraid, I simply get “Forbidden”?
Oh sorry! There’s some outside country level restrictions that reduces attacks on the site since this mostly services a very local community. I’ve removed it, and you should be able to access now.
@bofslime OK, so I see “jQuery is not defined” on the browser console, which means you removed
js/jquery/jquery.jsfrom the comma-separated list of AO JS optimization exclusions. add it back in and see if that fixes the gallery. If not have a look at the browser console to see what other errors you see. I’ll be happy to assist more if need be 🙂
Fantastic, that was indeed the issue. Not sure when that got removed. Thanks very much for the assistance!
There is a new error that popped up after the fix:
autoptimize_6bcfc3f45706316275f3744b53c47e6e.js:1244 Uncaught TypeError: jQuery(...).popover is not a function at autoptimize_6bcfc3f45706316275f3744b53c47e6e.js:1244 at dispatch (jquery.js:3) at r.handle (jquery.js:3)
Doesn’t seem to affect anything visible, and I seem to have a similar problem with a theme element.
Spoke too soon, seems to be a random failure where it breaks again, and I see the following:
(index):1 Uncaught TypeError: jQuery(...).finalTilesGallery is not a function at (index):1 (anonymous) @ (index):1 setTimeout (async) (anonymous) @ (index):1 i @ jquery.js:2 fireWith @ jquery.js:2 ready @ jquery.js:2 K @ jquery.js:2
Apparently this was caused by when I re-enabled: “Let Autoptimize also extract JS from the HTML”
Edit: OK, it all looks theme related. I disabled JS optimization completely, and I see the error more clear to do with the bootstrap. Will need to look into that further.
Thanks so much again for your help!
Alright, after much testing, it does look like Autoptimize JS optimization IS causing that issue as well. Likely something else I need to exclude.
JS optimization creates these issues:
Uncaught TypeError: $carousel(...).carousel is not a function at (index):78
Interestingly, With another plugin called “Fusion Page Builder” (not used on this page), and Autoptimize, I get the additional error:
Uncaught TypeError: jQuery(...).popover is not a function at autoptimize_e0547ceebe828aaf894a60aa53a7bbe3.js:1244 at dispatch (jquery.js:3) at r.handle (jquery.js:3)
(This works fine with Fusion Page Builder enabled, without Autoptimize JS optimizations)
And the “Let Autoptimize also extract JS from the HTML” option breaks the gallery as well.
Woo, plugin compatibility is pretty tough.
I’m going to leave it in the state where only JS optimization is enabled, and not the extract JS from HTML option.
I see 2 errors on the console;
TypeError: $carousel(...).carousel is not a function photo-gallery:82:9
TypeError: jQuery(...).popover is not a function autoptimize_e0547ceebe828aaf894a60aa53a7bbe3.js:783:1
the 2nd one is breaking the execution of the autoptimized file, so we need to fix that. the problem however is the error also occurs when AO is disabled (which you can trigger by adding
?ao_noptimize=1to the ULR);
TypeError: $carousel(...).carousel is not a function photo-gallery:1858:9 TypeError: jQuery(...).popover is not a function main_backend.js:116:1
so this popover-error is not due to AO. I see you have CloudFlare rocket-loader active, that can cause … issues as well, maybe try deactivating that?
alternatively you could exclude
themes/evolve/library/media/js/) OR you try with the “try/catch wrapping”-option in AO.
Woo, plugin compatibility is pretty tough.
It can be, sometimes 🙂
So I have rocketloader disabled, and just double checked to ensure it was still disabled. So that’s all off.
I also have my WP Cache disabled as well while trying to sort this out, and I put Cloudflare into development mode while I’m testing with an incognito window of chrome and Ctrl+F5 to refresh to ensure nothing is cached. I think CF will auto-disable dev mode after 3 hours, but that shouldn’t be a problem when I’m done, and leave it state as noted below.
We’re a non-paid volunteer board HOA, and I was trying to build this site using off the shelf tools to make things easier for someone else to take over administration eventually. I’m also a Network Engineer, and systems admin, so web development is not my strong point. So for some pages I used a builder for page formatting. Right now that builder plugin is Fusion Page Builder. It’s actually not even active on the photo Gallery page, which is interesting.
Looks like the .popover error is directly coming from that Fusion plugin, even though I’m not using it on this page. I’ll have to submit the bug with them.
What’s interesting is the combination needed for the .carousel error. With the Fusion plugin active, it presents whether AO is active or not. When I disable the Fusion plugin, The error is still present until I deactivate AO.
I then tested .carousel error and found it to be present even with all other plugins deactivated except for AO, disabling AO clears the error. (I cleared the AO cache as well to validate it wasn’t storing some of this from when the Fusion Plugin was active.)
I will leave it in the state where Fusion is deactivated, and AO is active with JS optimized, so you can see when setting the
?ao_noptimize=1fuction. CF Rocketloader is still disabled.
themes/evolve/library/media/js/and/or setting “catch”wrapping” option did not correct.
Thanks again for your efforts on this.
well, you know what; I opened the page and the gallery displays? 🙂
to fix the .carousel issue excluding
Wow, you know what. I enabled “Let Autoptimize also extract JS from the HTML.” and changed nothing else – and it fixed the .carousel error.
I didn’t try that because it broke the gallery before, but I just figured out why.
If I enable the Fusion Builder plugin again, having extract JS from HTML breaks the gallery! Disable that feature, and the gallery returns, and I just get the additional JS error from the Fusion plugin.
So the additional error that the Fusion plugin creates, breaks the gallery when “extract JS from HTML” in AO is enabled. And with the Fusion plugin disabled, I get the .carousel error only when I enable AO JS optimization, without “extract JS from HTML” also enabled.
Adding the additional exclusion as suggested did not fix the .carousel error by itself. I think I’ll just leave the additional extract option enabled as the final fix. And then just bug the other plugin developers to address these other issues. Either way, site has the functionality I need.
Thanks so much again, I learned a bit here.
- The topic ‘Gallery does not displays properly when NOT logged into WP.’ is closed to new replies.