Customizing Results

Sarah B Gregg

#219384

Hello
I have a successful Search & Filter form and results set up on a website. It showcases various Colors and displays Posts, filterable by category and tag.
Now, I want to create a second gallery to display Projects. These will show Images (not posts with featured image). I’m having trouble getting it to display properly. I believe I need to customize the results templates.However, I’m having all sorts of trouble figuring out this code. Can you help me?
Here is the page I’m trying to customize: https://nbgqa.com/project-gallery/.
Its trying to display the featured image and post title. But I want it to display the medium sized image from the gallery, link to the full size image, and then show the Caption and Description.
Here is the existing template code:

<?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=”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=”results-container”>
<?php
while ($query->have_posts())
{
$query->the_post();

?>
<div class=”result-box”>
“>
<?php
if ( has_post_thumbnail() ) {
echo ‘<p>’;
the_post_thumbnail(“small”);
echo ‘</p>’;
}
?>

<h2>“><?php the_title(); ?></h2>

</div>

<?php
}
?>
</div>

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

Many many thanks in advance for your help!
Sarah

Add New Note to this Reply

Trevor Moderator

#219404

Here is the Codex for the_post_thumbnail:

https://developer.wordpress.org/reference/functions/the_post_thumbnail/

You need to change "small" to "medium"

In the standard results.php, see lines 56-62 (yours may now be different):

<?php 
if ( has_post_thumbnail() ) {
  echo '<p>';
  the_post_thumbnail("small");
  echo '</p>';
}
?>

They need the link adding (with an alt to show the caption as a title), like this:

<?php
if ( has_post_thumbnail() ) { ?>
  <a alt="<?php esc_html(get_the_post_thumbnail_caption());?>" href="<?php the_permalink(); ?>"><?php the_post_thumbnail("medium");?></a>
<?php	} ?>

I *think* that is right. I do not think that esc_html(get_the_post_thumbnail_caption()); needs to be used with echo.

You can use the same to put the caption on the page, like this:

<h3 class="image-caption"><?php esc_html(get_the_post_thumbnail_caption());?></h3>

and to get the description, I think some thing like this:

<div class="image-description>
<?php echo get_post(get_post_thumbnail_id())->post_excerpt;?>
</div>

You might need paragraph tags around the actual description, inside the div, like this:

<div class="image-description><p>
<?php echo get_post(get_post_thumbnail_id())->post_excerpt;?>
</p></div>

Let me know if that helps, or doesn’t work?

Add New Note to this Reply

Sarah B Gregg

#219644

Thank you, Trevor. Some of it worked, but some of it didn’t. I was trying to create the gallery using just media, but it seems now, easier to set up a post for each project. This way the descriptions/excerpts can show.
My best regards,
Sarah

Add New Note to this Reply

Trevor Moderator

#219648

Can I close this thread then?

Add New Note to this Reply

Sarah B Gregg

#219650

Yes

Add New Note to this Reply

[Author]

Posts