Feature request: option to add featured image to search results

Hi Antoine,

Can you please clarify, do you want the featured images themselves to be part of the search results (so a featured image of a tree to appear when you search for “tree” for example) or do you want the resulting posts’ / pages’ featured images (if available) to be shown in the search results?

Oliver

Hi Oliver,

The latter. So for instance, if I search for “splendens” (https://dragonflies.online/?s=splendens) I’d get the search results I get now (previews of the pages for Calopteryx splendens and Macromiidae) accompanied by their respective featured images alongside the text.

OK, so the short answer is “yes”, I think we can do this by using the get_template_part_template-parts/post/content hook we can inject a featured image above the post / page excerpt if available. Making sure to only inject the image when the $slug is set to “excerpt” and that is_search() is true.

I will add this to our “to do” list and let you know how I get on.

Oliver

Awesome! Thank you very much Oliver.

All done.

Update the plugin to the latest version and you will find a checkbox in “Customizer – General Options – Show Images in Search”.

Let me know if this does what you require.

Oliver

I did not know I needed that, but now I do.
It does not look the same as on the main page for me though. I’m using a child theme, but I don’t think I changed that part.

A search like https://www.cnx-software.es/?s=sonoff shows the image on top first, then the title and excerpt under, while on the main page, we’ll see the title first, then the image on the left and the excerpt on the right.

Brilliant! It does exactly what I hoped it would. I’m not sure what @cnxsoft means by the main page, does this refer to the posts themselves? I get identical results when I perform a search from the main page or from a widget in the footer. I’m very happy with the result.

Should I mark this as resolved or to you want me to keep this open for cnxsoft?

@cnxsoft I think what you mean is that the layout of posts in the search results is different to the layout of the posts that are shown on the homepage. I’m afraid this cannot be helped because we are injecting the image before the post article itself. It may be possible to float the images to the left and make them smaller which might help a bit. Or alternatively it may require some JavaScript to forcibly move the images into the article after the HTML has loaded. If you would like me to investigate either of these possibilities, let me know.

@aevdh That’s great, I’ll mark it as “Resolved” now as your original request has been satisfied.

Oliver

Great, thank you very much!

@domainsupport I understand. It’s not super important. I’ll try to find another method. Thanks for the work you do on the plugin.

Hi,

OK, we’ve looked into this again and the CSS float won’t work on its own, you need a bit of JavaScript …

<script type="text/javascript">
    (function($) {
        $('#primary>#main>.post-thumbnail').each(function() {
  $(this).insertAfter($(this).next('article').find('.entry-header'));
});
    })(jQuery);
</script>

Inject this into the footer of your page using a plugin like Simple Custom CSS and JS.

Let us know if that works for you and we will add it to the next plugin update.

Oliver

Thanks @domainsupport It does the trick, now the search results look just like the home page on my website.

I’ve got to say that does look better. ?? Good call, @cnxsoft

OK, great ??

I’ll let you know as soon as I’ve pushed a new update.

Oliver

To update this thread we have just pushed a new version of the plugin with the above JavaScript so you don’t have to inject this yourselves now.

Furthermore, we’ve added logic so that the JavaScript is only displayed on search pages when the option is enabled rather than all pages.

Oliver