Twenty20 Plugin isn’t working with Lazy Load

I agree – plugin doesnt work

I made use of this plugin on a number of blogposts where it worked just fine. But the other day I also started noting, that the plugin does not properly display anymore. Often, it would not load at all, or only display after a long time and scrolling up and down on the page.
Clearly this is not usable anymore. Since I really liked how this plugin worked, I would hate to look for another one. Any chance you can fix this or give us a workaround?

OK so after some crazy mind wrangling on this issue here is a CSS ONLY solution.
I am not the developer making this BUT I’m sure they could solve this problem.

This whole issue has to do with the HEIGHT of the images. When they are lazy-loaded until scrolling to the image they are essentially 0x0, from what I understand. This plugin works well when you resize the browser but the initial calculation doesn’t like it when there is no image (i.e. lazy-loaded) in the elements initially. So to overcome this you need to give the image elements a “defined place” to fill rather than create it on load (ie lazy load if that makes sense).

Here’s what I figured out…

####
NOTES:
So in my case, I intentionally made all my before and afters IMAGES the SAME ratio of 1600px x 1066px It was picked at random really when my site was fluid width, but I digress. You could use the following CSS to implement your own change.

Also, my website is not fluid width so this again may not help.

I use bootstrap and for tablets and smaller the “before afters” are full width so this again may not help.
####

1. Calculate your aspect ratio like this — width/height. For me the was 1.5009380863 (lol, would have been better off with something more normal)

2. Add class “fix-lazy” (or whatever you want to call it) to your IMAGE element (not the parent). I think you could aslo use the css selector of “img.twentytwenty” but I didn’t test that.

3. So after 1200px my website is no longer responsive. So I was able to manually figure out the height it appears on the desktop. So do that too.

4. There is some math that explains the calc you’ll see below, but again this is for fullwidth “before afters” on tablet and smaller, for me I set that at 1200px. So where ever your breakpoint is will be important to change for the @media lines.

4. Here’s the code

@media screen and (max-width: 1200px) {
  .fix-lazy {
  height: calc(100vw / 1.5009380863); // this is where you put in your ratio.
  width: calc(100vw);
}
}

//This is for desktop on non-fluid-width websites. 
@media screen and (min-width: 1200px) {
  .fix-lazy {
  width:1176px; // you need to find your own number
  height: 784px; // you need to find your own number

}
}

I also experimented with adding object-fit: contain; to these to make it a little more stretchy and apply more liberally to images. Might be good if every image is a slightly different aspect ratio. Something to think about!

I hope this helps someone in the future!

I would hope the developer could update scripts to calc the image with and height and add that to the “twentytwenty” image class, so the container is recalculated along with the images as it sizes up and down. But I’m not great with JS.

Good luck out there!

• This reply was modified 3 years, 6 months ago by jacoboms.
• This reply was modified 3 years, 6 months ago by jacoboms.
• This reply was modified 3 years, 6 months ago by jacoboms.