Grid results display incorrectly with pagination

Anonymous

#96787

Hi, I have been working on a grid search results.php file to make the results appear consistently during filtering. The search results grid works great until there are more results showing than appear on a single page, requiring pagination. Then the “Older Posts” and “Page 1 of 2” appear inside the grid, and displace the search results.

Development page: http://brushproject.brightartmedia.com

I have tried to resolve this by editing the results.php myself, without luck. I’d appreciate any help getting this to work better!

<?php
/**
 * Search & Filter Pro 
 *
 * Sample Results Template
 * 
 * @package   Search_Filter
 * @author    Ross Morsali
 * @link      http://www.designsandcode.com/
 * @copyright 2015 Designs & Code
 * 
 * Note: This template has been modified to link search results 
 * images to artist pages that need to be defined in 
 * Custom Fields in the individual image post. 
 * 
 * The custom field is “artistpage” . 
 * The image in search results will incorporate the link you set  
 * for that custom field. If no link is defined, the image will
 * not link to an artist page.
 *
 * 
 *
 */

if ( $query->have_posts() )
{
	?>
	
	<div class="sixteencolumns">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( 'More Murals', $query->max_num_pages ); ?></div>
		<div class="nav-next"><?php previous_posts_link( 'Recent Murals' ); ?></div>
		
		

		<?php
			/* example code for using the wp_pagenavi plugin */
			if (function_exists('wp_pagenavi'))
			{
				echo "<br />";
				wp_pagenavi( array( 'query' => $query ) );
			}
		?>
	</div></div>
	
	<?php
	$column_count = 0;
	$last_class = "";
	while ($query->have_posts())
	{
		$query->the_post();

		if ($column_count == 0) echo '<div class="sixteen columns">';
		?>
		<div class="one_fourth<?php echo $last_class;?>">
			
		
<?php
  if ( has_post_thumbnail() ) { ?>
    <span class="responsive"><a href="<?php echo get_post_meta($query->post->ID,'artistpage',true); ?>">
<?php the_post_thumbnail("small");?></a></span>
  <?php	} ?>		
		</div>
		
		<?php
	 $column_count ++;
 if ($column_count == 4) {
			$column_count = 0;
			echo '</div>';
			$last_class = "";
		}
if ($column_count == 3) {
			$last_class = " last";
		}

				}

	if ($column_count > 0) echo '</div>';
       	?>

	<div class="sixteencolumns">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( 'More Murals', $query->max_num_pages ); ?></div>
		<div class="nav-next"><?php previous_posts_link( 'Recent Murals' ); ?></div>
		<?php
			/* example code for using the wp_pagenavi plugin */
			if (function_exists('wp_pagenavi'))
			{
				echo "<br />";
				wp_pagenavi( array( 'query' => $query ) );
			}
		?>
	</div></div>
	<?php
}
else
{
	echo "No Results Found";
}
?>

CSS:

.last {    
margin-right: 0 !important;
}

Trevor

#96815

Can you show me an example page with search example so I can see?

Anonymous

#96823

Here is the page without any filter applied:

http://brushproject.brightartmedia.com/wp-content/uploads/2017/03/SearchResults.jpg

When I do the search, the current results are less than 16, so pagination isn’t an issue yet, but I expect it will be. I will add more posts to confirm this.

Thanks for looking into this,

Liz

Anonymous

#96850

Here’s something else strange that happens when I filter using just one search term, even though pagination is not an issue here, with only 11 results. This returns fewer results than it should, and when you refresh the page, the error corrects.

http://brushproject.brightartmedia.com/wp-content/uploads/2017/03/SearchResults2.jpg

I hope this helps,

Liz

Trevor

#96878

Hi Liz, getting late, so tomorrow it is.

Trevor

#96934

Hi Liz

In one place you have this:

<div class="sixteen columns">

and in another you have this?

<div class="sixteencolumns">

Not sure if that was deliberate. Try adding the clearfix class to them, like this:

<div class="sixteencolumns clearfix">

Anonymous

#97045

Hi, that was my mistake – I was experimenting with edits to see what effect it would have. I have made the changes you suggested, and it looks like clearfix fixed the starting grid. (Thank you!)

However, when I click on one category, it still shows fewer results, and moves one over. When I refresh the page, the problem is fixed. See the result here:

http://brushproject.brightartmedia.com/wp-content/uploads/2017/03/SearchResults3.jpg

Do you have any suggestions for what has caused this error? Could it be an ajax issue?

Current results.php:

<?php
/**
 * Search & Filter Pro 
 *
 * Sample Results Template
 * 
 * @package   Search_Filter
 * @author    Ross Morsali
 * @link      http://www.designsandcode.com/
 * @copyright 2015 Designs & Code
 * 
 * Note: This template has been modified to link search results 
 * images to artist pages that need to be defined in 
 * Custom Fields in the individual image post. 
 * 
 * The custom field is “artistpage” . 
 * The image in search results will incorporate the link you set  
 * for that custom field. If no link is defined, the image will
 * not link to an artist page.
 *
 * 
 *
 */

if ( $query->have_posts() )
{
	?>
	
	<div class="sixteencolumns clearfix">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( 'More Murals', $query->max_num_pages ); ?></div>
		<div class="nav-next"><?php previous_posts_link( 'Recent Murals' ); ?></div>
		
		

		<?php
			/* example code for using the wp_pagenavi plugin */
			if (function_exists('wp_pagenavi'))
			{
				echo "<br />";
				wp_pagenavi( array( 'query' => $query ) );
			}
		?>
	</div></div>
	
	<?php
	$column_count = 0;
	$last_class = "";
	while ($query->have_posts())
	{
		$query->the_post();

		if ($column_count == 0) echo '<div class="sixteencolumns clearfix">';
		?>
		<div class="one_fourth<?php echo $last_class;?>">
			
		
<?php
  if ( has_post_thumbnail() ) { ?>
    <span class="responsive"><a href="<?php echo get_post_meta($query->post->ID,'artistpage',true); ?>">
<?php the_post_thumbnail("small");?></a></span>
  <?php	} ?>		
		</div>
		
		<?php
	 $column_count ++;
 if ($column_count == 4) {
			$column_count = 0;
			echo '</div>';
			$last_class = "";
		}
if ($column_count == 3) {
			$last_class = " last";
		}

				}

	if ($column_count > 0) echo '</div>';
       	?>

	<div class="sixteencolumns clearfix">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( 'More Murals', $query->max_num_pages ); ?></div>
		<div class="nav-next"><?php previous_posts_link( 'Recent Murals' ); ?></div>
		<?php
			/* example code for using the wp_pagenavi plugin */
			if (function_exists('wp_pagenavi'))
			{
				echo "<br />";
				wp_pagenavi( array( 'query' => $query ) );
			}
		?>
	</div></div>
	<?php
}
else
{
	echo "No Results Found";
}
?>

Trevor

#97067

Is it possible to see the page actually in use (live)?

Anonymous

#97080

Yes, I am actively adding more projects (posts) into the search now. You can test the search on the main page here:

http://brushproject.brightartmedia.com/

To duplicate the results in the image, go to the main page, and then click on “Sam” in the Artist filter (the last filter).

I don’t know if the direct link to the results will get the same results, but here it is:

http://brushproject.brightartmedia.com/?_sft_artist=sam-shannon

Similar problems crop up with other artists, and then are fixed when you refresh the browser. “George” shows only 1 result, and then refreshes to give 12 results.

(I notice that some other categories do not seem to have this problem.)

Thanks,

Liz

Trevor

#97114

For me, every search gives the correct results?

I suspect some caching going on here. Do you use a CDN like Cloudflare? Do you have a cache plugin (like W3TotalCache)?

[Author]

Posts