[Support request] Blog and Search Layout Issues

[Paul]

Everytime I click on a category, tag, or do a search the masonry layout has all this extra padding or margin if you scroll down the page Here is a screenshot of the issue…
https://1drv.ms/u/s!AtzxGqXDzsbBiotRLPhVZypBny1W2Q?e=AZMB5i

This has been plaguing me on my PC, and my iPad since I got the generatepress theme.
I know this is caused by javasript trying to configure the masonry layout.
I know this since my Content View Pro plugin had the same issue until I changed everything to grid and now everything is grid only via CSS and no more javascript.
I would like to change everything to grid if I can, so that no more javascript loads on the page, which messes the layout up every time.
This is my biggest grip with generatepress and need a fix as soon as possible.
Thanks.

-Paul Gee

[David]

Hi there,

Its not an issue with the Masonry script that GP uses, its the way your lazy loader plugin is working.

You can see it happening here – i have throttled the network and the CPU to slow it down so you can see it happening:

https://www.screencast.com/t/U5B5cibXuT

The Masonry script that GP uses, gets the size of each Post on the page from the browser API.
The browser calculates the sizes of each element. When the browser encounters an <img> element in the HTML, it uses the images width and height attributes to calculate its aspect ratio and ‘reserve’ the right amount of height for that image.
But the lazy loader plugin is swapping the original image for a placeholder image that doesn’t respect the width and height values and instead outputs a square image in its place, so the browser uses this to calculate the height….

Another user had the same issue with the SG Optimizers lazy loader, and he reported it to them to ask them to fix that… but i doubt that will happen any time soon. I would recommend using another lazy loader…

As a note some plugins i know to lazy load correctly are:

PerfMatters
Autoptimize
WP Rocket

[Paul]

In SG Optimizer, I can add exclusions to the following..
Exclude CSS Classes from Lazy Load
Exclude Media Types from Lazy Load

Do you have a path I can add to the exclusions list, in order to fix this with SG Optimizer?

I also use perfmatters and can disable lazy loading with SG Optimizer and use it.
Have you had better success with perfmatters?

Thanks.
-Paul Gee

[Elvin]

Hi Paul,

I believe masonry’s script is on /wp-includes/js/ folder. The theme uses WordPress default’s masonry script. 🙂

But ideally, consider exlcuding assets from /wp-content/plugins/gp-premium and /wp-content/themes/generatepress for other GP features that may break. 😀

[Paul]

Do you have instructions on what to exclude in SG Optimizer?
What you are giving me is not options I can actually put in.

[Elvin]

Do you have instructions on what to exclude in SG Optimizer?

Some optimization plugin allow exclusion of paths using wildcard (*).

Example:
/wp-content/plugins/gp-premium/*
/wp-content/themes/generatepress/*
/wp-includes/js/*

But I’m not exactly sure how SG Optimizer excludes assets. You may have to refer to their documentation or ask their support about this.

[Author]

Posts