Gravatar for

Question by CambridgeAdmins, Sep 6, 2016 11:32 AM

Custom Search Result Thumbnail / Icon

We would like to change the icons of search results for a specific index. I have gone into edit mode in the JSUI, and I noticed that when you attempt to modify a search result there is a section where you can modify the icon. However, I couldn't figure out how to change the icon. We would like this to be a customized icon that our Marketing department will create. I attempted to search for documentation on this topic, but I couldn't find anything relevant.

Could someone please help me change the icon of a specific set of search results? Specifically of one index? We'll also want to change the icons for all pdf, word, and excel documents to look like their usual icons that their companies use. Is this possible?

Is this possible with the .NET UI as well?

2 Replies
Gravatar for

Answer by Sébastien Belzile, Sep 7, 2016 8:09 AM

With the JS UI, the icon is handled by the CoveoIcon component. I recently had to add my icon for a particular set of results. What I did was setting the value field of the CoveoIcon component to the CSS class which defines my icon.

<span class="CoveoIcon"

I don't know if this is possible for the .NET UI. I will ask somebody else to answer that one.

Gravatar for

Answer by ronald, Sep 7, 2016 9:42 AM

With the .NET UI, the easiest way to customize result icons is by configuring custom file types with the interface editor ( ). Default icons for usual file types (e.g. pdf, doc, xls, etc.) can also be customized that way.

Customizing file icon this way affects all results displayed in the search interface (e.g. My Emails). If you want to restrict the scope of the custom icons, a possible workaround would be to create a new search interface ( ) and customize the icons only for that new search interface. Another possible approach would be to modify your skin result template by replacing the ResultFormatIcon control by your own control. You could for example derive a class from ResultFormatIcon and override the virtual method GetFormatIcon() ( ). That would require more technical knowledge, but would also provide the maximum flexibility.

Ask a question