Thumbs in search results

[Anonymous]

Hey guys, is it possible to add thumbnails in the search results?
I have tried to add this snippet in search.php line 28 but it doesn’t show the thumb, it displays the full image and doubles the description.

<div class="entry">

    <?php
        if ( has_post_thumbnail() ) { // check if the post Thumbnail
            the_post_thumbnail();
        } else {
            //your default img
        }

        the_excerpt(); //your short description
?>
</div>

[Anonymous]

ok the dublicate description was my mistake with the
the_excerpt();
so I removed it, but the image shows at full size, and it’s located under the description, is there a way to display it on the right side of the text as a thumb and even better display search results as grid?

[Axle Support]

Hi @johnnyd

Please add that code on template-parts/content-search.php

You can pass the size of image to show like this the_post_thumbnail('thumbnail');

[Anonymous]

Yeah I managed to figure it out like 10 minutes ago and have moved the snippet to content-search.php, thanks for the thumbnail info, is it possible to also add grid view like this? That is the reason that I didn’t update the topic, I was trying as of how to add gridview in the content-search.php

[Anonymous]

The other option would be instead of grid to show the image next to the text but if I use float:left it doesn’t display correctly.

<div class="entry" style="float"left">

[Axle Support]

Hi @johnnyd

There is no option in the theme to display search result in a grid.

[Anonymous]

alright thank you, but could you please tell me how to fix the float? Thank you.

[Axle Support]

Hi @johnnyd

You can use custom CSS for it.

[Anonymous]

I can use it in the php file as well that is not the issue. The issue is that if I use image float the list “breaks”, meaning that the image will be next to the post description but next to the next post title, and that is what I am asking if we can fix somehow. Do I need to add padding after the short description or is there an other way?

[Anonymous]

So I have added a in css padding-bottom and after a bit of trial and error 100px seems to be just right. Else the effect of anarchy I am getting with just the “float:left” doesn’t fit my taste haha

.page-content,
.entry-content,
.entry-summary {   margin: 15px 0 0;
	padding-bottom: 100px;
}

[Author]

Posts