Hover Panel on Content Search Web Part

[karen.rowsell]

I have a content search web part which shows a catalogue of items which have 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:

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();

<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>

                </a>

            </div>

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

In the Item_Creative-HoverPanel

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?

[#2 · Accepted solution]

I finally found the solution for anyone else who has the same problem:

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");
ProductImages.overrideValueRenderer($contentLineText);

Finally write it in item
<img src="_#= ProductImages =#_">

Voila, managed property image showing on hover panel