Search Results for 'Masonry'

[Anonymous]

HI.
Are there any guides on integrating search and filter pro with a masonry grid layout and an ajax load more button or an infinite scroll?

Thanks!

[Anonymous]

Hi Trevor,

I’ve now added the following and masonry and AJAX is working…

$container.masonry('reloadItems');

I’ve placed this here…

		$container.imagesLoaded(function () {
			// INITIALIZE MASONRY
			
			$container.masonry('reloadItems');
			
			$container.masonry({

Thanks again for your assistance.

Regards,

Kirk

[Anonymous]

Hi Trevor,

The code you’ve provided has helped me re-initiate the masonry grid after a search has taken place, which was another problem that I need to overcome.

I’ve modified the code slightly for responsiveness…

(function ($)
 {
    
	"use strict";
	
	function loadMasonry(){
		
		//$container will always be a new copy
		var $container = $('.search-filter-results-list');
		
		//running images loaded again after page load / ajax event 
		$container.imagesLoaded(function () {
			// INITIALIZE MASONRY
			$container.masonry({
				itemSelector: '.search-filter-result-item',
				columnWidth: '.grid-sizer',
				gutter: '.gutter-sizer',
				percentPosition: true,
				horizontalOrder: true
			});
			// Masonry has been initialized, okay to call methods
			
			// not sure if you will need this here but might be worth adding in
			//$container.masonry('reloadItems');
		});
	}
	
	
	//then also call it after ajax event
	$(document).on("sf:ajaxfinish", ".searchandfilter", function () {
		console.log("ajax complete");
		loadMasonry();
	});

	//an event fired when S&F is initialised and S&F scripts have been loaded
	$(document).on("sf:init", ".searchandfilter", function(){
		console.log("S&F JS initialised");
		loadMasonry();
	});

	
}(jQuery));

I’m still having issues with the next items loading in via AJAX in a masonry layout though.
https://mgg.devrap.co.uk/

I’m currently investigating, but if you have any further suggestions, please let me know.

Thanks for your time so far.

Regards,

Kirk

[Trevor]

Great to speak with you Kirk. You are going to have a look and see if this code example is of any use to you:

<script>(function ($) {
    
	function loadMasonry(){

		//$container will always be a new copy
		var $container = $('.ae-post-widget-wrapper');
		
		//running images loaded again after page load / ajax event 
		$container.imagesLoaded(function () {
			// INITIALIZE MASONRY
			$container.masonry({
				itemSelector: '.entry',
				columnWidth: '.entry',
				gutter: 40,
			});
			// Masonry has been initialized, okay to call methods
			
			// not sure if you will need this here but might be worth adding in
			//$container.masonry('reloadItems');
		});
	}
	
	
	//then also call it after ajax event
	$(document).on("sf:ajaxfinish", ".searchandfilter", function () {
		console.log("ajax complete");
		loadMasonry();
	});

}(jQuery));</script>

[Anonymous]

Hi Trevor,

The link now shows where I was at… https://mgg.devrap.co.uk/

Results per page are currently set to 20, but when reduced to 6 (or anything lower than total items) and the Masonry Ajax code added, that’s what was giving me the obscure display issues that were happening when I made the original post.

What you were seeing yesterday, were the results of installing the Post Grid plugin.

I’ve custom coded the masonry functionality based on the documentation and libraries here… https://masonry.desandro.com/

I’m using the following theme… https://themble.com/bones/

We use the WP Bakery plugin on most of our sites, but I’m not sure it’s necessary for this website.
WP Bakery grids don’t offer enough filtering and search options, which is why we purchased your plugin.

Long-term, I need to create a load of custom taxonomies to fully utilise your plugin but was trying to get the masonry and AJAX working together first.

Regards,

Kirk

[Trevor]

Hi Kirk

If you had added some quite unusual data (terms) into the search results, maybe the Post grid plugin is not the ideal route.

If you are using Masonry, where did this originate from? Your theme? I also see you have WPBakery Page Builder installed.

What sort of data are you outputting in each post (Featured Image, Title, Excerpt, Date, Categories etc.)?

If it is ‘merely’ what is one your home page, what customisation needs doing? What I see there can be done by the Page Builder plugin.

[Trevor]

Ah, I see, he added this:

(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    console.log("ajax complete");
		var isocontainer = $('.reinit-isotope'),
			iso_selector = $('.reinit-isotope').data('iso-selector');
			isocontainer.isotopeb('destroy');
			isocontainer.isotopeb({masonry: {columnWidth: iso_selector}, layoutMode:'fitRows', transitionDuration: '0.8s'});
            if(isocontainer.attr('data-fade-in') == 1) {
                var isochild = isocontainer.find('.kt_item_fade_in');
                    isochild.each(function(i){
                        $(this).delay(i*150).animate({'opacity':1},350);
                    });
            }
});
}(jQuery));

[Trevor]

The gaps thing. My basic script would look something like this:

(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    console.log("ajax complete");
    var $container = $('.reinit-isotope'), iso_selector = $('.reinit-isotope').data('iso-selector');
    $container.isotopeb({masonry: {columnWidth: iso_selector}, transitionDuration: '0s'});
  });
}(jQuery));

It would have to be inside script tags or in the Simple Custom CSs and javascript plugin (which does the script tags for you).

[Anonymous]

Heard back from Ben:

I suggest adding this css:

#topbar-search form {
border: 1px solid #999;
}
#topbar-search .search-icon {
color: #444;
}
#topbar-search .form-search ::-webkit-input-placeholder {
color: #555;
}
#topbar-search .form-search ::-moz-placeholder {
color: #555;
}
#topbar-search .form-search :-ms-input-placeholder {
color: #555;
}
The search form file is searchform.php. It’s in the main folder of the theme.

Here is how you can re-load isotope on an event:

$(window).on(‘customEvent’, function( event ) {
var $container = $(‘.reinit-isotope’),
iso_selector = $(‘.reinit-isotope’).data(‘iso-selector’);
$container.isotopeb({masonry: {columnWidth: iso_selector}, transitionDuration: ‘0s’});
});
If you can tell me what event the plugin uses on a filter I can get you exactly what you need. Also, you could use a different search output that doesn’t use a grid if you like. That is controlled in your theme options > misc settings.

In a second response, he wrote:

Just thought of this. You don’t have to use the normal search. You can add any widget or shortcode into your topbar so if you don’t want to override files you can just add the plugins search shortcode into the topbar and turn off the search that is there.

Any suggestions?

[Trevor]

The key is to find out what the masonry function is that does this. You can get some ideas from the documentation relating to Elementor (i will not all be applicable, as it is specific to Elementor Pro, but some of what is there will be relevant):

https://searchandfilter.com/documentation/3rd-party/elementor/

The code you see about Masonry and Ajax would have a similar solution, replacing this line:

elementorFrontend.init();

With whatever your theme does to initiate Masonry.