Search Results for 'masonry'

[Ross]

Scratch that, I just removed the text “Search Results for:” (and its container) via firebug, resized the page and masonry seemed to work perfect 🙂

Thanks

[Ross]

Hey Marsha

Really you should always specify a custom template – otherwise you will not be able to specifically control what template is being used.

That being said, it sounds like the template that is being used has a better layout for the masonry code, than the one being used when you specify it by file name.

What I would think to do is

1) Identify the template file being loaded, when you don’t tick “use custom template”
2) Identify the differences between this template, and the template being used when you do tick “use custom template”

I think this is the best approach to figure out where something is going wrong.

The only other thing I would say is, the page title on your search results, seems to be inside the masonry container, so maybe that is throwing things off? Maybe just remove the text “Search Results for:”

Thanks

[Anonymous]

I am trying to get my search results to display properly with my masonry theme. I attempt to fix it on my own. I unchecked “Use a custom template for results?” but only my taxonomies displayed any results after that – anything under categories came back with “No results found”. So I put the check mark back, but now the formatting is still wonky. http://couponingincanada.ca/

[Anonymous]

Hi Ross,

Thanks for this.

I was using Shortcodes display method before, but will change it to archive in order to use the Masonry display.

However, with the archive technique, how do display the search results on the same page. It seems to direct to another URL when I switch to Archive method.

[Anonymous]

Hi Ross, I need to integrate your plugin with my new theme.

The template that outputs the search results has this code:

<?php

// =============================================================================
// VIEWS/GLOBAL/_INDEX.PHP
// -----------------------------------------------------------------------------
// Includes the index output.
// =============================================================================

$stack = x_get_stack();

if ( is_home() ) :
  $style     = x_get_option( 'x_blog_style', 'standard' );
  $cols      = x_get_option( 'x_blog_masonry_columns', '2' );
  $condition = is_home() && $style == 'masonry';
elseif ( is_archive() ) :
  $style     = x_get_option( 'x_archive_style', 'standard' );
  $cols      = x_get_option( 'x_archive_masonry_columns', '2' );
  $condition = is_archive() && $style == 'masonry';
elseif ( is_search() ) :
  $condition = false;
endif;

?>

<?php if ( $condition ) : ?>

  <?php x_get_view( 'global', '_script', 'isotope-index' ); ?>

  <div id="x-iso-container" class="x-iso-container x-iso-container-posts cols-<?php echo $cols; ?>">

    <?php if ( have_posts() ) : ?>
      <?php while ( have_posts() ) : the_post(); ?>
        <?php if ( $stack != 'ethos' ) : ?>
          <?php x_get_view( $stack, 'content', get_post_format() ); ?>
        <?php else : ?>
          <?php x_ethos_entry_cover( 'main-content' ); ?>
        <?php endif; ?>
      <?php endwhile; ?>
    <?php else : ?>
      <?php x_get_view( 'global', '_content-none' ); ?>
    <?php endif; ?>

  </div>

<?php else : ?>

  <?php if ( have_posts() ) : ?>
    <?php while ( have_posts() ) : the_post(); ?>
      <?php x_get_view( $stack, 'content', get_post_format() ); ?>
    <?php endwhile; ?>
  <?php else : ?>
    <?php x_get_view( 'global', '_content-none' ); ?>
  <?php endif; ?>

<?php endif; ?>

<?php pagenavi(); ?>

[Ross]

Hi there

Creating a layout for your search results is exactly the same as creating a layout for a regular WordPress template – so really there are many ways to achieve what you want, however S&F does not do this for you.

There are plenty of resources out there but I guess you will want something along the lines of:

If you are looking for a pintrest style layout then there are resources out there (I haven’t tested any personally) –

http://www.danbirlew.com/updated-masonry-in-wordpress/

http://www.wpbeginner.com/wp-themes/how-to-use-masonry-to-add-pinterest-style-post-grid-in-wordpress/

Thanks

Thanks

[Anonymous]

interesting question
after looking to ryan’s code, i managed to do this with this function

        $(".searchandfilter").on("sf:ajaxfinish",function(){
          var area = jQuery('.isotope-area');
          setTimeout(function() {
            area.isotope({
              itemSelector: '.column',
              masonry: {
                columnWidth: 1
              }
            });
          }, 150);
        });

If this can help somebody else…

[Anonymous]

Thank you Ross. I think I’ll use results.php and will just add some code from the masonry template to make it look decent.

Can you give me some guidance/directions on how to find which part of my theme is causing daterange field not working?

[Ross]

Hey Dmitriy

To create your layout as you mention is going to require a fair bit of coding – you’ll need some decent knowledge of html/css/js…

Not sure if you’ve read the differences between archive & shortcode methods:

http://www.designsandcode.com/wordpress-plugins/search-filter-pro/docs/display-results/

Anyway, if you’re trying to create a masonry layout based on something existing in your theme, then the first thing I would do is is copy the html / loop structure from one of your templates that is using masonry,

Either find the PHP file responsible for displaying the masonry layout in your theme directory, or alternatively view the source HTML of a page which is displaying a masonry layout.

You’ll have to copy the html over to your results.php – but it might not be straight forward – this will require tweaking.

In all cases I’m aware of, any true masonry layout requires Javascript, to make everything fit together and stack nicely. You’ll have to figure out how to trigger the masonry via JS in your theme. You’ll need to load the masonry script whenever the page loads, and whenever new results are loaded in – check the first question on the FAQs on how to detect when new results have loaded –

http://www.designsandcode.com/wordpress-plugins/search-filter-pro/faqs/

As mentioned above, it requires a certain level of knowledge to get a masonry layout working in your theme.

Alternatively, if you used the archive method (and overcame any issues there), I’m sure the html structure would already be correct, however you would still need to apply the masonry/JS logic to these pages.

Thanks

[Anonymous]

OK, I managed to get shortcode working per your suggestions. I created a new page w/o any sidebar and put both search form and search results shortcodes in it, and it’s started to work. But I noticed that it works only if ‘The relationship between tag, category and taxonomy fields’ is set to either DEFAULT, or OR. AND doesn’t work.

I also tried with both shortcode and S&F widget in the sidebar and it also works!!

Now, how do I use my masonry template to display results instead of your default template you have? As I said the template has a more complex custom query code in it. If I post it here can you give me a suggestion how to modify it?

Thanks,
D.