Gravatar for jennifer.palawasta@blackbaud.com

Question by Jennifer Palawasta, Feb 23, 2016 9:08 AM

Assigning a custom thumbnail by source

We have the same file types within different sources and want to assign a thumbnail based on source to make it easier for customers to differentiate between content groups. I found that we can define the icon component in the HTML Results template, but I am not sure how to link the icon to the source. Does anyone use this option or have sample code they can share?

Thanks in advance.

1 Reply
Gravatar for jflheureux@coveo.com

Answer by Jean-François L'Heureux, Feb 23, 2016 5:23 PM

Hi,

From your other questions, I guess you are using Coveo Enterprise Search to index Salesforce content and your UI is the JS UI framework.

When you're speaking about "thumbnail", do you mean like the PDF icon of this screenshot just besides the result title?

Result Template

Or you are really speaking about the thumbnail component (see Thumbnail Component) that displays a screenshot of an indexed document?

From your question, I guess it's the first choice. This result icon is rendered in the HTML DOM as a div with some CSS classes, some hardcoded, some dynamic based on the search result itself like this:

<div class='coveo-icon objecttype {{-raw.objecttype}}'>{{-raw.objecttype}}</div>

Here, the coveo-icon and objecttype classes says to look in a sprites image to find the icon to use depending on the value of raw.objecttype from the search result.

In your case, I guess you would want to display an icon that you know the URL for. So I would use the Underscore template syntax to check for the source to choose which icon to display like this:

{{ if (raw.syssource === 'Source name you want a different result icon for' && raw.objecttype === 'objecttype you want a different result icon for') { }}
  <img src="Source to your new image"/> OR <div class="CSS class using your image as background-image"></div>
{{ } else { }}
  <div class='coveo-icon objecttype {{-raw.objecttype}}'>{{-raw.objecttype}}</div>
{{ } }}

I hope this helps,

Jeff

Ask a question