How do I include images in the Swiftype WordPress plug-in's autocomplete dropdown?


#1

How do I include images in the autocomplete results when using the Swiftype Search plug-in for WordPress?

To customize the autocomplete dropdown for your search engine built with the Swiftype plug-in for WordPress, you’ll need to create a customRenderFunction to be added to your theme’s functions.php.

Here’s a general snippet to get you started:

<?php
function swiftype_javascript_config() {
?>
<script type="text/javascript">
 var customRenderFunction = function(document_type, item) {
      var title = item['highlight']['title'] || Swiftype.htmlEscape(item['title']);
      var image = item['image'];
      return '<p class="title"><img src="' + image + '">' +  title + '</p>';
    };

var swiftypeConfig = {
  renderFunction: customRenderFunction
};
</script>
<?php
}

add_action('wp_head', 'swiftype_javascript_config');
?>

As long as you’re indexing thumbnail image values to your engine, you should now have images in your autocomplete dropdown!