how to add clickable images on instant search with algolia

Question

Hi I have made a instant search with images but I want them to click the image and redirect them to a different page. I have been searching for ages and I'm so stuck. what do I need to add in the index and how to add it in javascript.

I use json for the indexes.

add href to a image. I use javascript and html.

score 0 · Answer 1 · answered Mar 11 '17 at 17:59

In the index, you need to have one attribute for the url of the link and one attribute for the src of the image.

var myRecord = {
    url: "/this-cat.html",
    image: "/cat-pic.png",
    ... // other attributes
}

Then, you need to use both in the template:

templates: {
    item: '<a href="{{{url}}}"><img src="{{{image}}}" /></a>'
}

Here's a template that does this from the instantsearch e-commerce example.

how to add clickable images on instant search with algolia

1 Answers1