Search Results for 'masonry'

[Anonymous]

Hello, is there a way I can edit the result layout to be exactly the same as the layout of my portfolio? The layout that I want to copy is a 3 column masonry grid. Upon checking the layout of the results, it was just big images with titles and post dates. I hope you can help me!

[Anonymous]

Hi Trevor,

I finaly found the solution using a part of your code and Masonry documentation.
This is my full process to help other if you have a new request about that :

> I create a search&filter form using shortcode method, ajax load and infinite scroll.
> I used the RESULTS template of Infinite scroll but i delete the div ‘search-filter-results-list’.
> I call the masonry JS file and i use this function to apply the masonry system to my grid :

$container = $('.search-filter-results');		
$container.masonry({
	itemSelector: '.post',
	columnWidth: '.post'
});

$(function(){
	$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
		console.log("ajax finish");
		$container.masonry('reloadItems');
		$container.masonry().append().masonry('appended'); 	
	});
}(jQuery));

Thanks a lot for your help.
Simon.

[Trevor]

I am not overly familiar with the masonry coding. We did once figure a way to do it (our developer did), see here (I have gone back through the thread to reveal most of the posts, redacting sections where needed for privacy, anything still private has nothing important in):

https://support.searchandfilter.com/forums/topic/infinite-scroll-with-masonry

[Trevor]

Maybe add this to the page also then:

<script type="text/javascript">
  $(function(){
    $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
      console.log("ajax finish");
      $('.search-filter-results').masonry({
        itemSelector: '.post',
        columnWidth: '.post',
      });
    });
  }(jQuery));
</script>

[Trevor]

The problem is then that Masonry has to be re-applied on each ‘page’ load.

How do/did you apply it when the page first loads?

[Trevor]

The layout does not look good after the first 6 posts. Is this what you mean? If masonry is OF, is it then OK?

[Trevor]

I am not seeing this issue, but can you try changing the Ajax Container from #main to .masonry in the form settings?

[Anonymous]

At http://www.zettelwerk.com/zettelsuchergebnisse (without AJAX) the initial setting of a filter eg “Bescheinigung” triggers well and collects the results and displays them with masonry well.

After this initial selection, if you want to change let’s say to “Post” within the same category, the action get’s triggered, the page reloaded, but for some reason it stays with the old category “Bescheinigung”.

On of the possible reasons might be, that I followed the responsive approach discussed elsewere in this forum, where I defined the filters for the Search Form UI twice, displaying Radio select on all screens except mobile, where CSS is used to display:none and instead display:block the duplicate set of dropdown selects.

Resetting the complete form “Alle Filter zurücksetzen” works.

[Ross]

Hi Floriane

With ajax disabled, there is no code that could (*should) affect masonry.

What happens if you disable Search & Fitler, is masonry working?

Thanks

[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