Premium support

Please log in to post in these forums. If you didn't create an account when you purchased, please contact us.

Free support

If you haven't purchased GP Premium, support for the free theme can be found on WordPress.org.

[Support request] Masonry for custom page templates

Home Forums Support Masonry for custom page templates

This topic contains 13 replies, has 2 voices, and was last updated by  Tara 6 days, 21 hours ago.

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

    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

    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

    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

    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

    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

    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

    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

    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…

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

You must be logged in to reply to this topic.