Customizing Search Results

  • The search results element can be customized with additional options, such as switching to image-based results using the defaultToImageSearch attribute.

  • To enable image search, you need to activate it in the Control Panel for your search engine and then add the defaultToImageSearch attribute to the search results div element.

  • The defaultToImageSearch attribute, when set to "true", makes the image search tab the default view for search results.

  • Further customization options for search results can be found in the Programmable Search Element Control API documentation.

In a similar way to customizing search box, you can add additional options to the search results element.

For example, in order to change our search engine from webresults-based to image-based, we can utilize the defaultToImageSearch attribute.

First of all, you need to enable Image Search in the Control Panel for your search engine. In the Setup section, in Basics tab, click the Image search option into the "on" position. After that, add the defaultToImageSearch attribute to the <div class="gcse-searchresults"></div> element on your website.

<!-- Insert your own Programmable Search Engine ID here --> <script async src="https://cse.google.com/cse.js?cx=017643444788069204610:4gvhea_mvga"></script> <!-- Try switching the attribute value to "true" or "false" --> 
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults" data-defaultToImageSearch="true"></div>

Now, when you search for something, the image search tab is showing as a default.

There are many more options available. You can read about other search results customization options in Programmable Search Element Control API section.

Next...

Continue to Next steps.