[Resolved] Using Masonry Layout from the GeneratePress Theme in Toolset Views and Archives

[Author]

Posts

[Thomas AMX]

Hi Guys,

There have been multiple requests for masonry layouts in views/archives over the years.
I’ve been looking for a lightweight way to achieve it without resorting to the rather heavy Masonry library from Desandro.

Flexbox can do masonry (kind of), but for dynamic content it’s not usable, because the container height must be specified.

Then I recalled that the GeneratePress theme could do very nice, lightweight masonry. There is a great integration between Toolset and GP. It is one of the supported and recommended themes for Toolset.

Perhaps there is a way to use the masonry framework from GeneratePress in Views and Archives designed in Toolset?

I have been playing in a sandbox and by modifying this function:

add_filter( 'generate_blog_masonry','tu_portfolio_masonry' );
function tu_portfolio_masonry( $masonry ) {
    if ( is_post_type_archive( 'portfolio' ) ) {
        return 'true';
    }
    return $masonry;
}

hidden link

I can get masonry also in the default CPT archives – those not managed by Toolset. Works nicely.

Then I tried to recreate the structure of GP’s masonry blog page like this:

<!-- wpv-loop-start -->
<div class="generate-columns-container masonry-container masonry">
<wpv-loop> 
  
<div class="grid-sizer grid-25 tablet-grid-50 mobile-grid-100 masonry-brick"></div>

 <article class="masonry-post generate-columns tablet-grid-50 mobile-grid-100 grid-parent grid-25 no-featured-image-padding masonry-brick">
     
  <div class="post-image">[wpv-post-featured-image size="large"]</div>
  <div class="text-container">     
  <div class="title">[wpv-post-link]</div>
  <div class="excerpt">[wpv-post-excerpt length="55"]</div>
 </div>   

 </article>     
</wpv-loop></div>
<!-- wpv-loop-end --> 

I also modified the filter with masonry, so it is loaded on the page with the view:

add_filter( 'generate_blog_masonry','tu_view_masonry' );
function tu_view_masonry( $masonry ) {
    if ( is_page( 12345 )  ) {
        return 'true';
    }
    return $masonry;
}

But the result is not good at all. I failed ? I tried the same with an archive and also failed. ? Perhaps you could give me a hand?

I am sure more people would be interested in having lightweight masonry layouts in Toolset without external dependencies.

And it might be good to show it on the documentation page:
https://toolset.com/documentation/recommended-themes/using-toolset-with-generatepress-theme/

Cheers
Tom

[Luo Yang]

Hello,

You are right, the masonry layouts feature in views/archives is not available.

The PHP codes you mentioned above is based on filter hook "generate_blog_masonry", according to the document of "GeneratePress" you mentioned above:

hidden link

See the first line:

These options require the Blog add-on in GP Premium.

So it is a feature of "GP Premium", It is out the range of Toolset support, you may ask help from GP Premium forum:
hidden link

And I have searched it in google, find some related threads for your reference, for example:
hidden link
hidden link

[Thomas AMX]

OK, thanks. I ended up using the masonry script by Desandro. I had previously thought it was heavy, but perhaps I had confused it with the Isotope script. As a matter of fact, the minified js file of Masonry is quite small. As far as I can tell, it works with Toolset.

Still, I think native support for masonry layouts in Toolset would be good and could help to attract new customers.
When you must use featured images with various aspect ratios, then masonry is the only way, I'm afraid.
Bootstrap grids look very bad is such situations. This is 2018, and masonry is nothing fancy anymore.

Cheers
Tom