New to the community? Start here

How to display the_post_thumbnail in global site template

I’ve built a nice search result template for my multifunctional theme and now I would like to integrate global site search. Please advise how I can show the featured image in the search result?

I have<?php if ( has_post_thumbnail() ) { ?>which doesn’t return the correct value

Thu, 10 May 2018 12:00:11
  • Predrag Dubajic
    • Support

    Hey Stefan,

    Hope you're doing well :slight_smile:

    You will need to edit /wp-content/plugins/global-site-search/templates/global-site-search.php in order to include image in the template.

    And to add the image you could use this code snippet:

    $n_post = network_get_post();
    
switch_to_blog($n_post->BLOG_ID);
    
echo get_the_post_thumbnail( $n_post->ID, array( 100, 100) );

    Here's an example of it being added in the code:

    [attachments are only viewable by logged-in members]

    And the result on search page:

    [attachments are only viewable by logged-in members]

    Hope that helps :slight_smile:

    Best regards,

    Predrag

  • Stefan
    • Design Lord, Child of Thor

    Thanks Predrag,

    Thanks, I am doing well, I hope so do you.

    Your code indeed does return a 100×100 image of the featured image. But <?php if ( has_post_thumbnail() ) { ?> still doesn’t work.

    I have two variations of search result page I would like to build. The simpler version would still require the has_post_thumbnail check to work as it would otherwise return an empty link.

    <?php if ( has_post_thumbnail() ) { ?>
    
<a>" title="<?php the_title(); ?>" rel="bookmark">
    
<?php the_post_thumbnail('25square'); ?>
    
</a>
    
<?php } ?>

    And the second search result template checks the thumbnail dimensions and outputs 2 different sizes depending on its ratio. Panorama images with a width to height ratio of more than 1.98 will get a “panorama” class and are being displayed 2 columns wide. And if the post does not have a featured image, it shows a default image.

    Here a simplified version of the code:

    <?php if ( has_post_thumbnail() ) { ?>

    Then I use wp_get_attachment_image_src( get_post_thumbnail_id($post->ID) to calculate the image ratio.

    After adding a css class to the

    list item according to the image ratio, I show the thumbnail.

    <?php if ($ratio > 1.98): ?>
    
<?php the_post_thumbnail('100width'); ?>
    
<?php else: ?>
    
<?php the_post_thumbnail('50width'); ?>
    
<?php endif; ?>
    

    
<?php } else { ?>
    
<li class="noimg">
    
<a><img src="data:image/png;base64..."></a>
    
<?php } ?>

    Any idea on how to get “has_post_thumbnail()” working, or how to create a network_has_post_thumbnail() so that the rest of the code still works, ratio is being calculated, etc…

    Should I post the actual code with the ratio calculation or is the logic described above sufficient?

    Thanks for your help

    Stefan

  • Adam
    • Support Gorilla

    Hi Stefan

    Thanks for your response.

    I’m afraid that what you exactly trying to achieve will not be possible. The key point here is how the plugin works. Or, rather, how it returns search results.

    Let’s say you got a custom template (for your search page) with a simplest WP loop like that:

    <?php
    
if ( have_posts() ) {
    
while ( have_posts() ) {
    
the_post();
    

    
// display title
    

    
the_title();
    

    
// display thumbnail
    
if ( has_post_thumbnail() ) {
    
the_post_thumbnail('small');
    
}
    

    
// display content
    
the_content();
    

    
} // end while
    
} // end if
    
?>

    That will work fine if used with standard search but the downside is that standard search won’t include “global results”. The “Global Site Search” plugin will add up those “global results” but it is using the_content filter to actually display them.

    That means that entire output goes in this line:

    the_content();

    In other words, it hooks to “the_content()”, takes over it and in this place it prints out all search results (including even paging). The “the_post_thumbnail()” from the standard loop from your custom template would be called way before the plugin returns any data so it’s of no use in this particular case.

    However, when the plugin prepares the content to be displayed it does look for a specific search template, named “global-site-search.php” (this is the file that my colleague Predrag suggested to modify). So what you can do a bit differently could be to go like this:

    1. create your custom template like you already did but leave only the most basic loop there (skip thumbnails etc, just build everything that should be “around” search results).

    2. instead of modifying plugin files, copy original

    /wp-content/plugins/global-site-search/templates/global-site-search.php file

    to the

    /global-site-search/global-site-search.php

    in your theme’s folder.

    3. Then modify that template (follow Predrag’s suggestion to add featured images and make other changes if you want).

    You can think of that like a regular template that includes “sub-template” to handle loop (similar to a common “get_template_part()” scenario). Basically: you build your “search template” as a main search page template and then modify the “global-site-search.php” template as a “search sub-template”.

    Note:

    1) if you take a closer look into the “global-site-search.php” template file, you will notice that it in fact contains a full loop etc, pretty much like regular templates – except it’s got some additional/different template tags and it fully replaced “the_content” of the standard WP loop on a regular search page

    2) as for thumbnail size; Predrag’s code uses this line:

    echo get_the_post_thumbnail( $n_post->ID, array( 100, 100) );

    but the function here is a standard “get_the_post_thumbnail()” (WP-native) function so you should be able to replace it with your “conditional image size code” like this:

    if ($ratio > 1.98):
    
echo get_the_post_thumbnail( $n_post->ID, '100width');
    
else:
    
echo get_the_post_thumbnail( $n_post->ID, '50width');
    
endif;

    Best regards,

    Adam

  • Stefan
    • Design Lord, Child of Thor

    Hey Adam,

    Thanks for your response as well.

    I forgot to mention that I indeed try to use the code from the normal wp-core search results template for the global-site-search.php (a copy of the file in my theme folder, not the plugin file). But it wasn’t as simple as copying the normal code, things like <?php if ( has_post_thumbnail() ) { ?> didn’t work. (Even if the posts had a thumbnail, the code would return the default image as if it couldn’t find the featured image.)

    pretty much like regular templates – except it’s got some additional/different template tags

    Maybe there is the problem, I can’t figure out which template tags are different, which template tags are allowed (is there documentation?), or how to adapt the normal template tags to make them work in the global-site-search.php template.

    And on top of that, I am not a PHP wizard like you and your support crew, so I was really hoping the code I got working in the normal wp search, could be easily adapted to the global site search.

    Should I post the code from the my normal search results templates and my attempt at modifying it for global-site-search.php? Or does someone want to hop on a live chat and try to figure things out?

    Thanks for your help

    Stefan

  • Predrag Dubajic
    • Support

    Hi Stefan,

    Could you try using something like this for your check instead:

    $check_for_thumb = get_the_post_thumbnail($n_post->ID);
    
if ( !empty($check_for_thumb) ) {

    Here’s an example usage:

    <div class="mu-featured-image-holder">
    
<?php
    
$n_post = network_get_post();
    
switch_to_blog($n_post->BLOG_ID);
    
$check_for_thumb = get_the_post_thumbnail($n_post->ID);
    

    
if ( !empty($check_for_thumb) ) {
    
echo get_the_post_thumbnail( $n_post->ID, array( 100, 100) );
    
} else { ?>
    

    
<li class="noimg">
    
<a><img src="IMAGE"></a>
    

    
<?php } ?>
    
</div>

    Hope that helps.

    Best regards,

    Predrag

  • Stefan
    • Design Lord, Child of Thor

    Hey Predrag,

    Great, it works. Thanks a lot!

    And wp_get_attachment_image_src( get_post_thumbnail_id($n_post->ID) to retrieve the actual image and calculate the width & height ratio to add a “panorama” class, works too.

    I have to get some clients work done today, but when I get around to finish styling the global search results page, I will post a screenshot. :slight_smile:

    Best regards

    Stefan