Templating + HTML within InstantSearch

Hello, community.

I am using Algolia InstantSearch.js on my site to pull in data. I am loving the capabilities of Algolia, but I am stumped with one part (so far):

When I create a template that contains HTML, the CSS classes are being ignored (which obviously produces very unattractive results).

My template code might look something like this:

  '<div class="card">' +
    '<div class="header center aligned resource_type">{{{_highlightResult.type.value}}}</div>' +
      '<div class="image">' +
        '<a href="/resources/view/{{{slug}}}-{{{id}}}">' +
          '<img class="ui large image" src="{{{main_image}}}">' +
        '</a>' +
      '</div>' +
    '<div class="content">' +
      '<div class="block-padding">' +
        '<span class="right floated">' +
          '<div class="mini ui label" data-position="top right" data-tooltip="Meant for {{{grades.name}}}">{{{grades.name}}}</div>' +
        '</span>' +
          '<div>' +
             '<div class="mini ui label resource-type-{{{subjects.id}}}" data-position="top left"  data-tooltip="Covers {{{subjects.name}}} outcomes">{{{subjects.name}}}</div>' +
          '</div>' +
        '</div>' +
        '<a href="/resources/view/{{{slug}}}-{{{id}}}" data-tooltip="View this resource" data-position="top center" class="header">{{{_highlightResult.name.value}}}</a>' +
        '<div class="meta">' +
          '<span class="truncated_write_up">{{{_snippetResult.write_up.value}}}</span>' +
        '</div>' +
      '</div>' +
      '<div class="extra content resource-block-action">' +
        '<div>' +
          'Added by <a href="/users/{{{_highlightResult.author.value}}}" class="added_by" data-position="top left" data-tooltip="Learn more about {{{_highlightResult.author.value}}}">{{{_highlightResult.author.value}}}</a>' +
        '</div>' +
        '<span><i class="heart icon"></i>{{{loves}}}</span>' +
        '<span><i class="download icon"></i>{{{downloads}}}</span>' +

        '<span class="right floated" data-position="top right" data-tooltip="View this resource to download">' +
          '<a href="/resources/view/{{{slug}}}-{{{id}}}" class="ui mini button to-view">View</a>' +
        '</span>' +
      '</div>' +

Any suggestions on how to make this work?

It looks to me that I might need to use connectors. Am I reading into this correctly?

Either way, I guess I’ll give it a shot and see what comes from it! I’ll update my thread with my findings.

Can you make that into a simpler fiddle? I’m not sure if I understand exactly what the issue is you’re experiencing

A connector will give you complete freedom over how to inject the html indeed