Adding blog thumbnails to search results (in Minimal Theme)

New Member
20 0 0

Hi Everyone,

In Minimal Theme, when you use the search bar in the header it does a great job of finding releveant content. The problem is, it only displays thumbnail images for the products on the site. But I also have blog entries that appear in the search, and there is no way in this theme to add an image for that thumbnail. 

Has anybody come across this issue? I'd like to add an image for each post as the current display with "no image" isn't an appealing visual. Here is a sample search that shows the issue: http://www.hollywoodtrenches.com/search?q=hollywood ;

As a workaround, I could hardcode an image in with each post (I'm doing about 1-2 posts per week), if anybody has a suggestion for that. 

Any help would be greatly appreciated. 

Thanks,

John

 

0 Likes
Shopify Expert
195 0 23

Can you post your code that loops through the results and outputs them? 

Stop Stressing About Shopify You’ve Got Better Things To Do => https://320ny.com/shopify/
0 Likes
New Member
20 0 0

Hi Ryan,

Thanks for your help on this.

You'll have to let me know where to look for that code and I can definitely get it up here. Bit of a newbie with the backend code.

Thanks!

John

 

0 Likes
Shopify Expert
195 0 23

Hi John,

This should be in your search.liquid templte.

-Ryan

Stop Stressing About Shopify You’ve Got Better Things To Do => https://320ny.com/shopify/
0 Likes
New Member
20 0 0

Hi Ryan,

Here is the code for my search.liquid. Thanks again for your help!

<div id="search">
  {% if search.performed %}
  {% paginate search.results by settings.pagination_limit %}

  {% if search.terms == "" %}
  <div class="row">
    <div class="span12 expanded-message">
      <div class="search-field">
        <form class="search" action="/search">
          <button type="submit" alt="{{ 'general.search.go' | t }}" class="go"><i class="fa fa-search"></i></button>
          <input type="text" name="q" class="search_box" placeholder="{{ 'general.search.placeholder' | t }}" value="" x-webkit-speech />
        </form>
      </div>
    </div>
  </div>
  {% else %}

  {% if search.results == empty %}
  <div class="row">
    <div class="span12 expanded-message">
      <h2>{{ 'general.search.no_results_title' | t }}</h2>
      <span class="subtext">{{ 'general.search.no_results_message_html' | t: terms: search.terms }}</span>
      <div class="search-field">
        <form class="search" action="/search">
          <button type="submit" alt="{{ 'general.search.go' | t }}" class="go"><i class="fa fa-search"></i></button>
          <input type="text" name="q" class="search_box" placeholder="{{ 'general.search.placeholder' | t }}" value="{{ search.terms | escape }}" x-webkit-speech />
        </form>
      </div>
    </div>
  </div>
  {% else %}

  <div class="row">
    <div class="span12">
      <h1>{{ 'general.search.title' | t }}</h1>
    </div>
  </div>

  <!-- Begin results -->
  {% for item in search.results %}
  <div class="row results">
    <div class="span1">
      <div class="thumbnail">
        <a href="{{ item.url }}">{{ item.featured_image | product_img_url: 'small' | img_tag }}</a>
      </div>
    </div>
    <div class="span11">
      <div class="search-result">
        <h3>{{ item.title | highlight: search.terms | link_to: item.url }}</h3>
        {{ item.content | strip_html | truncatewords: 40 | highlight: search.terms }}
      </div>
    </div>
    <hr class="divider" />
  </div>
  {% endfor %}
  <!-- End results -->

  {% include 'pagination' %}

  {% endif %}
  {% endif %}

  {% endpaginate %}

  {% else %}

  <div class="row">
    <div class="span12 expanded-message">
      <div class="search-field">
        <form class="search" action="/search">
          <button type="submit" alt="{{ 'general.search.go' | t }}" class="go"><i class="fa fa-search"></i></button>
          <input type="text" name="q" class="search_box" placeholder="{{ 'general.search.placeholder' | t }}" value="" x-webkit-speech />
        </form>
      </div>
    </div>
  </div>
  {% endif %}

  {% if search.results_count == 0 %}
  {% unless settings.featured_products == blank or collections[settings.featured_products].empty? %}
  <div class="cart-featured">
    <h3 class="featured-cart-title">Featured Items</h3>
    {% for product in collections[settings.featured_products].products limit: 4 %}
      {% include 'product-loop' %}
	  {% endfor %}
  </div>
  {% endunless %}
  {% endif %}

</div> <!-- /#search -->

 

0 Likes
Shopify Partner
199 0 20

Hi John,

I might have some insight. Ive added alot of extra detail to this post incase anyone in the future reads this and needs the info ;) The portion of your code that is outputting the images is ...

