Search Results for 'masonry'

[Anonymous]

Hi, I use Search&Filter pro + Post-grid pro.
I would like to active masonry on my postgrid, but it doesn’t work.
I read a lot of comments on this forum, so I disabled Ajax.
But masonry still doesn’t work.

Do you have any idea for a solution?

This is the list of active plugins :
Polylang
Custom Post Type UI
Custom Post Type Widgets
Duplicate Post
Éditeur de page (but I don’t use it)
Post Grid
Search & Filter Pro
Simple Custom Post Order
WP ACF-VC Bridge (but I don’t use it)

Thanks for your help

[Ross]

Hi Vagi, I guesss this is after you use ajax, and you want masonry effect?

Try the suggestions here:
https://searchandfilter.com/documentation/3rd-party/elementor/#masonry-ajax

Thanks

[Trevor]

From that link I can see that it is Page Builder, yes.

The layout is unusual, it doesn’t look like a normal Page Builder element. It is using Isotope(Masonry), which should (usually) only be used for multi column layouts, which yours is not. If you have a means to switch that off, I would.

How did you link the form to the results, as I see that the form is set to custom mode?

If I had been doing this, I would have placed a text block just above the results with this shortcode in:

[searchandfilter id="2147" action="filter_next_query"]

[Anonymous]

Hi Trevor,

Ahh thanks ever so much for this, so I adjusted the code and now added the reload bit, which in Ross’s example it says we might need it… and so I think we did hehe, sorry should have tried that before!!

So… this is now the code:

		function loadMasonry(){

			//$container will always be a new copy
			var $container = $('.grid-masonry');
			
			// running images loaded again after page load / ajax event 
			// $container.imagesLoaded(function () {
				// INITIALIZE MASONRY
				$container.masonry({
					itemSelector: '.grid-item',
					columnWidth: '.grid-item',
					percentPosition: 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');
			// });
		}
		
		//if you need to call on page load etc...
		loadMasonry();
		
		//then also call it after ajax event
		$(document).on("sf:ajaxfinish", ".searchandfilter", function () {
			console.log("ajax complete");
			loadMasonry();

			$('.link-scroll').bind('click',function(e){
				var $anchor = $(this);
				$('html, body').stop().animate({scrollTop: $($anchor.attr('href')).offset().top}, 1500,'easeInOutExpo');
				e.preventDefault();
			});

		});

So, almost there, the only tiny thing I am seeing is as you scroll it initially puts the posts on top of the existing ones, then as you scroll corrects itself [section redacted by @trevorsf]

Do you any little adjustment I can make to stop that?

Then I think all is perfect, so thank you again for your brilliant support! Don’t know what we’d do without your plugin, we use it on all sites, best out there as far as we’re concerned :)!!

Many thanks,
Tonya

[Trevor]

I think you need some more code, somewhere. I am sorry, but I am far from expert with Masonry. However, look at the CSS being applied after the scroll:

https://www.screencast.com/t/y7gYIQxseK

The 925px is being re-applied. It is there when the first set of results is shown, and is added again when you scroll. That means that there is no room for the posts.

See how the first set of posts has the position CSS added, but the subsequent posts, when loaded, do not?

[Anonymous]

Hi Trevor,

Thank you for this, so yep I’m already re-calling Masonry after your Ajax call, which usually always works, as we’ve used this loads with your plugin, the only difference on this one is that we’re using Infinite Scroll vs. Paging, and I think that’s where, for some reason, it’s not quite happy. If I change it to paging it works fine, but can you see on Infinite Scroll it loads the items on top of each-other?

This is the code which I did update to be more exact to Ross’s example, but sadly still no luck as it was doing the same as what we already had before (and like I say which does re-trigger it fine on paging):

		function loadMasonry(){
	        $('.grid-masonry').masonry({
	            itemSelector: '.grid-item',
	            columnWidth: '.grid-item',
	            percentPosition: true
	        });
		}
		
		loadMasonry();
		
		$(document).on("sf:ajaxfinish", ".searchandfilter", function () {
			console.log("ajax complete");
			loadMasonry();

		});

Hope that helps :).

Many thanks,
Tonya

[Trevor]

Ah, you have coded the grid yourself, and used Masonry?

This post from Ross shows how to (generally) re-trigger Masonry after our Ajax call:

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

[Anonymous]

Hi Trevor,

Thanks ever so much for your quick reply as always :).

[section redacted by @trevorsf]

Ah so your code I think is for use with the Post Grid plugin, but we don’t use that, we use our own Masonry integration, which as I say if we use paging, the code we add seems to re-fire it, but it’s just when we use Infinite Scroll, you will see what it does once logged in as Admin and hopefully you can let me know what we need to do 🙂

        $('.grid-masonry').masonry({
            itemSelector: '.grid-item',
            columnWidth: '.grid-sizer',
            percentPosition: true
        });

		$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
	        $('.grid-masonry').masonry({
	            itemSelector: '.grid-item',
	            columnWidth: '.grid-sizer',
	            percentPosition: true
	        });
	    });

Thank you again,
Tonya

[Trevor]

Hi. I am having a problem, in that the link you give is re-directing to the home page?

When I edit that insights page in the admin editor, it is empty?

Did you add this script to the page (with the ID changed to your Post Grid ID):

(function ( $ ) {
	"use strict";
	/* Replace the ID <code>123456</code> with the ID of your grid */
	var my_grid_id = '#post-grid-123456'; //alternatively use <code>.post-grid</code> for a less targeted approach
	
	var $my_grid = {};
	var $grid_items = {};
		
	$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
		
		$my_grid = $(my_grid_id);
		$grid_items = $my_grid.find('.grid-items');
		
		if($grid_items.length>0){
			if($grid_items.hasClass("masonry")){
				$grid_items.removeClass("masonry");
				$grid_items.masonry('destroy');
			}
			$grid_items.removeAttr('style');
			$grid_items.masonry({isFitWidth: true});
		}
	});		
}(jQuery));

If on its own and inline, it needs to be in script tags.

[Anonymous]

Hello there,

Please could I get your help with something, I basically have Infinite Scroll with Masonry.

My code is:

        $('.grid-masonry').masonry({
            itemSelector: '.grid-item',
            columnWidth: '.grid-sizer',
            percentPosition: true
        });

		$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
	        $('.grid-masonry').masonry({
	            itemSelector: '.grid-item',
	            columnWidth: '.grid-sizer',
	            percentPosition: true
	        });
	    });

And if I use usual pagination, all works fine, but when I use infinite scroll the second set of results load on top of the first set.

I also set the Infinite Scroll all accordingly with the post result selector and container settings.

I have done a search in Google and saw some suggestions but wasn’t sure they were exactly my case, so thought best to check with you :).

Many thanks,
TJ