Relayout after images load

  • Hello, I’m very happy with your plugin, and it also seems that you’re very responsive. I chose this grid plugin after reviewing about half a dozen, and I’m very thankful for its quality, simplicity, and customizability.

    However I am having a problem with the layout. Grid items with featured images will, on the first page load, render incorrectly on the first time that the page is loaded. Refreshing fixes the problem, but this won’t do my first users any good.

    You can hopefully see the problem on your first load of enfascination.com. If not, I’ve shared screenshots below.

    I did my homework. My problem is similar to this one:
    https://www.ads-software.com/support/topic/chrome-issue-5/
    I tried unloading all other plugins, changing the layout style between Pinterest and rows, and changing the max number of posts all the way down to 10. Nevertheless, I got the problem in Chrome and Safari. Only Firefox continued to run and rerun the layout algorithm until all images had fully loaded.

    I am comfortable in the code and would be happy to help in the troubleshooting. But I’d still appreciate getting pointed in the right place. Can you tell me the name of your layout function, and the name of the event that you’re re-triggering it from? Or is there some option I’m missing that would spare me this problem?

    Here are screenshots from three browsers (in Mac):
    Chrome (buggy): https://enfascination.com/cloud/index.php/s/L7GKKUsGB6zKS5H
    Safari (buggy): https://enfascination.com/cloud/index.php/s/CvFXBOl6dd6sAl7
    Firefox (correct): https://enfascination.com/cloud/index.php/s/LRnVnOwpOdDAeCT

    Versions:
    WordPress: 4.9.7
    WP Ultimate Post Grid: 2.7.1
    Theme: custom

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter enfascination

    (@enfascination)

    Digging deeper, and reading other comments, I tested whether one of the default themes would resolve the issue. It turns out that it does. The problem is something that my theme is or isn’t doing. But I have no idea how to diagnose what. And it seems like a tall order to switch themes to make a plugin work. Any good ideas on next steps?

    Plugin Author Brecht

    (@brechtvds)

    If you upload a zip file of your theme over here I’ll do some testing:
    https://dbinbox.com/bootstrappedventures

    Thread Starter enfascination

    (@enfascination)

    Sent. Thank you!

    Plugin Author Brecht

    (@brechtvds)

    Just tested your theme and I don’t seem to be experiencing the issue on my test site. Tried both Chrome and Safari.

    Maybe a fix for your website is to manually trigger a relayout? This JS code would trigger a relayout after half a second, for example:

    jQuery(document).ready(function() {
    setTimeout(function() {
        jQuery('.wpupg-grid').each(function() {
            jQuery(this).isotopewpupg('layout');
        });
    }, 500);
});
    Thread Starter enfascination

    (@enfascination)

    So, plug this into script tags at, say, the very bottom of the footer?

    Plugin Author Brecht

    (@brechtvds)

    That should do it, yes.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Relayout after images load’ is closed to new replies.