WordPress Terms Thumbnails?

Hi,

I am trying to allow algolia search to show thumbnail images for terms with autocomplete e.g. currently only thumbnails are shown for posts.

Basically show thumbnail images for terms if an image is present in the indecies (I can manually update in algolia backend with correct image).

[running v2.6 of algolia plugin]

currently the WP plugin supports terms as such:

   id="tmpl-autocomplete-term-suggestion">
          <a class="suggestion-link" href="{{ data.permalink }}" title="{{ data.name }}">
            <svg viewBox="0 0 21 21" width="21" height="21">
              <svg width="21" height="21" viewBox="0 0 21 21">
                <path
                    d="M4.662 8.72l-1.23 1.23c-.682.682-.68 1.792.004 2.477l5.135 5.135c.7.693 1.8.688 2.48.005l1.23-1.23 5.35-5.346c.31-.31.54-.92.51-1.36l-.32-4.29c-.09-1.09-1.05-2.06-2.15-2.14l-4.3-.33c-.43-.03-1.05.2-1.36.51l-.79.8-2.27 2.28-2.28 2.27zm9.826-.98c.69 0 1.25-.56 1.25-1.25s-.56-1.25-1.25-1.25-1.25.56-1.25 1.25.56 1.25 1.25 1.25z"
                    fill-rule="evenodd"></path>
              </svg>
            </svg>
            <span class="suggestion-post-title">{{{ data._highlightResult.name.value }}}</span>
          </a>

How can I add in the below with an else statement to revert back to using the SVG image of a Tag icon if no image present.

<# if ( data.images.thumbnail ) { #>
      <img class="suggestion-post-thumbnail" src="{{ data.images.thumbnail.url }}" alt="{{ data.post_title }}">
      <# } #>

I need something like this:

 type="text/html" id="tmpl-autocomplete-term-suggestion">
  <a class="suggestion-link" href="{{ data.permalink }}" title="{{ data.name }}">
<# if ( data.images.thumbnail ) { #>
      <img class="suggestion-post-thumbnail" src="{{ data.images.thumbnail.url }}" alt="{{ data.post_title }}">
      
<# else (  ) { #>

<svg viewBox="0 0 21 21" width="21" height="21">
      <svg width="21" height="21" viewBox="0 0 21 21">
        <path
            d="M4.662 8.72l-1.23 1.23c-.682.682-.68 1.792.004 2.477l5.135 5.135c.7.693 1.8.688 2.48.005l1.23-1.23 5.35-5.346c.31-.31.54-.92.51-1.36l-.32-4.29c-.09-1.09-1.05-2.06-2.15-2.14l-4.3-.33c-.43-.03-1.05.2-1.36.51l-.79.8-2.27 2.28-2.28 2.27zm9.826-.98c.69 0 1.25-.56 1.25-1.25s-.56-1.25-1.25-1.25-1.25.56-1.25 1.25.56 1.25 1.25 1.25z"
            fill-rule="evenodd"></path>
      </svg>
    </svg>

<# } #>
<# } #>
    
    <span class="suggestion-post-title">{{{ data._highlightResult.name.value }}}</span>
  </a>

The above ind of works. It will only show results with thumbnails e.g. it won’t display results that don’t have a thumbnail.

Hey there,

Could it be that you are missing “}” before your “else” keyword?

Could you try just outputting the data.images.thumbnail before the condition to check what’s inside?

Yes it was missing }. But still won’t work.

It works fine as long as there is an image with below, but if there isn’t one, then no results will show for Terms.

<# if ( data.images.thumbnail ) { #>
      <img class="suggestion-post-thumbnail" src="{{ data.images.thumbnail.url }}" alt="{{ data.post_title }}">
      <# } #>

Sorry I dont understand what you mean by

outputting the data.images.thumbnail before the condition to check what’s inside?

Sorry if my previous answer was unclear,

I was wondering if you could just output the content of the data.image.thumbnail variable.

{{ data.images.thumbnail }}
<# if ( data.images.thumbnail ) { #>

This will help us understand why the condition never reaches the else clause.