Hi @sleinen ,
Thanks for the detailed report, and your instinct about the transients sounds right.
Before anything else: nothing has been lost. Every file is still on the server and returns a normal response, and when I load the page in a browser right now all appear. Your gallery data and your image files are both fine.
Here is what likely causes the blank squares. That gallery uses the Automatic layout with “Enable Lazy Loading?” turned on. When lazy loading is on, Envira sends each image to the browser with a 1 pixel transparent placeholder in the srcset attribute and keeps the real image address in a separate data-envira-src attribute. Our JavaScript then swaps the real image in as you scroll. Browsers always prefer srcset over src, so until that swap happens the image is an empty box.
The caching is the second half of it. Envira saves the finished gallery HTML in a transient and keeps it for 24 hours. Whatever the gallery looked like on the render that filled the cache is what every visitor gets until that copy is cleared. That fits your report exactly: you clear it, you get a good copy, then a later render puts a bad copy in and it sticks for days.
Two steps:
- For now, keep using “Flush All Envira Cache” under Envira Gallery > Tools, in the Envira Cache section. That is the right immediate fix.
- To stop it coming back, edit the gallery, open the Config tab, and uncheck “Enable Lazy Loading?”, then click Update. With lazy loading off, the real image address goes straight into the image tag, so your photos show up whether or not our JavaScript runs. A stale cached copy can no longer be a blank copy. The tradeoff is that all 24 images begin downloading when the page opens instead of as the visitor scrolls, so the first load is heavier. On a portfolio page I think that is worth it for photos that always appear.
One thing to avoid. Please do not use the “Turn Gallery Cache Off” button on that same Tools screen. I checked our code today and that button does not work. It saves the setting and the screen flips over to say the cache is off, but the front end never reads that setting, so it keeps serving cached HTML. It looks like it worked when it did not. I am reporting that to our developers today. If you do want Envira’s gallery caching genuinely off, the way that works right now is to add cache=”false” to the shortcode:
[envira-gallery id=”1018″ cache=”false”]
Use cache=”false” and not cache=”0″. Only the first one is read correctly.
Something that would really help me. Next time the squares come back, before you clear anything, open the page and view the page source (right click, “View Page Source”), then search it for data-envira-src. Tell me whether you find it. Also press F12, open the Console tab, reload, and let me know if there are red errors. If data-envira-src is there and you see a JavaScript error, something else on the page is stopping our script. If data-envira-src is missing or blank, the cached HTML itself is the problem. Those need different fixes, and that one check tells me which one you have.
Last note, and this one is about your host rather than Envira. Your pages are served from a full page cache that does not vary by device. I requested your gallery page as an iPhone and got the identical desktop copy back. Envira builds separate desktop and mobile gallery HTML, so a page cache that ignores the device can hand the wrong version to a visitor. That is not what is causing your blank squares, but it is worth knowing if you ever see mobile visitors getting desktop sizing.
Thanks again for reporting this so clearly. Step 2 should settle it for good, and I will follow up here once the cache button is fixed on our side.
Best,
Mihai
