I am using the web part "Content Search" to display the news. But I would like to make some modifications to the Display template "Large" that I am using. First, I would like to change the arrows that is used for the paging control. Then the images should be wider and I want another managed property to be displayed in the rollup. To do this, I have to create a copy of the display templates and modify it in an HTML editor.
There are two types of display templates. One that is prefixed with "Control" that controls the layout of the entire web part, like paging controls and such. The other one is prefixed with "Item" and is used to control the items that are rolled up in the web part. These display templates are independent of each other, but since I want to change both the layout of the entire control and each item, then I need to make a copy of these both html files.
Then open folder Display Templates > Content Web Parts
Note: Only copy the Control and Item html files, the .js files are created automatically!
I copied the control file Control_ListWithPaging.html and named it Custom_Control_ListPaging. And then I copied the item Item_LargePicture.html and named it Custom_Item_LargePicture.
Note: Refresh the folder and note that the .js files are created:
Modify the Custom_Control_ListPaging.html
Give the file a proper Title, in this case "Custom List with Paging":
It will be displayed with that Title in the web part drop down under Display Templates in the web part:
I want to change the Paging icons, because they don’t look very nice:
The css classes needs to be changed inside the Control template, and modify the classes as you wish and refer to it from the new Control template. Might not be the most sexy buttons, but at least they look a bit more like my color theme on the site:
Modify the Custom_Item_LargePicture.html
I want to make images wider and add another third line in the web part so that I can display another field and that has to be done in the Item files. Open the Custom_Item_LargePicture.html and make the following changes:
Change the Title tag to something useful, so that it is displayed correctly in the dropdown list in the web part (same as above with the Control).
In the head, modify the mso:ManagedPropertyMapping: copy this code:
"'Line 2'{Line 2}:'Description'"
Change it to the below code, you can refer to any managed property you like (in this case Description) but it does not really matter since you can change it in the web part anyway:
"'Line 3'{Line 3}:'Description'"
This will add another line in the Property Mappings so that you can display a third line with a managed property in the web part (see "Line 3" below):
Then scroll down to the remarked js code and add a new variable after "Line 2" and name it to “Line3”. That is in the following places in the code::
Then change the markup also, add a new div:
I had to modify the css classes (by adding them to my own css stylesheet so they override the default ones) too to make the rows more aligned, since I added a third line. The result is:
