How display Result page as Grid ?

Anonymous

#76445

Hi
I got search pro working filtering blog posts by Category. However it is listing the post results in 1 scrolling column. I am using Shortcode. Here is link-
http://www.sweetdreamsstudio.com/search-filter-test-page/

I want to have posts results displayed as grid like 3×3 grid.
In Results page I want to remove post category tags displayed at end of each posting and remove the Date displayed. I also want to restrict the number of text words displayed for each post.

This is how my blog originally looked before as grid and I want it to look like this with search pro –
http://www.sweetdreamsstudio.com/blog/

I tried changing the Page Attributes Template as Blog Grid but that had no affect.

Trevor

#76474

Hi

You blog page uses Masonry to position and size the posts in the grid, so it will be necessary to trigger this script after the S&F Ajax has finished re-loading the grid. At some point you will need to discover what function (name) your theme uses to do this, but that is for later. We have a sample script that you would use to do this, which you would need to load on the search page:

(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    console.log("S&F JS ajax request finished");
    // ** here you need to reload your masonry script **
  });
}(jQuery));

The other thing we need to do is to customize the S&F Pro results.php template. If you have not done so yet, follow the documentation:

https://www.designsandcode.com/documentation/search-filter-pro/search-results/using-a-shortcode/#Customising_the_Results

So that you have a copy of this template file in a search-filter sub-folder your (child) theme folder, ready to edit.

Anonymous

#76920

hi

I am not familiar with editing scripts. I just use default theme settings mostly.
So where would I find search page to paste this script code? and where in page do I paste script?

I followed directions and copied results.php from search filter pro folder into my themes folder. Now what?

Also how do I remove the category tags and the date displayed in results page?

Anonymous

#76922

I looked at results.php and I deleted the category, tags, date so they do not display in page. Is there a list of other script output parameters we can use to display in results.php?

So I still need to know what search page and where to paste your script to display results in grid.

Also I noticed the radio checkmarks are too close to category text in the search form. How do I format it to give some space in between.

This is what I have so far using shortcode in sidebar
http://www.sweetdreamsstudio.com/blog/

Trevor

#76984

Is there a list of other script output parameters we can use to display in results.php?

If you identify what you want to display, the code can be found in either the WordPress codex, on the WordPress StackExchange or in the documentation/forums of any plugin (like ACF). I can guide you if you need, but let me know what you want to show?

As far as scripts are concerned, what theme are you using? Many themes have a page where you can add scripts, otherwise there are plugins and other methods to do much the same. I just need to know what you have so I can recommend what best suits you. Clearly, the plugin route is easiest.

The radio button styling needs some Custom CSS. Again, how you add this is the same as for the script:

.searchandfilter li[data-sf-field-input-type="checkbox"] label, .searchandfilter li[data-sf-field-input-type="radio"] label, .searchandfilter li[data-sf-field-input-type="range-radio"] label, .searchandfilter li[data-sf-field-input-type="range-checkbox"] label {
    padding-left: 20px !important;
}

Anonymous

#77400

This reply has been marked as private.

Trevor

#77404

Do you have an example of a three grid page in your theme? The only one I could find uses masonry, which is hard to do. Doesn’t your theme come with Visual Composer also?

Anonymous

#77479

This reply has been marked as private.

Trevor

#77525

OK, I can see your site uses Masonry. It seems to load the script on all pages, so that should make it easier.

It uses this command to initialize masonry on the page:

hb_masonry();

So if we need to, we can hook into that. Otherwise it looks like all we need to do is add some code to the results.php file.

Where are you located? NYC? Do you have Skype, in which case we can do this together over skype share screen?

Anonymous

#78130

This reply has been marked as private.

[Author]

Posts