- This topic has 25 replies, 6 voices, and was last updated 1 year, 5 months ago by Leo.
July 17, 2018 at 7:57 am #625813Theo
Hi, I am using Lightweight Grid Columns (LGC) to create a 2-column “chequerboard” of images and title text (tablet and desktop sizes, mobile is stacked). More precisely, each row is 50% width image, 50% title. 4 Rows in total, 1st row image on the left, 2nd row image on the right, etc. I’m setting margins and padding to 0 for the columns and using flexbox to completely fill the image column div. The end effect is that the images are touching at the corners, hence why I call it “chequerboard”.
When I activate the lazyload option of WP Rocket, this no longer works: additional white space is added by lazy-loading. If the images are already positioned in the viewport when reloading the page, they are positioned correctly (chequerboard). But when not already in the viewport and when scrolling to make them visible, additional white space is inserted between the rows. It looks as if the lazyload script is taking the full original height of the img. Disabling lazyload for these images stops this from happening, but increases page load time of course.
Would you know of any way to create this visual effect, while being compatible with WP Rocket’s lazy load? Preferable with LGC, but if not, whatever works.GeneratePress 2.1.3GP Premium 1.6.2July 17, 2018 at 11:25 am #625987LeoStaffCustomer SupportJuly 17, 2018 at 1:16 pm #626040Theo
Their support couldn’t really help out. They have an article up at https://docs.wp-rocket.me/article/278-common-issues-with-lazyload . Perhaps this is a case of their first bullet : Grid layouts that use fixed positioning/fixed widths . Up to you to confirm, that’s beyond me. Any suggestion for a solution (different grid?) would be greatly appreciated (if indeed possible) !July 17, 2018 at 2:41 pm #626108LeoStaffCustomer Support
Couple more methods for the columns but I’m not sure if they will work.
Unfortunately I’m not familiar with with how WP Rocket works.
Perhaps try a different lazy load solution?July 18, 2018 at 3:00 am #626395Theo
As Lightweight Grid Columns uses the unsemantic grid too, I believe those two options will not work. I’ll see if Gridable would be an option.July 18, 2018 at 8:51 am #626722LeoStaffCustomer SupportJuly 18, 2018 at 3:08 pm #626993Theo
Solved it by not using Lightweight Grid Columns (LGC) and creating the complete layout for that page section with html div-s in the unsemantic grid. Images are now positioned correctly with WP Rocket’s lazy loading. So there’s something in the LGC code, not in the unsemantic grid, that does not play nicely with Rocket’s lazy load.July 18, 2018 at 3:48 pm #627004LeoStaffCustomer SupportJanuary 24, 2019 at 3:38 am #790795Matthew
Just to follow up on this, I have had the same issue LGC doesn’t work with Lazy Loading, tried a few different plugins. 🙁
You are right Leo though that Gutenberg does work with Lazy Loading.
It’s a shame as I still way prefer LGC to Gutenberg as LGC has way easier responsive flexibility.January 24, 2019 at 9:04 am #791187TomLead DeveloperLead DeveloperApril 9, 2019 at 3:48 am #863720Emil
I had the same problem but tried to disable equal height in the shortcode like Tom said and it worked for me using Lazy Load by Wp Rocket.
But what else happens when adding equal_heights=”false”? Is there something else I need to know before adding that to every LGC shortvode on the whole site?April 9, 2019 at 10:04 am #864273TomLead DeveloperLead Developer
Ok, great! Is there a good and simple way to add equal_heights=”false” to every LGC shortcode without doing it manually on every page?April 10, 2019 at 9:44 am #865256Emil
I noticed there are more problems with the Lazy Load plugin activated.
The mobile header logo changed in size and some images didn’t show until I refreshed the page.
I guess I have to inactivate the plugin and wait for a update of the LGC plugin to see if that works better.
Anyone who know i Lazy loading plugin that actually works with these types of grid systems?April 10, 2019 at 9:58 am #865270
- You must be logged in to reply to this topic.