Search results page: how to show readmore link below excerpt and featured image? - Support

Tagged: excerpt, featured image, read more, search results

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
May 26, 2016 at 4:25 pm #638805

BeeCee
Participant

Hi,

is it possible to show at the search results page:

– a read more link below the manual/custom excerpt
– the featured image (post thumbnail) of the posts?

Thank you.

May 26, 2016 at 5:12 pm #638826
BeeCee
Participant
Concerning the featured image in search results, this solution from the forum works for me – partly:

https://kriesi.at/support/topic/add-featured-image-to-search-results/#post-249161

My custom CSS for this are:
```
.search-result-counter {
    height: 100px;
    padding: 0;
    width: 100px;
}
.search-result-counter img {
	width: 100%;
	height: 100%;
	border-radius: 100px;
}
#top .template-search.content .entry-content-wrapper { 
	padding-left: 120px; 
	}
```
But the featured image, shown in the search counter is distorted/stretched instead of being cropped:

and then take a look please here:
```
<span class="search-result-counter ">
<img class="attachment- size- wp-post-image" width="1310" height="400" sizes="(max-width: 1310px) 100vw, 1310px" srcset="https://xyz.de/studio/wp-content/uploads/sites/2/2016/05/slider_ambiente-mint_1310x400.jpg 1310w, https://xyz.de/studio/wp-content/uploads/sites/2/2016/05/slider_ambiente-mint_1310x400-300x92.jpg 300w, https://xyz.de/studio/wp-content/uploads/sites/2/2016/05/slider_ambiente-mint_1310x400-768x235.jpg 768w, https://xyz.de/studio/wp-content/uploads/sites/2/2016/05/slider_ambiente-mint_1310x400-1030x315.jpg 1030w, https://xyz.de/studio/wp-content/uploads/sites/2/2016/05/slider_ambiente-mint_1310x400-705x215.jpg 705w, https://xyz.de/studio/wp-content/uploads/sites/2/2016/05/slider_ambiente-mint_1310x400-450x137.jpg 450w" alt="slider_ambiente-mint_1310x400" src="https://xyz.de/studio/wp-content/uploads/sites/2/2016/05/slider_ambiente-mint_1310x400.jpg">
</span>
```
outputs obviously image sizes of:
```
https://xyz.de/wp-content/uploads/sites/2/2016/05/slider_ambiente-mint_1310x400.jpg 1310w, 
https://xyz.de/wp-content/uploads/sites/2/2016/05/slider_ambiente-mint_1310x400-300x92.jpg 300w, 
https://xyz.de/wp-content/uploads/sites/2/2016/05/slider_ambiente-mint_1310x400-768x235.jpg 768w, 
https://xyz.de/wp-content/uploads/sites/2/2016/05/slider_ambiente-mint_1310x400-1030x315.jpg 1030w, 
https://xyz.de/wp-content/uploads/sites/2/2016/05/slider_ambiente-mint_1310x400-705x215.jpg 705w, 
https://xyz.de/wp-content/uploads/sites/2/2016/05/slider_ambiente-mint_1310x400-450x137.jpg 450w
```
I don’t know, where these image sizes, genereated there, are coming from.
Here are all image sizes with my SimpleImageSizes-Plugin:

But the custom CSS for the search-counter is 100x100px.
I use the SimpleImageSizes-Plugin – but how should I “tell” the code snippet mentioned above, to use this 100x100px size for the image?

Guess, this is the same problem, that someone had here – unfortunately not solved:

Add thumbnail to search results

The problem seems to be, that the featured image, that come to the search-counter are not properly rendered/cropped/made smaller …
Interesting is, that in the search popup in the menu, the featured images are OK:

Any idea please?
Thank you.
May 28, 2016 at 2:47 am #639617
Ismael
Moderator
Hi,

Thank you for using Enfold.

Regarding the image size, just look for this line of code:
```
$searchthumb    = get_the_post_thumbnail( $post_id, $size, $attr );
```
Replace the size attribute.

Best regards,
Ismael66
May 28, 2016 at 11:50 am #639746

BeeCee
Participant

Thank you, Ismael, but what should I change there, dont’ understand, sorry …?

For example, I could create an image size for the search thumbnail with the SimpleImageSize-Plugin, let’s say “searchthumb100” for example, which I could make 100x100px.
But where and how in this line of code, you mentioned, should I add this new image size “searchthumb100”?

May 28, 2016 at 10:16 pm #639866

BeeCee
Participant

I got it, Ismael.
I googled a bit and found this:
https://developer.wordpress.org/reference/functions/get_the_post_thumbnail/

So I used the SimpleImageSize-Plugin to create a search-thumbnail size; I called it “searchthumb100” with 100x100px size.

Then in loop-search.php in line 33 I added this size:

$searchthumb = get_the_post_thumbnail( $post_id, $size='searchthumb100', $attr );

and it works fine now:

Thanks for pointing me into the right direction.

May 30, 2016 at 4:49 am #640091

Rikard
Keymaster

Hi,

Great, thanks for sharing. So you are all good now?

Regards,
Rikard

May 30, 2016 at 11:55 am #640249

BeeCee
Participant

Thanks, Rikard, the only thing is for me still how to show a read more link below the manual/custom excerpt – see question (1) of my first post here. I wasn’t able to solve this, if you could assist me for this …
Thank you.

May 31, 2016 at 6:31 am #640702
Ismael
Moderator
Hi,

Edit the loop-search.php file. Look for this code around line 99:
```
 echo $excerpt;
```
.. replace it with:
```
 echo $excerpt;
		    echo '
<div class="read-more-link"><a href="'.get_permalink().'" class="more-link">'.__('Read more','avia_framework').'<span class="more-link-arrow">  &rarr;</span></a></div>
';
```
Best regards,
Ismael
Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.