SharePoint 2013: Image Preview in Search Results - Part III

This is the third and final post of the image preview series. Here is Part I and Part II.

I left off having a consistent search result from images both stored in picture libraries as well as a regular document libraries. The results show a preview on the page but the hover doesn't have a larger view. This is an easy fix.

UPDATE: Get the source files here

Showing a Preview Image in the Image Search Result Hover Panel


Problem
Hovering over the image search results does not show a larger preview image:

 

Solution

 



Modify the Item_Picture_HoverPanel.html file and add the following code right before the first if statement:

 

 <div class="ms-srch-hover-imageContainer">

       <img id="_#= ctx.CurrentItem.csr_id =#_" src="_#= $urlHtmlEncode(ctx.CurrentItem.Path) =#_" onload="this.style.display='block';" />
  </div>

 

Save the file and refresh the search results. A larger image shows in the hover now:

If you do not have a Search Center site collection and only see .js files, here is the modification to the Item_Picture_HoverPanel.js:

,'                <div id="', $htmlEncode(id + HP.ids.body) ,'" class="ms-srch-hover-body">'
,''
,'                        <div class="ms-srch-hover-imageContainer">'
,'                            <img id="', ctx.CurrentItem.csr_id ,'" src="', $urlHtmlEncode(ctx.CurrentItem.Path) ,'" onload="this.style.display=\'block\';" />'
,'                        </div>'
,'                '
);
                    if(!Srch.U.n(ctx.CurrentItem.PictureURL)){



 

SharePoint 2013: Image Preview in Search Results - Part II

This is the second post on previewing images in SharePoint search results. The first post is here.

In the first post I demonstrated a way to display image previews in search results and resolved two problems. But what about the images in a Picture Libary? I didn't see them appear in search results as pictures until I added the file types. Shouldn't there be special results for Picture types?

UPDATE: Get the source files here


Previewing of Images Stored In Picture Libraries

Problem #1: Images in Picture Libraries Returned as Files or List Items
After going through the steps in Part I , even images stored in Picture Libraries are returned as files themselves. The hover works fine but you should be able to take advantage of the image result type.

Solution to Problem #1: Copy and Configure the Image Result Type

In your Search Center site collection select Site settings from the settings menu:

Under Site Collection Administration, click on Search Result Types:

Scroll down and find Image. Use the drop-down menu and select Copy:

On the Add Result Type page, select Picture Item udner What should these results look like?

Click Save:

Run a search for an item in a Picture Library:



 

There is a preview image right in the results! That's great but that didn't happen in image results from other types of libraries - onto Problem #2.

 

Problem #2: Image Search Results Not Consistent
Now the results from a Picture Library and non-Picture Library look different. It is not consistent for the user:

Solution to Problem #2: Modify the Display Template for the Result.
This time you need to edit the Item_Picture.html file.

Simply add an else statement to the if in the middle of the code:

 else {
           ctx.CurrentItem.csr_PreviewImage = ctx.CurrentItem.Path;
      }

(If you only see .js files, the .js code to  modify is at the bottom of this post)

Save the file and run a search again:

 



Now all images that are returned have a preview image in the results!!!!

But now the hover is the Picture Library List item hover, not the one I modified in the first post. So in the next and last post of this series I modify that hover to include a larger preview!



If you are not running search in a Search Center Site Collection and/or you only see .js files in your Search Display Templates, here is the resultant .js code to paste over after the render header in Item_Picture.js:

    if(!Srch.U.n(ctx.CurrentItem.PictureThumbnailURL) && !ctx.CurrentItem.IsContainer) {
     ctx.CurrentItem.csr_PathLength = Srch.U.pathTruncationLengthWithPreview;
                    ctx.CurrentItem.csr_PreviewImage = ctx.CurrentItem.PictureThumbnailURL;
       }
      else {
           ctx.CurrentItem.csr_PreviewImage = ctx.CurrentItem.Path;
      }



 

SharePoint 2013: Image Preview in Search Results - Part I

I was discussing SharePoint Search previews of images on Twitter with Jasper Oosterveld . The discussion made me look into image previews in search results. As a result, I looked at various options and functionality to this regard. I am splitting these posts into at least two parts so I can get part of my solution out as soon as possible. This post solves the previewing of images that are not in Picture Libraries.

UPDATE: Get the source files here

Previewing of Images Not Stored in Picture Libraries

Problem #1: Image Search Results Are List Items

When images are stored in "regular" document libraries such as Site Assets, they are uploaded as documents. When the library is crawled, the results are the actual list item and not the image itself. Even if you add the Image or Picture content type to the library and modify the item, the result is still treated like a list item.

Solution to Problem #1:  Add Image File Types to Search
The reason the images are coming back as items is because image file types such as .jpg and .gif are not in the list of the search file types.

So you need to go to Central Administration and modify the Search Service Application. On the left hand side click on File Types:

On the File Types page, click on New File Type:

Enter an image file type such as jpg and click ok:

Repeat the process for other image types you want to handle.

Now go to the document library that contains the images and select Library settings from the Library top ribbon:

On the Settings page, click on Advanced Settings:

Scroll down and find the Reindex Document Library button and click it:

In the dialog that appears, click Reindex Document Library:

Click OK on the Advanced Settings page.

Now return to your Search Service Application and run an incremental crawl on the main content source:

After the crawl is completed, the search results of the images should appear as their filename instead of a list item. That solves that problem but the hover is still the Default hover template and doesn't show an image preview.



Problem #2: Image Search Results Hover Doesn't Show Preview

Now that the search is crawling image types, the results display the image file but the hover is using the default item template and no image appears.

  

UPDATE: You do not need to go through the modification of the default hover although I did in the beginning before I figured out all that was happening. The overall cause of this issue is that Image result type uses the Default Item template and not the Picture template. My solutions in Part II and Part III explain how do implement this better.

Solution to Problem #2: Modify the Default Hover Panel Display Template

The solution here is to modify the hover display template that is being used for default items. This can be easily performed using SharePoint Designer 2013. Follow the steps to get to the Display Templates as I have outlined previously.

This time, edit the Item_Default_HoverPanel.html file. Replace the RenderBody section with the following code:

                <!--#_
                    if(ctx.CurrentItem.FileExtension == "jpg" || ctx.CurrentItem.FileExtension == "gif"){
_#-->
                        <div class="ms-srch-hover-imageContainer">
                            <img id="_#= ctx.CurrentItem.csr_id =#_" src="_#= $urlHtmlEncode(ctx.CurrentItem.Path) =#_" onload="this.style.display='block';" />
                        </div>
<!--#_
                }
                else {
_#-->
    <div id="_#= $htmlEncode(id + HP.ids.body) =#_" class="ms-srch-hover-body">
                    _#= ctx.RenderBody(ctx) =#_
                </div>
<!--#_
                }
_#-->
         

 

You may add more conditions for each file type you want to handle. You could also check the content type however, by default, the images loaded to Site Assets are documents. So if you want to capture all images I would use the file extension check.

Save those changes and then perform a search. Hover over the image results:

Voila!!! The hover shows a preview of the image!!!

But that's not all folks. If you have Picture Libraries you could have even better results and previews but then that change will negate the solution provided here. I discuss this functionality and customization in my Part II post.