Styling the Content Search Web Part

Check out Part 2 of this post where we style the Slideshow – Large Image display template.

The Content Search Web Part is one of the most versatile web parts in SharePoint.  It’s similar to the Content Query Web Part, but has some better functionality like searching throughout the site collections– which is great if you want to surface content from sub sites and other site collections onto a different page.  This is the perfect scenario for an “intranet homepage”.  There are a few issues that a lot of people take with it.  The biggest complaint I’ve seen online is that most people would like to set the image that is displayed for each item.  This post will show you how to set a Single, specific image to be displayed for each result, and change the spacing.  From what I’ve seen, there are a ton of hoops to jump through to get it to do that…things like search schema and managed properties you have to modify– until now.

Here’s what the web part looks like when you don’t modify anything but the search query to match specific documents and/or content types.

Pretty lame to say the least.

The biggest bummer, in my opinion, is the image.  To get it to display anything other than that placeholder, you have to go and associate crawled properties to managed properties in the search schema, set/enter the image url property for each item being returned, and then if you’re using SharePoint On-Premises you have to do a full re-crawl.  This isn’t a good approach if you have a lot of content being returned– especially if the returned results are of multiple content types.  We’re going to hack this web part to use a pre-set designated image instead! I’m really excited because I couldn’t find anything online about this, and had to result to doing it myself.  I’m also going to change the spacing in between the items to have it look more polished.

Let’s get to the fun part.

First thing’s first: Insert the web part on your page.

  1. Put a content search web part on your page
  2. Select the content you want in the query
  3. Set the display template to the built-in template “List”
  4. Set the Item Display Template to “Recommended Items: Picture on the left, 3 Lines on the Right” — FYI: When I was playing around and finding the CSS to modify, this was the item template I had selected.  The code below won’t correctly display the images if you use a different item template.

Drop this code in:

<style>
/* #MSOZoneCell_WebPartWPQXXX */
.cbs-picture3LinesImageContainer{
 
    width: 50px;
    height: 50px;
    background-image: url(https://[IMAGE URL HERE]);
    background-repeat: no-repeat;
    padding-right: inherit;
    margin-bottom: 5px;
    overflow: hidden;
    float: left;
}
.cbs-picture3LinesImg{
background-repeat: no-repeat;
display:none;
 
}
 
</style>

 

The code gives gives us a nice-looking result:

Let’s break the code down and see what it does…

.cbs-picture3LinesImageContainer{}

This is the image container– that is, the actual “box” that the item’s image sits in.  You can change the size of the image all you want in CSS, but if you don’t change the size of the container (and the margins) you’ll just have an image that’s resized in a box that isn’t.  Here are the main pieces to be concerned with in this block.

  • Width & Height Set this to be 50px by 50px– or however large your image is.  If you have a lot of items you’d like to display, you’ll want to keep this small.
    • width: 50px;
    • height: 50px;
  • Set the image url to one of your choosing. Upload a image to site assets library and drop the url into the css.
    • background-image: url(https://[IMAGE URL HERE]);
  • Set the margin on the bottom of the image to 5px… anything less makes items look cramped.
    • margin-bottom: 5px;
.cbs-picture3LinesImg{}

This is the original image that the webpart will use if there is no value in the managed property for the item in the results.  Its an ugly question mark that looks bad.  If you have a publishing image or other assigned image, it will display here.  I prefer to have a uniform and consistent look to all of these items, so I’ve set it to not be displayed– the image set in the CSS above will be used in it’s place.

  • Set the background to not repeat
    • background-repeat: no-repeat;
  • Set the image to not be displayed
    • display:none;

And there you have it.  With a couple of simple lines of CSS, you’re able to leverage the Content Search Web Part — and set the item image!

* NOTE: If you have multiple content query web parts on the page and want to specify which one this CSS modifies, be sure to set the #MSOZoneCell_WebPartWPQXXX property — I included it in my code (but commented it out).  Use developer tools in Chrome (F12 when viewing a page), choose the element selector, and then click the webpart.  You’ll see something like the image below.  The div id contains the number to add to the end of that string.

 

Check out Part 2 of this post where we style the Slideshow – Large Image display template.

One Reply to “Styling the SharePoint Content Search Web Part Images & Icons – Part 1”

  1. Great stuff, and the CSS seems to work, except I can’t get the image to load. It says it cannot find the image

    #MSOZoneCell_WebPartWPQ5
    .cbs-picture3LinesImageContainer{
    width: 92px;
    height: 92px;
    background-image: url(“https://one.mskcc.org/sites/team/dept/is/sdd/swd/Pictures/Site%20Images/Teamwork.png”);
    background-repeat: no-repeat;
    padding-right: inherit;
    margin-bottom: 10px;
    overflow: hidden;
    float: left;
    }
    .cbs-picture3LinesImg{
    background-repeat: no-repeat;
    display:none;
    }

Leave a Reply to James Igoe Cancel reply

Your email address will not be published. Required fields are marked *