How display Result page as Grid ?

Trevor

#78170

I have sent you a contact request. We are ahead of you by 5 hours, so sometime in your morning would be best.

Anonymous

#81905

This reply has been marked as private.

Trevor

#81991

This reply has been marked as private.

Anonymous

#82442

This reply has been marked as private.

Anonymous

#83164

This reply has been marked as private.

Trevor

#83677

I have written a new results.php for you:

<?php
/**
 * Search & Filter Pro 
 *
 * Sample Results Template
 * 
 * @package   Search_Filter
 * @author    Ross Morsali
 * @link      http://www.designsandcode.com/
 * @copyright 2015 Designs & Code
 * 
 * Note: these templates are not full page templates, rather 
 * just an encaspulation of the your results loop which should
 * be inserted in to other pages by using a shortcode - think 
 * of it as a template part
 * 
 * This template is an absolute base example showing you what
 * you can do, for more customisation see the WordPress docs 
 * and using template tags - 
 * 
 * http://codex.wordpress.org/Template_Tags
 *
 */

if ( $query->have_posts() )
{
	?>
	
	Found <?php echo $query->found_posts; ?> Results<br />
	Page <?php echo $query->query['paged']; ?> of <?php echo $query->max_num_pages; ?><br />
	
	<div class="pagination">
		
		<div class="nav-previous"><?php next_posts_link( 'Older posts', $query->max_num_pages ); ?></div>
		<div class="nav-next"><?php previous_posts_link( 'Newer posts' ); ?></div>
		<?php
			/* example code for using the wp_pagenavi plugin */
			if (function_exists('wp_pagenavi'))
			{
				echo "<br />";
				wp_pagenavi( array( 'query' => $query ) );
			}
		?>
	</div>
	<div class="col-9 hb-equal-col-height hb-main-content">
		<div id="hb-blog-posts" class="hb-blog-grid masonry-holder clearfix" data-layout-mode="fitRows" data-categories="" data-column-size="col-4">
	
	<?php
	while ($query->have_posts())
	{
		$query->the_post();
		
		?>
   <article id="post-<?php echo get_the_ID();?>" class="col-4 post-<?php echo get_the_ID();?> post type-post status-publish format-standard has-post-thumbnail hentry" itemscope="" itemtype="http://schema.org/BlogPosting">
				<div class="featured-image">
					<a href="<?php the_permalink(); ?>">
			<?php 
				if ( has_post_thumbnail() ) {
					the_post_thumbnail("small");
					?>
        <div class="featured-overlay"></div>
        <div class="item-overlay-text" style="opacity: 0;">
          <div class="item-overlay-text-wrap" style="padding-top: 0px;"> <span class="plus-sign"></span> </div>
        </div>
   <?php
				}
			?>
					</a>
				</div>
				<div class="post-content">
					<div class="post-header">
   			<h2 class="title" itemprop="headline"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
					</div>
 			 <p><?php echo get_the_excerpt(); ?>
	 			<br /><a href="<?php the_permalink(); ?>" class="read-more">Read More</a>
		 		</p>
				</div>
  	</article>
		
		<?php
	}
	?>
		</div>
 </div>
 Page <?php echo $query->query['paged']; ?> of <?php echo $query->max_num_pages; ?><br />
	
	<div class="pagination">
		
		<div class="nav-previous"><?php next_posts_link( 'Older posts', $query->max_num_pages ); ?></div>
		<div class="nav-next"><?php previous_posts_link( 'Newer posts' ); ?></div>
		<?php
			/* example code for using the wp_pagenavi plugin */
			if (function_exists('wp_pagenavi'))
			{
				echo "<br />";
				wp_pagenavi( array( 'query' => $query ) );
			}
		?>
	</div>
	<?php
}
else
{
	echo "No Results Found";
}
?>

Anonymous

#85134

This reply has been marked as private.

Trevor

#85241

The masonry script is not applying itself to the posts. And thus each post has a left position of 0. I do not know how your theme applies the script, and look as I try, I cannot see it.

We may have to go about this an entirely different way. Are you able to make an equivalent of the blog page using visual composer and the Post Masonry Grid element (you may have to design a custom layout for it)?

[Author]

Posts