Display publishing image with a link correctly within a display template

This post is over a year old, some of this information may be out of date.

When you create a display template that displays a publishing image (example: the roll-up image of a page) it might be that you used the Srch.ContentBySearch.getPictureMarkup() function of SharePoint. This function is also used in the standard display templates like for example: Item_Picture3Lines.html.

This Srch.ContentBySearch.getPictureMarkup provides you the markup for rendering the image with the image rendition of your choice. The code in the function retrieves the src value from the image element and creates a new element with the rendition, class, alt, and id values that you provide. Here is an example of how to call the function:

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

This function outputs the following HTML:

1
<img src="/BRAND/DEMO/PUBLISHINGIMAGES/Dummy.JPG?width=100&amp;height=100" class="cbs-picture3LinesImg" alt="test 2" id="ctl00_ctl39_g_aa528ff1_226a_4ddc_8e09_c37c6faaf319_csr8_2lines_picture" onerror="this.parentNode.innerHTML=Srch.ContentBySearch.getNoPictureMarkup(100);" onload="Srch.ContentBySearch.resizeImageToSquareLength(this, 100);" />

Where is my link?

Now a client noticed that if they set a hyperlink on the image (this is a default SharePoint functionality), only the image will get rendered from the display template. The hyperlink is not taken into account.

Here is an example of the field value output when a hyperlink is set:

1
<a href="http&#58;//www.eliostruyf.com"><img alt="Dummy image" src="/brand/demo/PublishingImages/dummy.jpg" style="BORDER&#58;0px solid;" /></a>

When you call the getPictureMarkup function with this value, it returns you the following markup:

1
<img src="/BRAND/DEMO/PUBLISHINGIMAGES/DUMMY.JPG?width=100&amp;height=100" class="cbs-picture3LinesImg" alt="test 2" id="ctl00_ctl39_g_aa528ff1_226a_4ddc_8e09_c37c6faaf319_csr8_2lines_picture" onerror="this.parentNode.innerHTML=Srch.ContentBySearch.getNoPictureMarkup(100);" onload="Srch.ContentBySearch.resizeImageToSquareLength(this, 100);" />

As you can see the anchor tag around the image element is removed. This is because the function does not checks if there is a hyperlink set. So if you need to have such kind of functionality in your display template, you need to implement it yourself. Here is the code to do it:

1
<!--#_
2
// Get the publishing image
3
var publishingImage = $getItemValue(ctx, 'PublishingImage');
4
var pictureMarkup = Srch.ContentBySearch.getPictureMarkup(publishingImage, 100, 100, ctx.CurrentItem, '', pageTitle, '');
5
var pictureLink;
6
var targetContent = "";
7
// Check if the publishing image is not empty
8
if (!publishingImage.isEmpty) {
9
    var pictureValue = publishingImage.value.toString();
10
    // Check if the picture value contains an anchor element
11
    if (pictureValue.toUpperCase().indexOf('<A ') !== -1) {
12
      // Retrieve the href attribute value  from the picture value
13
        var link = pictureValue.match(/href="([^"]*)"/);
14
        // Retrieve the target attribute value from the picture value
15
        var target = pictureValue.toLowerCase().match(/target="([^"]*)"/);
16
        if (Srch.U.isArray(link) && link.length >= 1) {
17
            pictureLink = link[1];
18
        }
19
        if (Srch.U.isArray(target) && target.length >= 1) {
20
            targetContent = String.format('target="{0}"', target[1]);
21
        }
22
    }
23
}
24

25
// Check if the pictureLink is empty and render the right output
26
pictureMarkup = $isEmptyString(pictureLink) ?
27
                pictureMarkup :
28
                String.format('<a href="{0}" {1}>{2}</a>', pictureLink, targetContent, pictureMarkup);
29
_#-->
30

31
_#= pictureMarkup =#_

What does the code output?

Image with a hyperlink and no target

1
// Field value
2
<a href="http&#58;//www.eliostruyf.com"><img alt="Dummy image" src="/brand/Demo/PublishingImages/dummy.jpg" style="BORDER&#58;0px solid;" /></a>
3

4
// HTML Output
5
<a href="https://www.eliostruyf.com">
6
  <img src="/BRAND/DEMO/PUBLISHINGIMAGES/DUMMY.JPG?width=100&amp;height=100" class="" alt="Test page image with link" onerror="this.parentNode.innerHTML=Srch.ContentBySearch.getNoPictureMarkup(100);" onload="Srch.ContentBySearch.resizeImageToSquareLength(this, 100);" width="100">
7
</a>

Image with a hyperlink and target set

1
// Field value
2
<a href="http&#58;//www.eliostruyf.com" target="_blank"><img alt="Dummy image" src="/brand/Demo/PublishingImages/Dummy.jpg" style="BORDER&#58;0px solid;" /></a>
3

4
// HTML Output
5
<a href="https://www.eliostruyf.com" target="_blank">
6
  <img src="/BRAND/DEMO/PUBLISHINGIMAGES/DUMMY.JPG?width=100&amp;height=100" class="" alt="Test page image with link and target" onerror="this.parentNode.innerHTML=Srch.ContentBySearch.getNoPictureMarkup(100);" onload="Srch.ContentBySearch.resizeImageToSquareLength(this, 100);" width="100">
7
</a>

Image without a link

1
// Field value
2
<img alt="" src="/brand/Demo/PublishingImages/Dummy.jpg" style="BORDER&#58;0px solid;" />
3

4
// HTML Output
5
<img src="/BRAND/DEMO/PUBLISHINGIMAGES/DUMMY.JPG?width=100&amp;height=100" class="" alt="test 2" onerror="this.parentNode.innerHTML=Srch.ContentBySearch.getNoPictureMarkup(100);" onload="Srch.ContentBySearch.resizeImageToSquareLength(this, 100);" width="100">

Display publishing image with a link correctly within a display template

Where is my link?

What does the code output?

Related articles

Creating Custom Refiner Control Display Templates for SharePoint 2013

Part 1: Create Your First Search Refiner Control Template

Part 2: Adding Refinement Actions to the Custom Search Refiner Control

Report issues or make changes on GitHub

Comments

Elio Struyf