Styling the SharePoint Content Search Web Part Images & Icons – Part 2

Styling the Content Search Web Part

Here’s a link to Part One of this post which dealt with the “List” Display Template of the content search webpart.

Here’s what the web part looks like with the following options: Slide Show – Large Picture.

It’s pretty bland, and honestly, I HATE the default image that has the question mark in it.  I appreciate that there’s a default image, but in reality, I’d like to change that to look a lot better.  I’ve created a background image that looks good when scaled up to the size of the slideshow, and want to replace the default image with mine.  One other thing to consider is that this overrides the image that is associated to the item in the webpart.  If you already have an image for the item that displays (instead of the grey question mark looking background), this CSS will prevent the image from showing.

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 “Slideshow”
  4. Set the Item Display Template to “Large Picture”

Drop this code in:

.cbs-noImageContainer-ContentWrapperLarge {
 border-width: 5px;
 background-image: url(https://[IMAGE URL HERE]);
 background-repeat: no-repeat;
 background-size: cover;
}
.cbs-noImageContainer-ContentSmall, .cbs-noImageContainer-ContentLarge {
 display: none;
 }
.cbs-noImageContainer {
 display: table;
 background-color: black;
}

 

 

Here’s our Result:

 

 

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

.cbs-noImageContainer-ContentWrapperLarge {}

This is the image container– that is, the actual “box” that the item’s image sits in.  Setting an image URL will replace the plain grey color.  Here are the main pieces to be concerned with in this block.

  • The boarder is optional, but I kind of like it.  You can either remove this entirely, or change the size as you see fit.  The default is 5px.
    • border-width: 5px;
  • 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]);
  • If you have an image that isn’t a “texture” that won’t look good repeated across and down, set the repeat to none.
    • Background-repeat: no-repeat;
  • Set the background size to cover to fill the entire container
    • Background-size: cover;
.cbs-noImageContainer-ContentSmall, .cbs-noImageContainer-ContentLarge {}

This is the container that holds the question mark graphic in the bottom right corner of the slideshow.

  • Just hide this completely
    • display: none;
.cbs-noImageContainer {}

This is the whole container for the slideshow.  I just set the color of the background to be black so that it blended well with the image I used.  Feel free to change it to whatever looks good in your usage scenario.

  • Set the color to whatever looks good
    • background-color: black;

 

If you’d like to use the image(s) I did, here’s a gallery of some good ones you can use.

 

Styling the SharePoint Content Search Web Part Images & Icons – Part 1

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.