Gravatar for adam@borsi.ca

Question by Adam, Jul 17, 2015 12:25 PM

Adding Custom Image (a thumbnail) to Search result item instead of Icon

Greetings,

I'd like to replace the icon associated to each search result and instead replace that with a graphic/thumbnail that I choose for that item. i.e. an image path I've indexed along with the rest of the items info.

If it matters I'm utilizing CES 7 on a Sitecore 6.5 platform.

Any and all help is appreciated.

Thank you kindly, Adam

2 Replies
Gravatar for adam@borsi.ca

Answer by Adam, Jul 22, 2015 3:17 PM

So I rewrote my .NET PreConverter into a JScript PreConverter. I'm able to access all the expanded functionality I was after, unless I completely screwed up because I couldn't access RegEx via the C# .NET Converted file. Either case, this gets all the info I'm after.

One change I had make was to set the MetaData name to scpsclogo for my Custom Field called scpsclogo. This is probably why I couldn't access my Custom field via the GetFieldValue() method.

The last problem I have at the moment is my output with <ces:ResultField Name="@scpsclogo" runat="server" /> is that the output is placed in a span tag and is sanitized. i.e. HTML special characters where HTML should be.

Is there a way to unsanitize the input (via JS below) or output (via the ASP tag)?

function InsertThumbnail(PreConversion, DocumentInfo) 
{
    try 
    {
        var thumbMods = ".ashx";
        // Patterns
        var mediapathPatt = "mediapath\s*=\s*(?:\"|')([^\"';]*)(?:\"|')";
        var heightPatt = "height\s*=\s*(?:\"|')([^\"';]*)(?:\"|')";
        var widthPatt = "width\s*=\s*(?:\"|')([^\"';]*)(?:\"|')";

        // Execute
        var thumbField = DocumentInfo.GetFieldValue("Logo");
        var thumbURIVal = thumbField.match(mediapathPatt);
        var thumbURI = thumbURIVal[1];
        if (thumbField.search(heightPatt) != "-1" && thumbField.search(widthPatt) != "-1") {
            var thumbHeightVal = thumbField.match(heightPatt);
            var thumbWidthVal = thumbField.match(widthPatt);
            var thumbHeight = thumbHeightVal[1];
            var thumbWidth = thumbWidthVal[1];
            thumbMods = ".ashx?h=" + thumbHeight + "&thn=1&w=" + thumbWidth;
        }

        // Create
        var thumbImage = "<img src=\"/~/media" + thumbURI + thumbMods + "\" border=\"0\" />";
        PreConversion.Trace("New thumbnail : " + thumbImage, 1);
        DocumentInfo.SetFieldValue("scpsclogo", thumbImage);
        // log it
        PreConversion.Trace("InsertThumbnail : " + DocumentInfo.GetFieldValue("ID"), 1);
    }
    catch (e)
    {
        PreConversion.Trace("InsertThumbnail[PreSitecorePSC] : " + DocumentInfo.GetFieldValue("ID") + " : " + e, 3);
    }
}

EDIT1: Wanted to add that the value of Logo (My Field) from sitecore comes in like this: <image mediaid="{E84D8A9B-2E64-432D-A806-7F534449A260}" mediapath="/Images/Partner-Logos/BlueCielo_Logo" src="~/media/E84D8A9B2E64432DA8067F534449A260.ashx" alt="" height="50" width="90" hspace="" vspace="" />

Because it it a ImageField you have to then parse it out to find the important parts.

Thank you kindly,

Adam

Gravatar for slangevin@coveo.com

Comment by Simon, Jul 23, 2015 8:54 AM

Ok, so if I follow completely, you now have the url parsed via a regex in your conversion script. So you should have a string containing the destination of the media file and you are looking for a way to assign it to an image source tag right?

Just to test, I added a field called @scpsclogo to my items, and my ASP looks like this:

<% string iconUrl = Result.ResultObject.GetField("@scpsclogo").ToString(); %>
    <img src="<%= iconUrl %>">

So I created a variable directly in asp which grabs the field. Then I assigned it to the image tag. I tried to do it without assigning to a variable before but it seems like the call was not made on page load.

Gravatar for adam@borsi.ca

Comment by Adam, Jul 23, 2015 9:06 AM

Hi Simon,

Excellent, that gets the image into the results. So this allows me to simplify my code to be MUCH more simple. I've scrapped the function above and just taken in the URL I embeded in a meta tag and put it directly into scpsclogo.

Awesome.

Thank you very much for you help! Adam

Gravatar for slangevin@coveo.com

Answer by Simon, Jul 17, 2015 1:41 PM

Using the .Net interface, I guess this is what you need:

https://onlinehelp.coveo.com/en/ces/7.0/administrator/addingcustomfile_types.htm

Using the JavaScript Interface:

https://developers.coveo.com/display/public/JsSearch/FiletypeUtilsOptions

Hope it helps,

Simon

Gravatar for adam@borsi.ca

Comment by Adam, Jul 17, 2015 2:21 PM

Hi Simon,

Thanks for this. I am using the .NET interface, but this method seems a little static.

So for example if I were to display a bunch of blog posts in my search results, I'd like to replace the icon with the thumbnail associated with the blog post.

