Relevanssi and X search results page

Support
#1

Hi there, just curious to hear if there are any experiments at improving search in X theme.
The default search feature is not getting much user input.

The Relevanssi plugin helps find content but the results display needs some modifications.
Perhaps reducing (or removing) the large featured image in the results page? Maybe reducing title font size (from 250% to say 150%) so that you can see plenty of search results without having to scroll?
I did some css (using the Integrity stack) to make the search results page look similar to the category archive (masonry)

The headline or title styles are a bit different. Maybe you can help me figure that out?

Please see:

#2

Hi there,

Thanks for posting in.

The theme uses Wordpress default search functionality, with the just styled result. The search result it similar to archive page so the layout is inherited to archive layout. If you wish, you can turn off your archive masonry, then I could provide some styling to make the search result like a small listing.

Thanks!

#3

Hey there, thanks for the reply. If possible, I´d like to keep the masonry on the archive pages and change only the search results page. Maybe I need to create a template for that.

#4

Hi there,

Actually, in the latest version, your search result page shouldn’t display masonry at all. Example this code

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() ) :
  $condition = false;
endif;

Disable it for search page by setting the $condition to false. I also checked in my installation and search results are not displayed in masonry. Would you mind providing your admin and FTP login credentials in a secure note? I like to check your existing templates.

Thanks!

#5

Hi there, here goes:

#6

Hi there,

Thanks for the details but it doesn’t seem to work when I tried to login to the admin,

Kindly also provide us with the FTP details to your site so that we can check the files.

Thank you.

#7

Sorry about that here you go:

#8

Hi there,

It’s not working, I also tried adding this and it’s not working, but this works okay on my installation.

jQuery(document).ready(function($) {

    $('.search-results .x-main').wrapInner('<div id="x-iso-container" class="x-iso-container x-iso-container-posts cols-3 isotope">');
    var $container = $('.search-results #x-iso-container');

    $container.before('<span id="x-isotope-loading"><span>');

    $(window).on('load', function() {
      $container.xIsotope({
        itemSelector   : '.search-results .x-iso-container > article',
        resizable      : true,
        filter         : '*',
                containerStyle : {
          overflow : 'hidden',
          position : 'relative'
        }
      });
      $('.search-results #x-isotope-loading').stop(true,true).fadeOut(300);
      $('.search-results #x-iso-container > article').each(function(i) {
        $(this).delay(i * 150).animate({'opacity' : 1}, 500);
      });
    });

    $(window).xsmartresize(function() {
      $container.xIsotope({  });
    });

  });

The thing is there is existing customization in your search result to mimic the masonry layout, maybe it’s the conflicting one. But I can’t find it, the reason is that your X them version doesn’t match with the cornerstone version you have. Could you try updating your X theme to the very latest, then delete you existing cornerstone (1.3.3) and let the theme install it? I could do that but given that you have existing customization, then please backup your site first.

Thanks!

#9

Ok, Rad. Thanks for your feedback. I will look at this again and get back to you.
I did customize the search results page to use masonry style.

#10

Let us know how it goes!

#11

Hi, I made a duplicate of the site here:

#12

Hi there,

Since it uses old version then I applied an older implementation of the code too, which is this

jQuery(document).ready(function($) {

    $('.search-results .x-main').wrapInner('<div id="x-iso-container" class="x-iso-container x-iso-container-posts cols-3 isotope">');
    var $container = $('.search-results #x-iso-container');

    $container.before('<span id="x-isotope-loading"><span>');

    $(window).on('load', function() {
      $container.isotope({
        itemSelector   : '.search-results .x-iso-container > article',
        resizable      : true,
        filter         : '*',
                containerStyle : {
          overflow : 'hidden',
          position : 'relative'
        }
      });
      $('.search-results #x-isotope-loading').stop(true,true).fadeOut(300);
      $('.search-results #x-iso-container > article').each(function(i) {
        $(this).delay(i * 150).animate({'opacity' : 1}, 500);
      });
    });

    $(window).smartresize(function() {
      $container.isotope({  });
    });

  });

Please check your search result page and it’s now on masonry. The code is added to your customizer’s custom javascript.

Thanks!

#13

Fantastic! Thanks for your help Rad.

#14

Glad that we could be of a help :slight_smile: