Add Custom Field link to thumbnail in results

Anonymous

#94405

Hi, I am customizing the search results using some of the responses I found here, but I have a more specific request, and I’m having trouble finding the answer. Please let me know if it has already been asked.

My search results are currently in a grid format showing the linked title and an unlinked thumbnail image. The linked title is linked to the project page (the_permalink). Full results.php below.

I need to modify this so that the thumbnail image is linked, but it should be a link I can customize. I would like to customize the link using the Custom Fields when I create the project/post. For example, I would create a custom field called “artistpage” and define the link there. (Is this possible?)

The end goal: Users search artist projects until they find what they like, then click the image to reach the artist page. The artist page contains many portfolio examples that appear within the search, plus biography, contact info, etc – it can’t be an individual image post. (I have considered a redirect from the project/post page, but I’d rather use a direct link if possible. In either case, I need help adding the link to the thumbnail image.)

Thank you for your help and advice.

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: 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() )
{
	?>
	
	<div class="sixteen columns">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>
	
	<?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;?>">
			<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
			<p><br /><?php the_excerpt(); ?></p>
			<?php 
				if ( has_post_thumbnail() ) {
					echo '<span class="responsive">';
					the_post_thumbnail("small");
					echo '</span>';
				}
			?>
			<p><?php the_category(); ?></p>
			<p><?php the_tags(); ?></p>
			
			
		</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="sixteen columns">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>
	<?php
}
else
{
	echo "No Results Found";
}
?>

Trevor

#94498

Yes, this is possible. The snippet that inserts the thumbnail in your code is this:

<?php 
  if ( has_post_thumbnail() ) {
    echo '<span class="responsive">';
    the_post_thumbnail("small");
    echo '</span>';
  }
?>

(Note that many people change the ‘small’ to ‘thumb’ to load and even smaller image)

To output this as an image linked to the post, the code would be this:

<?php
  if ( has_post_thumbnail() ) { ?>
    <span class="responsive"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail("small");?></a></span>
  <?php	} ?>

I am not sure about your use of span to add the responsive bit. In my theme (bootstrap based) it adds img-responsive this way:

<?php the_post_thumbnail("small", array( 'class' => 'img-responsive' ));?>

In your case, I do not know what your field is, but your code to output that field needs to replace <?php the_permalink(); ?> in this. Maybe like this <?php the_field('artistpage'); ?>

Anonymous

#94715

Hi, thank you for this help – it got me started in the right direction. Here is the code snippet that finally worked:

<?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	} ?>	

I don’t really understand the span issue, but this worked for me.

I have a follow-up question, related to the horizontal grid display. I am willing to ask again in another topic, if you prefer – please let me know:

I’d rather display 4 posts in each row, instead of 3 in a row with the fourth row empty. I have tried modifying the numbers and editing other code, but the result isn’t correct. How can I create a grid display with 4 columns, each containing search results?

Trevor

#94836

Does the previous post that has the results.php in give you the 3 columns grid, and if so, how did you change it (what did you change it to)? and do you have a sample page where I can see this in action? Sometimes, you code correctly a four column grid but a right margin on the last element of the row makes it appear on the next row.

Anonymous

#95003

Hi, I took the results.php template from a sample I found in this forum, and it has always given 3 columns instead of 4. You can view the search at the development location here. Here is the entire 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="sixteen columns">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>
	
	<?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="sixteen columns">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>
	<?php
}
else
{
	echo "No Results Found";
}
?>

Thank you for your help!

Trevor

#95118

I can see what is happening now. One of the bits of CSS from your theme is being over-written, this bit:

.last {
    margin-right: 0;
}

You need something like this:

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

Anonymous

#95238

Brilliant, thank you! It looks great now. Thanks for the great plugin and support!

[Author]

Posts