[Support request] Masonry for custom page templates

Home Forums Support Masonry for custom page templates

This topic contains 14 replies, has 2 voices, and was last updated by  Tom 4 months, 2 weeks ago.

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #464678

    Tara

    Hi Tom

    I’m trying to update to the latest version, but it removes the masonry from my custom page templates. I’m using a static front page and parent pages with custom ‘new WP_Query’ loops (in a child theme), with the ‘generate_blog_masonry’ filter.

    My live site is still on GeneratePress 1.4 and GP Premium 1.4.3, while on my local development copy I’m testing GeneratePress 2.0.1 and GP Premium 1.5.6.

    I hope you can help, as I haven’t found a way to fix it myself.

    Thanks

    Tara

    GeneratePress 2.0.1
    GP Premium 1.5.6
    #464847

    Tom Lead Developer

    Hi Tara,

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

    Let me know 🙂

    #465149

    Tara

    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;
     }
    #465196

    Tom Lead Developer

    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 🙂

    #465229

    Tara

    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

    #465491

    Tom Lead Developer

    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;
    }
    #466136

    Tara

    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

    #466308

    Tom Lead Developer

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

    #467740

    Tara

    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

    #467894

    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

    #468084

    Tom Lead Developer

    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.

    #470175

    Tara

    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

    #470372

    Tom Lead Developer

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

    #470694

    Tara

    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…

    #508245

    Tom Lead Developer

    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/

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.