Good Dining Food : A large carousel by display template

Welcome back SharePointer 🙂

Today we are going to have large carousel customized by display template over a dining.Here you see whats there as starters ?


Display Template is nothing but structured HTML file that forms the display of search content. Let’s start digging into display template structure and its components:

Display Template Structured

From the above structure, we can conclude at one shot that display templates such as search results, hover panels,refiners,content search renders the content at client side using JavaScript and html.

Main Course:

Now, let’s start the main course “Customizing Content Search web part using display template”. Let’s consider the following scenario.

Scenario: Customize the content search web part using display template in such a way that it renders Pages as large Image Carousel as indicated in following screen:

Display Template 1

Note: In order to show the content, I have stored few images in Image gallery of Publishing site, and created article pages around 8-10 in Pages Library with field value specified for Title, Page Image and Page Content. Next, publish the pages and start the full crawl of the site from search service application.

Adding Content Search Web part: Edit the page and add Content Search web part on page as indicated in following screen.

Display Template 2

Customizing web part properties: Go to Content Search Web part properties and click on Change Query. In Query Builder, simply select the “Pages” and say OK.

Display Template 3

In Display templates and Property mapping section update the properties as indicated in following screen. Then, click OK and save the page.

Display Template 4

Resulted web part, will render the content as indicated in following screen:

Display Template 5

Now, In order to display the content as mentioned in the scenario, we require to create the “Item Display Template”. Next we are addressing to that task.

Creating Item Display Template:

1. Open the site in SharePoint Designer and go to Master Page Gallery.

2. Create a folder named “Pages Slideshow” under Display Templates folder available inside Master Page Gallery based upon your need. ( Display Template can be created anywhere in Master Page Gallery, however as good practice, I am considering creating folder under “Display Templates” for better arrangements)

Display Template 6

3. As per our scenario, we require to create the “Item Template” and the best way to do so, just pick up the existing item template named “Item_LargePicture.html” file from Content Web part Folder and paste into custom folder.

Display Template 7

4.  Rename this file as “item_Pages_LargePicture.html” and Refresh the folder and it will create the associated JavaScript file, however we will only update the HTML file.

Display Template 8

5. Open HTML file in edit mode where you will see the structure as described earlier in the post. Now, update the title tag that mentions the display template title. Let’s call it as “Item Pages Large Picture”.

Display Template 9

  • 6. At this stage, we require the display template to complete the following tasks:
    a. Maximize the size of the Publishing Page Image ( We will update it by applying the
    custom style sheet file)
    b. Trim the description content by 50 characters + “…”( We will update it using custom
    js function)

7. Include JS and CSS reference in display template. Its good practice to have js and css under same folder of display template in order to keep the display template package at same place.

Display Template 10

8. Set the Image size in Picture markup specified in default js code in display template which is placed under first

Display Template 11

This will change the size of the picture image container.

9. Add following css in PagesSlideshow.css file. This style will set the page image as picture image container.

.cbs-Slideshow {
  max-height: 400px !important;
  display: inline-block;
  position: relative;
  background-color: #000000;
  color: #FFFFFF;
.cbs-Slideshow, .cbs-largePictureContainer, .cbs-largePictureImageContainer {
  width: 700px;
  height: 400px;
  overflow: hidden;  
.largePictureImageContainer {
  height: 400px !important;

.cbs-largePictureImg {
  max-width: 700px !important; 
  max-height: 400px !important; 
  width: 700px !important;
  height: 400px !important;
  display: block;
  margin: auto;
.cbs-largePictureDataContainer {
padding-top: 10px !Important;
padding-bottom:10px !Important;
padding-left:10px !Important;
   height: 2.2em !Important;

10. Add following js function to get the trimmed page content by 50 characters in PagesSlideshow.js file.

function getDesc(desc)
	//Remove HTML Tags
	var html = document.createElement("DIV");
	html.innerHTML = desc;
	var descShort = html.textContent || html.innerText || "";
	//Trim content by 50 characters
	if(descShort.length > 50)
		return "

” + descShort.substring(0,50)+ “…

“; } else { return desc; } }

11. Declare the variable “desc” that will pass the page content value to above js function.

Display Template 12

12. Set “desc” variable inside Line2 div.

Display Template 13

Hope its a delicious food 🙂


Hmmmm, desserts??? That’s a rendered resulted content on search web part as mentioned in scenario which you can modify by changing the query or web part properties as per your custom requirement.

Please find item display template for Pages Slideshow here !

Next, we will check up on displaying custom column values by mapping with additional search managed property via item display template.

Happy SharePointing,
Stay Gifted,Stay Young !

Dipti Chhatrapati

Dipti Chhatrapati is a passionate and ambitious SharePoint & Office 365 specialist, including technologies that are or will be directly interacting with SharePoint technology stack. She currently holds a position of manager as SharePoint/Office 365 Architect in Capgemini, Mumbai.

Leave a Reply

3 Comment threads
2 Thread replies
Most reacted comment
Hottest comment thread
3 Comment authors
dipti chhatrapatiLee XiongDipti ChhatrapatiSreenu Recent comment authors
newest oldest most voted
Notify of

Hi Dipti,
Thanks for sharing an awesome demo, How ever what should be done to make the image fit exactly in the web part and also any suggestions on how to display only the recent 5 items in a blog or a list.


Lee Xiong
Lee Xiong


Great info and tutorial, I’ve been looking everywhere for this. My one question is how can I get the black transparent box behind the “page title” and “page content” to fill the width of the webpart?


dipti chhatrapati

Hi Lee,

Thank you for providing the feedback !

Regarding your question, you will have to adjust that with web part properties/css, though I haven’t look into it yet.

Let me know if you find any difficulties.

Best Regards,
Dipti Chhatrapati

Lee Xiong
Lee Xiong

Is there a particular css file that I can modify on sharepoint or is it a css code I’ll have to create and then upload onto sharepoint? Thanks.

Social Network Widget by Acurax Small Business Website Designers
Visit Us On TwitterVisit Us On FacebookVisit Us On LinkedinVisit Us On Instagram