Masonry Layout on blog changes content in footer

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.

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:

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

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

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

Yeah, here's the info:

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.

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

Thanks!
Lars

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.