Docs

[jdy98p]

I’m looking to display the Search Results pages in a masonry view and the forum hasn’t had full answer that I can find. Is there an easy way to do this?

[Rue Nel]

Hello There,

Thanks for writing in!

What you are trying to accomplish requires a template customization, we would like to suggest that you use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

Once you have your child theme active and ready, please follow the following steps below:
1] Using Notepad or TextEdit or Sublime Text or any text editor, please create a new file in your local machine.
2] Insert the following code into that new file

<?php

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

$stack = x_get_stack();

if ( is_home() ) :
  $style     = x_get_option( 'x_blog_style' );
  $cols      = x_get_option( 'x_blog_masonry_columns' );
  $condition = is_home() && $style == 'masonry';
elseif ( is_archive() ) :
  $style     = x_get_option( 'x_archive_style' );
  $cols      = x_get_option( 'x_archive_masonry_columns' );
  $condition = is_archive() && $style == 'masonry';

elseif ( is_search() ) :
  $style     = x_get_option( 'x_archive_style' );
  $cols      = x_get_option( 'x_archive_masonry_columns' );
  $condition = is_search() && $style == 'masonry';
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(); ?>

3] Save the file named as _index.php
4] Upload this file to your server in the child theme’s folder
wp-content/themes/x-child/framework/views/global/

Please let us know if this works out for you.

[jdy98p]

Fantastic! Looks exactly like I wanted.

[Joao]

That is great to hear it.

Let us know if you need help with anything else.

Thanks,

Joao

[Matt B]

This doesn’t seem to work with the latest version of X, has anything changed? I see the results bar with several pages of results, but no products display.

[Rue Nel]

Hello There,

Thank you for updating this thread! To assist you better with this issue, would you mind providing us the url of your site with login credentials, if necessary, so we can take a closer look? This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

To do this, you can make a post with the following info:
– Link to your site

– WordPress Admin username / password (only if necessary)

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thank you.

[Matt B]

This reply has been marked as private.

[Nabeel A]

Hi there,

Please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.search article:nth-child(4n) {
    clear: both;
}
.search article {
    width: 30%;
    float: left;
    margin-right: 1%;
}

Let us know how this goes!

[Matt B]

No, I still get a blink of the full-width product image then it goes away and the results are blank. 🙁

[Christopher]

Hi there,

Please add this code to your customizer :

div#x-iso-container {
    height: auto !important;
}

Hope it helps.

[Matt B]

Hi Christopher!

That did help but now I have some issues with Masonry layout and the padding on the right is much greater than that on the left of the results. I’ll look into the CSS to see if it’s a display:block or related issue, but if you can look at it in the meantime, maybe you’ll know the cause faster than I can diagnose it.

Thanks for your help!

– Matt

[Christopher]

Hi there,

Please find this code :

.search article {
    width: 30%;
    float: left;
    margin-right: 1%;
}

And update it to :

.search article {
    width: 32%;
    float: left;
    margin-right: 1%;
}

Hope it helps.

[Author]

Posts