Masonry for custom page templates

Hi Tara,

Can you show me the function you're filtering in?

Let me know :)

Hi Tom

Here's my function:

add_filter('generate_blog_masonry','generate_blog_page_template_masonry');
 function generate_blog_page_template_masonry($masonry) {
     if ( is_front_page() || is_page_template('child-pages.php') ) {
         return 'true';
     }

     return $masonry;
 }

Ah, since you're adding it to a static page, you need to manually tell columns to kick in as well:

add_filter( 'generate_blog_masonry', 'tu_blog_page_template_masonry' );
 function tu_blog_page_template_masonry($masonry) {
     if ( is_front_page() || is_page_template('child-pages.php') ) {
         return 'true';
     }

     return $masonry;
 }

add_filter( 'generate_blog_columns', 'tu_blog_page_columns' );
function tu_blog_page_columns( $columns ) {
    if ( is_front_page() || is_page_template('child-pages.php') ) {
         return true;
     }

     return $columns;
}

Let me know if that fixes it :)

Thanks - that's getting closer as I've now got some masonry classes, but it's not actually displaying as columns or masonry, so something's still missing.

The posts are still underneath each other, but instead of each post container being full-width, they're all different widths depending on how long their excerpt is.

Here's a temporary copy of my front page source code: https://pastebin.com/uNYdcWsH

I see the issue. The blog columns and masonry are built to work on index pages (blog, archives etc..), not single pages.

Since WordPress is seeing your page as a "page", GP isn't adding the column classes.

I'll see if I can get this fixed in the next version of GPP.

For now, you can try this:

add_filter( 'post_class', 'tu_add_singular_post_classes' );
function tu_add_singular_post_classes( $classes ) {
	if ( ! function_exists( 'generate_blog_get_columns' ) ) {
		return $classes;
	}
	
        if ( generate_blog_get_columns() && ( is_front_page() || is_page_template('child-pages.php') ) ) {
                global $wp_query;
		$paged = get_query_var( 'paged' );
		$paged = $paged ? $paged : 1;
		$classes[] = 'generate-columns';
		$classes[] = 'tablet-grid-50';
		$classes[] = 'mobile-grid-100';
		$classes[] = 'grid-parent';
		// Set our featured column class
		if ( $wp_query->current_post == 0 && $paged == 1 && $settings['featured_column'] ) {
			if ( 50 == generate_blog_get_column_count() ) {
				$classes[] = 'grid-100';
			}
			if ( 33 == generate_blog_get_column_count() ) {
				$classes[] = 'grid-66';
			}
			if ( 25 == generate_blog_get_column_count() ) {
				$classes[] = 'grid-50';
			}
			if ( 20 == generate_blog_get_column_count() ) {
				$classes[] = 'grid-60';
			}
			$classes[] = 'featured-column';
		} else {
			$classes[] = 'grid-' . generate_blog_get_column_count();
		}
        }

	return $classes;
}

That's it, thank you! I fixed some missing brackets in line 7 though:

if ( generate_blog_get_columns() && ( is_front_page() || is_page_template('child-pages.php') ) ) {

I'd tried something similar yesterday, once I figured out that those classes were missing, but less successfully.

Now I just need to do some final testing and then I should be ready to update my live site.

Thanks again for your help.

Tara

No problem! Did a missing bracket cause a PHP error? All looks good in my original code?

Hi Tom

generate_blog_get_columns without brackets just gave me the header and footer, but no content in between (on my custom templates and on the standard blog page). I compared it with your generate_blog_post_classes function in generate-blog.php and saw the brackets there, so I copied that and then it worked.

Thanks

Tara

One more question... I have two columns between 600px and 767px, that should act roughly the same as between 768px and 1024px. I know you've changed the grid classes but I can't work out how to update my CSS to make the masonry work properly now. My old version was:

@media (min-width: 600px) and (max-width: 767px) {
  .masonry-post,
  .masonry .grid-sizer,
  .masonry .masonry-post,
  .masonry .masonry-post.width4,
  .masonry .grid-sizer.width4,
  .masonry .masonry-post.width6,
  .masonry .grid-sizer.width6,
  .masonry .masonry-post.medium,
  .masonry .grid-sizer.medium {
    width: 48% !important;
    padding-left: 1%;
    padding-right: 1%;
    }
}

I've looked at your theme CSS and tried various combinations of things like:

@media (min-width: 600px) and (max-width: 767px) {
  .masonry .mobile-grid-100 {
    clear: none !important;
    float: left !important;
    width: 50% !important;
    }
}

Hope you can help.

Tara

Ah I see what you mean! Adjusted in the code above.

Just took a look at your site - it looks like you got the above working? I'm seeing two columns between 600 and 767.

Hi Tom

It was sort of working with the old CSS for two columns between 600 and 767, as it still matched .masonry-post, but there was a gap on the right-hand side of the page.

I've been trying to update it to use the Unsemantic grid CSS similar to .tablet-grid-50, but the masonry blocks are all down the left half of the page and I couldn't work out what I'd missed.

Now I've realised that the same thing actually happens between 768 and 1024, even when I switch to the parent theme, so I don't think it's caused by my own CSS or functions. And it's the same on http://sbsginteriordesign.barkingdogweb.com/testimonials/ (which was linked from another recent masonry thread).

When you first load the page in a window between 768 and 1024 the posts are only in the left column, but if you slightly resize the window then the masonry reshuffles into the proper two-column layout.

Hope you can help!

Tara

Hmm, I couldn't get that to happen. What browser are you using?

That's strange. I mainly use Chrome but I'm also seeing it in Firefox, Edge and Internet Explorer, on Windows 10.

I've tried a few free browser testing and screenshot tools, and most of them show the proper two columns, though netrenderer.com does show one column with empty space in the right half. So I'm still puzzled...

I believe I have this fixed in GPP 1.6.

You can check out the beta if you'd like: https://generatepress.com/gp-premium-1-6/