I'm trying to create a custom design on a Content Search web part. In the display template the var pictureMarkup is created using this line:

var pictureMarkup = Srch.ContentBySearch.getPictureMarkup(pictureURL, 100, 100, ctx.CurrentItem, "cbs-picture3LinesImg", line1, pictureId);

When this is output to screen:

_#= pictureMarkup =#_

It automatically adds the img tags, which means I can't append a class to it, although I have tried by wrapping it in a div and a span.

Any ideas?

3 Answers 3


I must admit I tried your answer DarrylGodden and didn't get much luck with it. However I did find using the


that I was able to put my own class in. In the example below I show you how to do this. I have also included other lines of code required to get the values to pass into getPictureMarkup.

//Get the client Control ID and add _CannonFodder_ to it.    
var encodedId = $htmlEncode(ctx.ClientControl.get_nextUniqueId() + "_CannonFodder_");
//Create an Picture ID
var pictureId = encodedId + "picture";    
//Get the title (in your example this might be line1
var title = $getItemValue(ctx, "Title");
//Call getPictureMarkup
var pictureMarkup = Srch.ContentBySearch.getPictureMarkup(pictureURL, 150, 250, ctx.CurrentItem, "myclassiwanttogive", title, pictureId);

The variable pictureMarkup will have the following value in it.

<img src="/SITES/demo/PUBLISHINGIMAGES/ITALY.JPG?width=150&amp;height=250" class="myclassiwanttogive" alt="My Title" id="ctl00_ctl37_g_b464e1ff_1d40_42bd_89ae_55fea3e05ed6_csr1_CannonFodder_picture" onerror="this.parentNode.innerHTML=Srch.ContentBySearch.getNoPictureMarkup(250);"  />

As you can see my class name "myclassiwanttogive" is within the img script. It also ensures that every picture is the same height and width of 150x250. If you put nulls in where I've put 150, and 250 it will put the pictures original size. Alternatively with string manipulation you could put an image rendition in after ITALY.JPG? instead of using width and height. Lastly the title has been put in as the picture alt.


Finally found this on a Microsoft article:

But, to reference variables declared in the script directly in the HTML, you must use the following format: #= variableName =#. For example, to use the variable pictureURL as the value for an image, you use the following HTML: <img src="_#= pictureURL =#_" />

So the answer was to write it like this instead:

<img src="_#= pictureURL =#_" class="rg-dynamic" />

Article here:

Microsoft Display Template Article


If you instead use the following code to get the URL of the image rendition ID you want, you can then use the image URL of the rendition however you need:

var pictureURL = $getItemValue(ctx, "Picture URL");
var pictureURLWithRendition = Srch.U.getImageSourceWithRendition(pictureURL, 273, 205)

Such as: <img src="_#= pictureURLWithRendition =#_" class="rg-dynamic" />

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.