I'm in SharePoint 2013 and I have a content search web part which shows a catalogue of items which have product pictures and descriptions.

I have added a hover panel onto a custom Content Search Web Part as I wanted a preview of the product image in the hover panel

In the content search web part I have added the following script at the top:

var id = ctx.ClientControl.get_nextUniqueId();
var itemId = id + Srch.U.Ids.item;
var hoverId = id + Srch.U.Ids.hover;
var hoverUrl = "~sitecollection/_catalogs/masterpage/Display Templates/Search/Item_creative_HoverPanel.js";
$setResultItem(itemId, ctx.CurrentItem);
ctx.currentItem_ShowHoverPanelCallback = Srch.U.getShowHoverPanelCallback(itemId, hoverId, hoverUrl);
ctx.currentItem_HideHoverPanelCallback = Srch.U.getHideHoverPanelCallback();

I then added the hover detail on the first div

<div class="cbs-pictureOnTopContainer" id="_#= $htmlEncode(itemId) =#_" data-displaytemplate="ItemPictureOnTop" **onmouseover="_#= ctx.currentItem_ShowHoverPanelCallback =#_" onmouseout="_#= ctx.currentItem_HideHoverPanelCallback =#_">

<div id="_#= $htmlEncode(hoverId) =#_" class="ms-srch-hover-outerContainer"></div>

<div class="cbs-pictureOnTopImageContainer" id="_#= pictureContainerId =#_">
<a class="cbs-pictureImgLink" href="_#= linkURL =#_" title="_#= $htmlEncode(line1) =#_" id="_#= pictureLinkId =#_"> _#= pictureMarkup =#_ </a></div>

<div class="cbs-pictureOnTopDataContainer" id="_#= dataContainerId =#_">

<a class="cbs-pictureOnTopLine1Link" href="_#= linkURL =#_" title="_#= $htmlEncode(line1) =#_" id="_#= line1LinkId =#_">

<div class="cbs-pictureOnTopLine1 custom-accentText ms-noWrap" id="_#= line1Id =#_"> _#= line1 =#_</div>

I then created a custom Hover Panel template from the Picture Hover Panel template, and have mapped the product images to RefinableString02

So in the Item_Creative-HoverPanel I have added the following to replace the RenderBody line:

<p style="display: block">_#= ctx.CurrentItem.refinablestring02 =#_</p>

The hover panel works but instead of showing the product image, it’s showing the link to the image (not clickable). I’ve searched and searched and cannot work out how to get it to show as an image and not a URL?

Can anyone help as I've being searching the net for days and I still can't find a solution - I'm a noob on Sharepoint but can follow instructions :-)

Thank you

  • 1
    can you please share screenshot of current output ? – Bhavik Shingala Oct 24 '18 at 5:33
  • Here is screenshot of current panel link meanwhile I’ll try the answer below, thank you – Koloris Oct 24 '18 at 14:39

Add in mso:ManagedPropertyMapping that ManagedProperty RefinableString02

<mso:ManagedPropertyMapping msdt:dt="string">  "Product Images"{Product Images}:"RefinableString02", ...

Then get value

//*Product Images*//
var ProductImages = $getItemValue(ctx, "Product Images");

Finally write it in item

<img src="_#= ProductImages =#_">
  • Hi, thank you for taking the time to post this - it's much appreciated. Quick question, does all of the above go in the Hover Panel template as I've added all of this in and the hover panel is blank – Koloris Oct 24 '18 at 14:53
  • Thank you so much, I just had the img src in the wrong place - it's all working now and I am very grateful for your help – Koloris Oct 24 '18 at 16:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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