External images break masonry grid

[techtherapy]

I’ve been having a problem with trying to integrate a CDN for my images. I’ve been using the WP Rocket caching plugin, which works great. Through that I then enabled the CDN (I use MaxCDN). The masonry grid on the homepage then broke – see the attached image.

So, it seemed to be an issue with WP Rocket. I contacted the developers and they tested by creating 2 clones of my site on wpstagecoach. They disabled the WP Rocket plugin on both clones. One version had the images loading from the original domain, mexart.co.uk – with the result that the masonry grid was broken. The second version had the images loading directly from wpstagecoach – with the result that the masonry grid displayed correctly.

Their conclusion was that there is an issue with the page builder/masonry grid when loading external images. They also made this video explaining their findings:

https://infinit.io/_/geXjehj

Attachments:

You must be logged in to view attached files.

[Swift Ideas – Ed]

Hi @techtherapy

This sounds like the image resizing script we use isn’t able to resize the imagery to the right size – as it requires access to the file directly via the WordPress filesystem to be able to resize.

Are you able to provide us with access to the test URL where the issue is visible, and an admin login with the Solid Code Theme Editor plugin, so that we can do some debug?

Thanks,

– Ed

[techtherapy]

This reply has been marked as private.

[Swift Ideas – Ed]

The issue is that the images can’t be resized, as I thought. I added some custom css to resolve this for you:

.multi-masonry-items .multi-masonry-img-wrap > img {
    object-fit: cover;
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
}

The only issue with not being able to resize images with this kind of layout is that it requires the images to be the right aspect ratio, so they should all be 4/3 or 1/1 dependent on your choice.

– Ed

[techtherapy]

thanks. I added the code but it made no difference.

[Swift Ideas – Ed]

Try clearing your browser cache? I now don’t see black spaces on that wpstagecoach version of your site.

– Ed

[techtherapy]

thanks Ed, I cleared browser cache and the WP Rocket cache. I found that the fix works fine, until I enable the CDN on the live site, at which point it breaks again. However, on the test site it seems to work ok. So I’m unsure where the problem lies or how to go about troubleshooting this further.

[Swift Ideas – Ed]

Hi @techtherapy

Can you check that the custom css is present on that live site – I take it that you have copied it across to the other site’s custom css box? Is the live link updated for us to check?

– Ed

[techtherapy]

Hi Ed,

yes just double checked and it’s there. I’ve re-enabled the CDN for images, so the front page masonry is now broken.

mexart.co.uk

thanks.

[Swift Ideas – Ed]

The css is broken, the > should be a >

https://www.dropbox.com/s/wibtfb2riw6srjd/Screenshot%202016-09-04%2018.45.49.png?dl=0

– Ed

[techtherapy]

Brilliant! now fixed, thanks for your help 🙂

[Swift Ideas – Ed]

Happy to help! Marking as resolved.

– Ed