[Resolved] Positioning of lazyload images in Lightweight Grid Columns

Home Forums Support [Resolved] Positioning of lazyload images in Lightweight Grid Columns

Home Forums Support Positioning of lazyload images in Lightweight Grid Columns

Viewing 15 posts - 1 through 15 (of 26 total)
  • Author
    Posts
  • #625813
    Theo

    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.3
    GP Premium 1.6.2
    #625987
    Leo
    Staff
    Customer Support

    Hi there,

    Hmm I’m not seeing anything obvious that would cause this.

    Have you checked with WP Rocket’s lazy load support and did they offer any insight?

    #626040
    Theo

    Hi Leo,

    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) !

    #626108
    Leo
    Staff
    Customer Support

    Couple more methods for the columns but I’m not sure if they will work.
    https://docs.generatepress.com/article/creating-columns/

    Unfortunately I’m not familiar with with how WP Rocket works.

    Perhaps try a different lazy load solution?

    #626395
    Theo

    Hi Leo,
    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.

    #626722
    Leo
    Staff
    Customer Support
    #626993
    Theo

    Hi Leo,

    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.

    #627004
    Leo
    Staff
    Customer Support

    Awesome ๐Ÿ™‚

    LGC definitely could use a bit of love but we are waiting to see what will happen with Gutenberg.

    Hopefully columns will be a built in feature in WordPress core.

    #790795
    Matthew

    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.

    #791187
    Tom
    Lead Developer
    Lead Developer

    Does this issue still happen if you disable equal heights in the shortcode?: equal_heights="false"

    #863720
    Emil

    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?

    #864273
    Tom
    Lead Developer
    Lead Developer

    It forces the columns to be equal heights using some simple javascript. It’s not really all that necessary. The plugin needs an update to use flexbox instead of floats.

    #864609
    Emil

    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?

    #865256
    Emil

    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?

    #865270
    Tom
    Lead Developer
    Lead Developer

    Do those issues go away if you deactivate LGC?

Viewing 15 posts - 1 through 15 (of 26 total)
  • You must be logged in to reply to this topic.