Image Slider with SharePoint 2013 Search Results Web Part

Image Slider with SharePoint 2013 Search Results Web Part

by

An image slider? Doesn’t SharePoint 2013 have this “out-of-the-box” by now? Well, the answer is yes, if you have access to the Content Search Web Part, which is available only in SharePoint 2013 Enterprise on premise. Most likely, this will single out most users, especially because of the lack of support on the cloud.

Once again, it’s my job to bring out the best in SharePoint and show you how to make your own image slider! I’ve done it before using the Content Query Web Part (http://tinyurl.com/87c25zq), now let’s see how to do this in SharePoint 2013 using the Search Results Web Part.

Find a Slider Plugin

First and foremost, we need to find a Slider plugin so we can get smooth animations and a cool looking design. I chose SlidesJS because I’ve worked with it before and it has a few example designs included in its download. The design I chose was the “Images with captions” and looks like this:

SharePoint 2013 image Slider with Search Results Web Part

On important thing to take note of: this plugin requires jQuery. If you already have jQuery included in your site, you’ll need to omit certain tasks in this article.

Download the plugin files here and extract the contents to your computer. We’ll need a few of those files later on. Note that the latest version available on the SlideJS website won't work with SharePoint 2016, but the one linked in this article will.

Create a Picture Library and Upload your Slide Images

SharePoint 2013 image Slider with Search Results Web PartTo store our images, let’s use a good old Picture Library.  Create one and name it “Slides”.  Now, all you need to do is drag and drop the images you want to use for the slider in the Slides Picture Library.  I used the images included in the plugin download found under “Slidesexamplesimages-with-captionsimg”.  Also, take the time to add some descriptions in the metadata of each of the images.  End result should be something like this:

SharePoint 2013 image Slider with Search Results Web Part

Configure your Web Part’s Search Results Query

Obviously, first thing to do is to add a Search Results Web Part on to whichever page you want.  We now need to configure the Web Part’s search query in order for it to return only images from our Slider library.  Edit the Web Part properties and select “Change query”.  Select the following options:

  • Select a query: Pictures (system)
  • Restricted by app: Specify a URL (enter the URL of your Slides picture library)

SharePoint 2013 image Slider with Search Results Web Part

Notice the search result preview displays the 6 slide images previously uploaded.  If your content doesn’t appear in the preview, maybe your search hasn’t yet crawled your new content.  Give it a few minutes and try it again.

Save the configuration and close the edit panel of your Web Part.  The search results should now look something like this:

SharePoint 2013 image Slider with Search Results Web Part

Now, time to incorporate the SlidesJS plugin into the search results using a display template.

Upload the Slider Plugin Files

Before attempting to use the plugin, we must first upload some of the files it depends on.  I’ve used the files in the “images-with-captions” example provided by the SlidesJS plugin download and slightly modified the CSS and added jQuery to the JavaScript files.

Navigate to the Style Library and create the following structure, using the files provided here:

Style Library

For reference, here is the result we are aiming for:

SharePoint 2013 image Slider with Search Results Web Part

Create your own Display Template

“Display Templates” is a new feature in SharePoint 2013 which allows us to control the rendering of search results with the help of HTML and JavaScript.  For those more familiar with SharePoint 2010, the best analogy would be made with XSLT item styles used by the Content Query Web Part.

In order the use SlidesJS plugin, I’ve created a custom display template consisting of two files:

  • Control_SlideImage.html: Controls the overall look of the Web Part.  Holds the container HTML markup, CSS link and JavaScript links required by the SlidesJS plugin.  Is also responsible for calling the item display template.
  • Item_SlideImage.html: Controls the look for individual search results items (in our case, each slide).

I’ve spared you the trouble of making the actual display templates and provide them in this article.  Navigate to the Master page gallery and add the following files in their respective location:

Master Page Gallery

  • Display Templates
    • Search
      • Item_SlideImage.html
      • Control_SlideImage.html (Download them both here.)

Warning # 1!

SharePoint will automatically generate a corresponding JavaScript file for each display template file.  Do not remove them.

Warning # 2!

If you already have jQuery referenced in your site, remove line 19 of the Control_SlideImage.html file.

Configure your Web Part’s Display Templates

Go back to your previous Search Results Web Part and edit its properties.  Under the “Display Templates” section, set the following configuration:

  • Results Control Display Template: Image Slider
  • Use a single template to display items
    • Item Display Template: Slide Image

For reference, here’s a screenshot of the required configuration:

SharePoint 2013 image Slider with Search Results Web Part

Save the configuration and close the edit panel of your Web Part.  Call your friends and family because you’re now ready to use your image slider SharePoint 2013!

Show Off your New Image Slider

The end result should like exactly like the example on the SlidesJS web site.  Here’s what mine looks like, with a caption (provided by the image description):

SharePoint 2013 image Slider with Search Results Web Part

Notice that I also tweaked the caption box to expand on hover, in order to mimic SharePoint’s own Web Parts:

SharePoint 2013 image Slider with Search Results Web Part SharePoint 2013 image Slider with Search Results Web Part

To make sure you haven’t missed anything, here’s a recap of the steps to take in order to get this up and running:

  1. Download the SlidesJS plugin files and extract them to your computer.
  2. Create a Picture Library called “Slides” and add the plugin’s slide images to it.
  3. Make sure your search has crawled your newly added content (in most cases, waiting 5-10 minutes will do the job)
  4. Add a Search Results Web Part to a page.
  5. Configure the Search Results Web Part search query to return slide images from your Picture Library.
  6. Upload the SlidesJS plugin files to the Style Library.
  7. Upload the display template files to “Master Page Gallery -> Display Templates -> Search”.
  8. Configure the Search Results Web Part control and item display templates.

Some closing thoughts on the Search Results Web Part and the new display template feature:  Using HTML and JavaScript instead of XSLT is definitely a step in the right direction.  One thing that I’ve still not managed to figure out is: Why package the Content Search Web Part entirely separately?  While it does have a few added features built into the UI, the Search Results Web Part can provide the same functionality with a bit of tinkering with display templates.

Yohan Belval
Yohan Belval @sharegatetools

Throughout the years, Yohan has explored the deepest and darkest corners of SharePoint. His thorough knowledge of the product allows him to bring out “Out of the box” tastiness and let it shine. If need be Yohan knows his way around the API and can whip up custom solutions quicker than you can say “alternate access mappings”. In his spare time he runs marathons for pleasure.