Search Results for 'Masonry'

[Anonymous]

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]

This is some sample code to re-load masonry/Isotope:

<script>(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
// so load your masonry script here again
  });
}(jQuery));</script>

[Trevor]

Did you follow our guide for using the Elementor Post Grid. Our plugin will integrate with this (to show any Post Type) to allow you to show results in a grid. Our guide for Elementor:

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

Even if you do not have Masonry enabled (it might not even be an option), use the guide for Masonry & Ajax, but, instead of this code:

(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.init();
	});
	
}(jQuery));

Use this code:

(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.classic', jQuery('.elementor-widget-posts'));
	});
	
}(jQuery));

Note, if you are placing the code inline on the page (in a HTML widget, in the Text view tab), it needs the <script>.....</script> tags around it. You can often place the form shortcode, the linking filter_next_query action shortcode, and the script all in one text module. So, the entire code block might look like this:

[searchandfilter id="25413"]
[searchandfilter id="25413" action="filter_next_query"]
<script>(function ( $ ) {
	"use strict";
	$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
		elementorFrontend.hooks.doAction('frontend/element_ready/posts.classic', jQuery('.elementor-widget-posts'));
	});
}(jQuery));</script>

[Trevor]

OK. It is working of a sort. The main issue is the theme, Avada. With this theme, it is difficult to use the As an Archive and Post Type Archive methods.

This is because Avada uses Masonry (Isotope) to lay out the posts. This would need to be re-triggered after each search, but we have been unable to discover how to do this with Avada (and we have tried).

At this time, most Avada users install the free Post grid plugin and follow this method to achieve the layouts and filtering:

https://searchandfilter.com/documentation/3rd-party/post-grid/

[Anonymous]

Great speaking with you.

Hoping we can get the URL and masonry figured out as well.

Thanks,

Paul

[Trevor]

At the moment you are using our Shortcode display results method. You have two alternatives:

#1 Use the Elementor Post grid. Our plugin will integrate with this (to show any Post Type) to allow you to show results in a grid. Our guide for Elementor:

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

Even if you do not have Masonry enabled (it might not even be an option), use the guide for Masonry & Ajax, but, instead of this code:

(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.init();
	});
	
}(jQuery));

Use this code:

(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.classic', jQuery('.elementor-widget-posts'));
	});
	
}(jQuery));

Note, if you are placing the code inline on the page (in a widget), it needs the <script>.....</script> tags around it. You can often place the form shortcode, the linking filter_next_query action shortocde, and the script all in one text module.

#2 Use our integration with the free Post Grid plugin. See here:

https://searchandfilter.com/documentation/3rd-party/post-grid/

[Anonymous]

Ok I installed the file, it creates a plugin called:
Search & Filter Pro – WP Bakery Page Builder

Now help me understand better: should I use the Kleo or Post Grid, and select Search / Filter as a source? It seems to me that this picks up from my search and filter standard (non pro) installation I did before, and not much happens.. see https://billionwonders.com/search-form-test/ and screenshot https://ibb.co/jJWDzFW

What is the ideal set-up for what I described above?

“If you look at the homepage https://billionwonders.com/, below the text “Post Masonry”, you see what Kleo automatically does. It’s quite nice, as with a single click the posts would disappear/re-appear without the page re-loading. It misses custom taxonomies and multiple hierarchical choices, hence why I decided to try S&F. Can I achieve something similar here?”

[Anonymous]

Theme is “Kleo”, website under constructions, but the basics should still work.

Few examples:
– At this page I have inserted the code and the results. Despite the custom css, the filter shows in a really messy way, and I’m struggling to make it vertically centered – with each box equal distanced and equal sized on the same line
https://billionwonders.com/search-form-test/

– The real desired use though, would be on a page like this one, where I would have Map, Filter, adn a few Posts in masonry/grid I would have pre-selected. With the filter I would like to let users pick posts to display below it, effectively changing the masonry
https://billionwonders.com/welcome-back/

If you look at the homepage https://billionwonders.com/, below the text “Post Masonry”, you see what Kleo automatically does. It’s quite nice, as with a single click the posts would disappear/re-appear without the page re-loading. It misses custom taxonomies and multiple hierarchical choices, hence why I decided to try S&F. Can I achieve something similar here?

Thanks
Ugo

[Trevor]

Hi

I think it is not fully working as a JavaScript error is being thrown:

https://www.screencast.com/t/4LKSnUNT

It looks like your theme is using Masonry, and this is hard to re-trigger on an Ajax call. If Ajax is OFF, does it all work?

[Anonymous]

Thanks Trevor,
Don´t worry, we have chosen not to use any of this and use the masonry that comes by default in the template .. we will show it in another way, because the visualization is quite disastrous.
Thanks for your help and your attention.