Image Rendition in Display Template for Content Search on Sharepoint 2013
September 12, 2013
The Sharepoint 2013 blog explains how to enhance image results in the post Sharepoint Search Vegas Style, Display Template with Image Renditions. Sharepoint 2013’s Image Rendition enables one to use specific image renditions combined with Channels. This is particularly important when using mobile devices, since smaller images used with Channels allow for a superior performance on websites for mobile devices. This article focuses on the steps needed to use Image Renditions in Display Template for Content Search web part. The article explains that after creating a page and configuring the web part to display only the images desired,
“I opened SharePoint Designer and made a copy of Item_Pictures3Lines.html.
I called the file Item_Picture3vegasLines.html. At line 50, there is a code: var pictureURL = $getItemValue(ctx, “Picture URL”);
I added: var vegasURL=pictureURL + “?RenditionID=5″;At line 71, I removed a class: <div class=”cbs-picture3LinesImageContainer” id=”_#= pictureContainerId =#_”> This removed class sets image to 100px width and 100px height.
The code looks like this: <div id=”_#= pictureContainerId =#_”>”
From there, the author adds an image title next to the image with the code: <div style=”float:left;margin-bottom:5px;” id=”_#= pictureContainerId =#_”>. (The article also includes the full code for Item_Picture3vegasLines.html.)
Chelsea Kerwin, September 12, 2013
Sponsored by ArnoldIT.com, developer of Augmentext
Comments
-
- Subscribe to Beyond Search
Feature archive
News archive
-
