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:

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;
}
.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.

Display Template 12

12. Set “desc” variable inside Line2 div.

Display Template 13

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 !

Dipti Chhatrapati

Dipti Chhatrapati is a SharePoint specialist currently working as a Senior Consultant for CapGemini in Mumbai, India. She has more than 9 years of experience in application development, design, maintenance, administration and is continuously working with improving her skills and keeping them up to date. As a developer, project leader and SharePoint Business Analyst, she has been an extensive user of Visual Studio and Team Foundation Server throughout her career. Dipti is very passionate about music, sports, and arts and loves to spend her free time learning new things, socializing with friends and family, cooking, exercising and singing.

Leave a Reply

5 Comments on "Good Dining Food : A large carousel by display template"

Notify of
avatar
Sort by:   newest | oldest | most voted
Sreenu
Guest

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.

Thanks

Lee Xiong
Guest

Hi,

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?

Thanks

dipti chhatrapati
Guest

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
Guest

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.

wpDiscuz
Animated Social Media Icons by Acurax Responsive Web Designing Company
Visit Us On TwitterVisit Us On FacebookVisit Us On Linkedin