Beaver Builder Masonry Grid Layout

Anonymous

#211223

Hi,
Any thoughts on how to refresh Masonry layout from a Beaver Builder Posts Module Layout with Masonry – currently layout is not refreshed after call and appears blank.

I am trying to hook a callback like so…

// detects the end of an ajax request being made
$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    refreshGridLayout();
});

	/**
	 * Public method for refreshing Masonry within an element
	 *
	 * @since 1.8.1
	 * @method refreshGridLayout
	 */
	function refreshGridLayout() {
		var $element 		=  $( '.fl-module-post-grid' );
			msnryContent	= $element.find('.masonry');

		if ( msnryContent.length )	{
			msnryContent.masonry('layout');
		}
	}

Example – https://tovo.websitelove.net/lights/

Trevor

#211234

Hi

I have checked my notes on Beaver Builder and a solution has not been found. You may need to contact them and see if they can help. If you do find a solution, posting it here would be great.

Anonymous

#211243

Yes trying with some support on Beaver Builder slack but not there yet – this is where I am up to…

    /**
     * Public method for refreshing Masonry within an element
     *
     * @since 1.8.1
     * @method refreshGridLayout
     */
    function refreshGridLayout() {
        
        var $element         = $( '.fl-post-grid' ),
             msnryContent    = $element.find('.fl-post-grid-post');
             
             //running images loaded again after page load / ajax event 
        $element.imagesLoaded(function () {
            // INITIALIZE MASONRY
            $element.masonry({
                itemSelector: '.fl-post-grid-post',
                columnWidth: '.fl-post-grid-post',
                gutter: 40,
            });
            
            $element.masonry('reloadItems');
                    
            });
    }

I can see the callbacks working via console log alerts but the masonry layout is not rebuilt and no JS errors via console.

Trevor

#211247

Is this post of any help?

https://support.searchandfilter.com/forums/topic/mansonry-and-ajax-issues/page/2/#post-190942

Anonymous

#211511

Got it working with the help of BB support…

jQuery(document).ready(function($){
    
// detects the end of an ajax request being made
$(document).on("sf:ajaxfinish", ".searchandfilter", function(){

   refreshGridLayout();
    
});

/**
 * Public method for refreshing Masonry within an element
 *
 * @since 1.8.1
 * @method refreshGridLayout
 */
function refreshGridLayout() {
    
    var $element         = $( '.fl-module-post-grid' ),
         msnryContent    = $element.find('.masonry'),
         postItem       = $element.find('.fl-post-grid-post');
    
    if ( msnryContent.length ) {
        $element.imagesLoaded(function () {
            msnryContent.masonry('reloadItems');
            msnryContent.masonry('layout');
            postItem.css('visibility', 'visible');
        });
    }
        
});

The pagination becomes borked but by overriding the post-grid module and moving the pagination markup into the main fl-post-grid container fixes it up.

Trevor

#211548

Thanks a lot for sharing that. Are you able to elaborate on this:

but by overriding the post-grid module and moving the pagination markup into the main fl-post-grid container fixes it up

Anonymous

#211639

So this is only needed when masonry is used as the layout, the above javascript is used to recreate the masonry after an Ajax reload but the pagination fails – as the pagination is outside of the main post masonry grid.

1) Override the BB Post Grid Module…
https://kb.wpbeaverbuilder.com/article/624-cmdg-18-override-built-in-modules

2) Change the markup to move pagination in frontend.php in the new overridden module…
https://gist.github.com/neilgee/938e8e3b66ad759edbeb02a27f0339fc

3) Overview tutorial…
https://wpbeaches.com/add-search-filter-pro-with-ajax-reload-to-beaver-builder-post-masonry-grid/

Trevor

#211646

That is fantastic Neil. Thank you very much. I will close this thread for now.

[Author]

Posts