Search Results for 'Masonry'

[Trevor]

The only work we have done looking directly at Masonry/Isotope is contained here in this thread:

https://support.searchandfilter.com/forums/topic/reload-masonry-grid-after-ajax-call/

Otherwise we have looked mainly at how other themes have implemented it.

(any private posts in that thread are not relevant to this question)

[Anonymous]

Hi there,

I’m trying to see if there is any way to apply Isotope animations to an existing S&F form. I’ve looked through the forum and found various instances of people trying to use Isotope to implement a masonry layout, but I don’t want anything like that. My search form has its results in a grid with equal size items and I want it to stay that way.

Anything I’ve tried so far has only broken the layout without adding animations. Besides, once applying a filter, the layout gets back to my original css grid styling.

This is my first time trying to work with isotope, so I’m a complete noob.

Any chance your could help me get the basics right?

Thanks.

[Anonymous]

I need to give the masonry plugin I use a total amount of results. Is there a way your plugin gives me a js variable that has that amount. Is there another way to do it?

[Trevor]

I made an edit to the page to remove the shortcode element and replace it with a Text element, with this in it:

[searchandfilter id="2017"][searchandfilter id="2017" action="filter_next_query"]
<script>(function ( $ ) {
	"use strict";
	
	// detects when the ajax request has finished and the content has been updated
	// re-init the layout scripts from Elementor
	$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
		elementorFrontend.hooks.doAction('frontend/element_ready/posts.cards', jQuery('.elementor-widget-posts'));
	});
	
}(jQuery));</script>

I also enabled Masonry for the Post Grid (without which there is an issue with images).

[Anonymous]

Hi Trevor,

1. Update on the “ajax complete” issue
I used the following code and the masonry is reloaded now. Not sure if it is the best solution though. Please feel free to advise.
$(document).ajaxComplete(function() {
loadMasonry();
});

2. Slow loading speed on mobile
I unchecked the options “Post Type Archives”, “Tag, Category & Taxonomy Archives” and “Author Archives” on the settings page and the page speed has instantly improved on mobile. Are there any other options that I can turn off to improve the page speed further?

Thanks,
Anna

[Trevor]

Is it even logging ajax complete to the console? If it is not, then the code may need to be different. Assuming the loadMasonry function finishes before the loadMasonry() call, our code would need to be this:

(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxformfinish", ".searchandfilter", function(){
    console.log("ajax complete");
    loadMasonry();
  });
}(jQuery));

[Trevor]

It might be a number of things, but most likely you have one or both of:

Lazyload images (such as in Jetpack; it is an option you can disable)
the grid might be ‘powered’ by Masonry (Isotope), in which case the grid would need to have the Masonry script re-triggered to re-build the grid correctly.

Are you able to send me a live link/URL to your search page so I can take a look?

[Trevor]

Are you using Masonry in Post Grid?

[Anonymous]

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/

[Anonymous]

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.