[Support request] Masonry Layout on blog changes content in footer

[Lars]

Hi!

On https://bywildera.com/recipes/ I have a blog page with masonry layout. All is good and nice, but I notice that the masonry layout also affects the dynamic content in the footer (element). How can I stop that from happening?

Another question that concerns the masonry layout. Is there a way to write CSS for top posts and only the top three if three are shown, and only the top two if two are shown and only the top one is one is shown (mobile layout)?

[Fernando]

Hi Lars,

1. Can you try adding this PHP snippet:

add_filter( 'post_class', function( $classes ) {
	if ( is_archive() && in_array( 'gb-query-loop-item', $classes ) ) {
		$index = array_search('generate-columns',$classes);
if($index !== FALSE){
    unset($classes[$index]);
}
		
	}

	return $classes;
} );

Adding PHP: https://docs.generatepress.com/article/adding-php/#code-snippets

2. Can you try adding this snippet for this:

add_action( 'pre_get_posts', function( $query ) { 
    if ( $query->is_main_query() && ! is_admin() && is_home() && wp_is_mobile() ) {
        $query->set( 'posts_per_page', 3 );
    }
} );

Ideally, this sets the number of posts in your Blog to 3 on mobile.

Let us know how it goes.

[Lars]

1. I have tried to insert this to Run Everywhere with the WPCode-plugin. The code is activated and should be doing whatever it is supposed to be doing. The footer still look like this on the blog page:

[Fernando]

I see. To test, can you try adding it through Code Snippets as shared in the article above? Let us know how it goes.

[Lars]

I have now used Code Snippets instead and the result is the same: https://bywildera.com/recipes/

[Fernando]

I see. That’s odd.

Can you provide admin login credentials? We’ll take a closer look. Keep the code added through Code Snippets as well.

Please use the Private Information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

[Lars]

Yeah, here’s the info:

[Fernando]

Thank you.

Can you replace the code we have to remove the Query Loop columns with this?:

add_filter( 'post_class', function( $classes ) {
	if ( in_array( 'gb-query-loop-item', $classes ) ) {
		$index = array_search('generate-columns',$classes);
if($index !== FALSE){
    unset($classes[$index]);
}
		
	}

	return $classes;
} );

Let us know how it goes.

[Lars]

That did the trick and it also made me curious what you did here. Do you have the time to explain?

Thanks!
Lars

[David]

Hi there,

the Javascript/CSS that is used for Masonry relies on the generate-columns post class which GP injects into all posts using the post_class filter hook.
However this also affects posts output in the query loop, which we need to address in an update.

The code that Fernando provided uses the same filter to:

1. find posts with the post_class of gb-query-loop-item which exists on any GB Query Loop post.
2. check if the post_class also contains the problem generate-columns
3. if it does then remove that class.

[Author]

Posts