How do I make the results display in a grid?

Anonymous

#101349

Hi,

I have my search form working correctly with multiple taxonomies but the results from using the shortcode display huge and show full width on the page. I’d really like to create a grid layout. Can you point me in the right direction please?

Also all search results are displayed as soon as you get to the results page. Can these be initially hidden? Then only display after you start going through the search options?

Cheers

Trevor

#101428

Hi Will

Grid layouts come from two sources; the theme (its own built in grid builder) or a plugin (like Visual Composer). They come in two varieties; flexible grids, such as made by masonry and salvattore, and inflexible ones.

Depending on the theme you are using, and if you have Visual Composer, my solution would be different. So, what theme is it, and do you have Visual Composer? Do you have a sample grid page in your theme that you can give me a URL for?

Anonymous

#101431

This reply has been marked as private.

Trevor

#101437

Ah, the steps you need for Avada are easy. The page needs to have a posts grid looking as you want it.

The shortcode for the results that you currently have needs changing, from this:

[searchandfilter id="120" show="results"]

to:

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

In the search form, change the Display Result method to Custom.

Make sure that the text box that the filter_next_query shortcode is in, is placed BEFORE (above) the posts grid.

Trevor

#101439

I just changed that last post, as I made a mistake on the second (new) shortcode.

Anonymous

#103167

This reply has been marked as private.

Trevor

#103173

I have fixed the results container (changed it from #main to .avada-container). But the Masonry needs to be re-triggered, as this user has done in X theme:

https://support.searchandfilter.com/forums/topic/x-theme-masonry-problem/#post-103030

I don’t have time right now (it being a holiday weekend as you know), but I will find some time to see if the code posted by that user can be re-worked for you.

Trevor

#103368

I have spent some time looking at the Avada code (and searching the Internet) but cannot find a solution to the Masonry issue. It appears most users here have instead used Visual Composer to create the grid in Avada, and Search & Filter has a beta extension for that.

Anonymous

#103398

Thanks Trevor, I have installed VC now. Can you show me where the beta extension is?

Trevor

#103404

https://www.dropbox.com/s/t4gnvhr8mj7e52d/search-filter-pro-vc-beta-2.zip?dl=0

[Author]

Posts