@centrivoy
If you have just installed please clear your cache – both on your site and browser. If that does not work for you please post alink to a page where I can see the issue.
Regards
Steve
I cleaned the cache in the browser and on the site.
With a3 plugin:
In the green frame, the size of the image.
In the red frame is what I see.
https://ibb.co/fkJz57
https://ibb.co/ikYrk7
and without a3 plugin
https://ibb.co/cKmNsn
Page
-
This reply was modified 8 years, 3 months ago by
centrovoy.
-
This reply was modified 8 years, 3 months ago by centrovoy.
@centrovoy
Thanks for the screenshots – by the look of them those images are loaded by a plugin or theme (the layout leads me to think that).
If that is the case I am guessing what is happening is that the plugin applies the grid layout when the images are loaded – but with lazy load they are not loaded straight way – and i think that whatever it is that is making that layout then does not apply the grid correctly.
Am I correct in thinking that the images are not hand embedded in the page but added by another plugin or the theme?
Regards
Steve
@a3rev
Yes, images are added by another plugin.
A Visual Composer is used with the “portfolio list” element.
To output images, use the following code
@centrovoy
Thanks for that – and can see the issue.
The only way to resolve this is to contact the plugin developer and as them to make a small change in their Portfolio script to allow it to work with a3 Lazy Load. Below is some information to include in your ticket to the developer.
—————————————-
The issue is that when an image is not in the viewport, the a3 Lazy Load plugin uses a placeholder image with proportions ratio 1:1
The the portfolio appears to be using JavaScript that calculates the size of each item when the page first loads to make the width and height for each card. It seems to calculate to square card , for example 400 x 400 (which is 1:1). Then when scroll to bottom and those card show on viewport Lazy Load plugin will replace placeholder image this the real image.
And that is where the issue is that I am seeing ( @centrovoy could include your screenshots here that show the issue perfectly). The real image has a different size , for example 400 x 600 so a part at bottom of image is overlay by the image below it.
To resolve this issue the could you please edit your script so that it calculates the dimension for card when the real image is loaded, instead on first page load.
To help with that here is a list of the Lazy Load Event triggers https://github.com/ressio/lazy-load-xt/#events
If the developer has any questions about that I am happy to help in anyway i can.
Regards
Steve