{% for item in search.results %}
 <div class="row results">
  <div class="span1">
    <div class="thumbnail">
      <a href="{{ item.url }}">{{ item.featured_image | product_img_url: 'small' | img_tag }}</a>
    </div>
  </div>

Specifically the <a href="{{ item.url }}">{{ item.featured_image | product_img_url: 'small' | img_tag }}</a> portion. 

so what is happening is, item in search.results can only be retuned from 3 different sources: Products, articles, and pages(meaning your search query will only look for content from those sources). The reason no image is showing up is because there is no featured_images for blog articles, only on products. Now dont get me wrong, it is possible to add an image to the content of a blog, but there is no actual featured image. But now that we have isolated the issue there may be a way around it.

I havent had much time to use it, but using Jason's Custom dashboard tool you might be able to add a featured image of sorts to the blog articles. By creating a metafield for an image, you could call in your html later using liquid (assuming Jason's tool allows you to add a field for images). Then you would need to add something like  an "if" statment to determain if it is a product image, or blog image and display it accourdingly.

This is all just an idea, so if there are any other developers out there with another idea or more insight than me lets hear it!

Hope this can atleast provide a little help

-Brendin

0 Likes
Shopify Expert
195 0 23

Good stuff Brendin. 

One option is to utilize the excerpt section of an article to act as your featured image. You can put text and images in here but if you want to keep it simple only put one image in here. In your theme you would take this section:

<div class="thumbnail">
  <a href="{{ item.url }}">{{ item.featured_image | product_img_url: 'small' | img_tag }}</a>
</div>

and replace it with something like this

<div class="thumbnail">
  {% if item.excerpt %}
    <a href="{{ item.url }}">{{ item.excerpt }}</a>
  {% else %}
    <a href="{{ item.url }}">{{ item.featured_image | product_img_url: 'small' | img_tag }}</a>
  {% endif %}
</div>

The excerpt is going to output whatever html is in it so you might have to place a style rule on the thumbnail class for the html that is outputting in it, specifically the image tag. 

John - feel free to play with this or Jason's custom fields tool and let us know if you have any issues.

-Ryan

Stop Stressing About Shopify You’ve Got Better Things To Do => https://320ny.com/shopify/
0 Likes
Shopify Partner
199 0 20

Smart Idea Ryan! I totally didnt even think to use the Exerpt. The only thing I can think of that may be an issue is the size of the image being placed into the excerpt section. Do you think the class of "span1" would contain the image width? but other then that, I feel your solution would be the most simple!

0 Likes
Shopify Expert
195 0 23

The images in the span1 currently have this style applied ot them

img {
  max-width: 100%;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

Currently this is resizing them and should resize any images placed in the excerpt. If for some reason the current styling does not work we can advise John. 

Stop Stressing About Shopify You’ve Got Better Things To Do => https://320ny.com/shopify/
0 Likes
New Member
20 0 0

Thanks Brendin, that could definitely be an option. Would have to play around with Jason's Dashboard a little deeper. Not sure I have the coding skills though.

I've first tried Ryan's solution, but with little coding knowledge, I'm not sure on the next step. By simply adding the code you've suggested to my search snippet (actually replacing the original code with yours), here is a typical search page that displays now - http://www.hollywoodtrenches.com/search?q=charlie ;

Clearly there is something being called but the content isn't showing up (or I've not told it which content to pull). The next step of placing a style rule on the thubmnail that's being called, you'd have to walk me through if you can. 

Thanks!

John

 

0 Likes