Any advice?

Thank you kindly, Adam

Gravatar for slangevin@coveo.com

Comment by Simon, Jul 17, 2015 3:07 PM

The .Net UI is indeed a bit more static but once you know what's behind it.

So has you may know, everything is "Skin" based. The Skin generating the Result list is the ResultPanel.ascx, which calls the ResultTemplate.ascx for each result unit.

In that last ascx file, you will find a CesResultSmallColumn class, which, if you inspect the element on the browser console, contains a dynamically generated image. This is what we want to replace.

Now how do we had logic to that block of ASP? Well we can use the IfField Class. Look here for an example. If you look at the members of that class, you will see "Values", which is a list of values of a specific field.

So here is probably the most dynamic way I could think about it.

1- Create a custom field called iconURL in which 2- Use a conversion script to populate that field with the address of your icon image depending on the file type/extension/source/etc… 3- In the CesResultSmallColumn, use the IfFieldClass to filter on fields and insert an image tag with the source pointing at your iconURL field.

Hope it helps,
Simon

Gravatar for slangevin@coveo.com

Comment by Simon, Jul 17, 2015 3:08 PM

The .Net UI is indeed a bit more static but once you know what's behind it.

So has you may know, everything is "Skin" based. The Skin generating the Result list is the ResultPanel.ascx, which calls the ResultTemplate.ascx for each result unit.

In that last ascx file, you will find a CesResultSmallColumn class, which, if you inspect the element on the browser console, contains a dynamically generated image. This is what we want to replace.

Now how do we had logic to that block of ASP? Well we can use the IfField Class. Look here for an example. If you look at the members of that class, you will see "Values", which is a list of values of a specific field.

So here is probably the most dynamic way I could think about it.

1- Create a custom field called iconURL in which
2- Use a conversion script to populate that field with the address of your icon image depending on the file type/extension/source/etc…
3- In the CesResultSmallColumn, use the IfFieldClass to filter on fields and insert an image tag with the source pointing at your iconURL field.

Hope it helps,
Simon

Gravatar for slangevin@coveo.com

Comment by Simon, Jul 17, 2015 3:12 PM

Oh and by the way, to input a field value in your ascx page, use <ces:ResultField Name="@iconURL" runat="server" />

Gravatar for adam@borsi.ca

Comment by Adam, Jul 17, 2015 4:19 PM

Hi Simon,

Ok, so that sounds like I was on the right track myself. What I got hung up on was at the moment I have two interfaces to my Coveo server - a specialized search and a general site serch. Both suit specific needs, so how can I modify that file without breaking anything in the general use case?

Gravatar for slangevin@coveo.com

Comment by Simon, Jul 20, 2015 6:13 AM

Hum, I am not entirely sure if I follow correctly but the best practice is to copy the skin you need and create a custom one out of it. You can then reference this skin when you create the interface. This way both interfaces will have their own skin file. It will also prevent any possible loss of customization when upgrading your Coveo front-end.

Does that make sense?
Simon

Gravatar for adam@borsi.ca

Comment by Adam, Jul 20, 2015 7:21 AM

sorry wasn't paying attention when I submitted. see below. thank you!

Gravatar for adam@borsi.ca

Comment by Adam, Jul 20, 2015 7:22 AM

Hi Simon,

This does. I'll give it some attention and see where that gets me.

Thank you for pointing me in a useable direction. I'll check back with progress and outcome.

Adam

Gravatar for adam@borsi.ca

Comment by Adam, Jul 21, 2015 5:09 PM

Hi Simon,

I'm having some trouble accessing my custom field "iconURL" via code. Using a .NET script and get errors when trying to GetFieldValue for the custom field.

I'm able to hard code a meta data name into my custom field, but I don't see the custom field OR the meta name listed in DocumentInfo.Fields(). I do see a few other custom fields listed, why not this one (they're all string types)?

I CAN output the value of the custom field via the ASP tag you provided, but like you said I have to format it into an img tag before outputting it to the interface.

Any advice?

Adam

Gravatar for slangevin@coveo.com

Comment by Simon, Jul 22, 2015 7:58 AM

Hi Adam,

I am not entirely sure where you are blocking. Is it when trying to add an icon url to the document using a conversion script? Here is a sample that might help you:

https://developers.coveo.com/display/Converter/Adding+New+Metadata+Named+AllFieldValues

Gravatar for adam@borsi.ca

Comment by Adam, Jul 22, 2015 9:30 AM

Hi Simon,

I'm familiar with the AllFieldValues trick, but the two fields I'm looking for aren't available in the DocumentInfo.Fields() list.

I can add the img url from my meta data field to my custom field without issue and no conversion scripts, but if I try to access either this meta data coming in or this custom field in Coveo via a conversion script they're not available.

I try: Coveo Field - DocumentInfo.GetFieldValue("scpsclogo") … error meta data - DocumentInfo.GetFieldValue("thumbnail") … error

Hope this is a little clearer.

Adam

Gravatar for adam@borsi.ca

Comment by Adam, Jul 22, 2015 3:00 PM

Hi Simon,

I've pretty much resolved my problem. I'm just one issue away from having this work. I've posted my code, along with the issue, as a new answer for those interested in doing the same.

Ask a question