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 ?

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:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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:

 

 

 

 

 

 

 

 

 

 

 

 

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.

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.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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

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

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)

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.

 

 

 

 

 

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.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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”.

 

 

 

 

 

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.

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

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;
}
.cbs-largePictureLine2{
   height: 2.2em !Important;
	width:400px;
}

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.

12. Set “desc” variable inside Line2 div.

Hope its a delicious food 🙂

Desserts:

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 !