THIS IS ARCHIVED DOCUMENTATION

Adding Images to Your Search Page Using the Coveo for Sitecore Legacy Search UI Framework

This is for:

Developer System Administrator

Coveo for Sitecore 4.1 (November 2018)

Some of your Sitecore items may link to an image stored in the Media Library. Therefore, you may want to display those images next to their associated search result on a search page. The September 2014 release of Coveo for Sitecore introduced two built-in computed fields specifically for this purpose: one to hold an image URL and another to hold an image alternate text.

Requirements

  • You should have Sitecore items with an Image field.

Step 1: Configure the Computed Fields

  1. In Coveo.SearchProvider.Custom.config, you need to include your two built-in computed fields under the fields element with a hint attribute equal to raw:AddComputedIndexField.

     <fields hint="raw:AddComputedIndexField">
   <field fieldName="imageUrl" sourceField="Image">Coveo.SearchProvider.ComputedFields.ImageUrlComputedField, Coveo.SearchProviderBase</field>
   <field fieldName="imageAlt" sourceField="Image">Coveo.SearchProvider.ComputedFields.ImageAltComputedField, Coveo.SearchProviderBase</field>
 </fields>
    • The property fieldName is the name of your computed field.
    • The property sourceField is the name of the image field from which the new field will be computed.

  2. Save the file.

Step 2: Rebuild Your Search Indexes or Re-Index Specific Items

Now that the computed fields are configured, you should either rebuild your search indexes or re-index the specific Sitecore items that contain image fields (see Coveo for Sitecore Indexing Guide). Then, items that are re-indexed will have two new fields, corresponding to the computed fields that you have just added.

Step 3: Display the Images

Now that your items are re-indexed, you can refer to your two new computed fields in a Coveo-Powered Search Page, or more precisely in its result template.

  1. In the Coveo Search sublayout or Coveo Search view file associated with your Coveo-Powered Search Page, find the div element with a class attribute equal to CoveoResultList. It should contain a script element with a class attribute equal to result-template. This is what’s called a “result template”.

    The Coveo Search sublayout file will be CoveoSearch.ascx in Web forms. With MVC components, the Coveo Search view file will be SearchView.cshtml (see Understanding How MVC Components Work Behind the Scenes).

  2. Inside your result template, insert the following code block:

     {{ if (raw.<%= ToCoveoFieldName("imageurl", false) %>) { }}
     {{=image(raw['<%=ToCoveoFieldName("imageurl", false)%>'], {alt : "Anything"})   }}
 {{ } }}
  3. Save the file.
  4. Validate that images now appear next to your search results (those that have image fields).
  5. Optional steps:

    1. To display alternate text for your images, add the following code block in the result template.

       {{ if (raw.<%= ToCoveoFieldName("imagealt", false) %>) { }}
     {{=raw['<%=ToCoveoFieldName("imagealt", false)%>'] }}
 {{ } }}

    2. Save the file.