In this post I will show you how to use image renditions from a custom Display template. If you are new with Display temlates, I suggest you to read the following article from Chris O’Brien, and if you are starting with image renditions, this article from Waldek Mastykarz is perfect.

In this sample, I’m using a Search results webpart (not a CBSWP, that is not available on SharePoint Online), with a custom display template. The display template is configured with this Managed properties:
























If we want to get the value of a Managed property on the display template, we can do something like that (of course, the property has to be set on the display template first):


or even something like that:


but it’s a better option to use the following function:


with this function, we are getting a Srch.valueInfo object, that contains some interesting properties, as we can see in the next image:

clip_image001

  • value: the value of the property
  • isEmpty and isNull: quite useful to check if the property has a value
  • propertylookupName: this is the name of the slot that we are using to store the Managed property.
  • propertyMappings: and array with all the managed properties that we are including in the slot. As we can on the ManagedPropertyMapping array defined on the display template, the slot “Picture URL”, is mapped with 3 managed properties.
  • managedPropertyName: this is the managed property source of the value. In this case, we are mapping the slot with 3 properties, and the value is coming from the “PublishingImage” property.

with this object, we can use a SharePoint JS function to get the image URL with the rendition that we want to apply:




This code will return the image URL with the width and height parameters:

image

Unfortunately, the SharePoint JSOM is almost undocumented on the MSDN, so, to find out this function and much more, I suggest you to take a look to all the OOB display templates, and use the Developer tools in Chrome to debug the client code and test the results of some functions.

With the value returned for the function, we can compose other IMG tag, and the result will be an image using the rendition that we want: 190×120.

Also, when you are working with display template, you will find useful to use the Diagnostic display template, which shows you all the managed properties used in the template, with its value and other information. This template is only available for the Content By Search webpart, but with a couple of changes, you can use the template in the Search Resutls webpart if you are working with SharePoint Online. This is the diagnostic template code for the Search Results WP




















































































































































































































































































































































































































And finally, if you are working with image renditions, you can provisioning your renditions using server side code, like Waldek shows in his article, and even tough I have not try it, it should work on sandbox, but also, you can do it declaratively, deploying the file “PublishingImageRenditions.xml” to the Master page gallery using a Module.

The “PublishingImageRenditions.xml” looks like that:
















































































My advice is that you create your image renditions using the User Interface, and then download the file and add it to your Visual Studio Module. If you edit the file manually, take care with the node “NextId” !!

The module for the xml file would be:
















And that’s all, with this, your display template will show an image using the desired rendition.

Hope it helps, and let me know any comment.

Luis Manez

@luismanez