Adding blog thumbnails to search results (in NEW Minimal Theme)

stillj
Tourist
8 0 6

There was a long discussion on this a few years back. But now that Minimal theme has been updated with sections, this needs a redo. 

The problem: 

In search, my blog posts that have no featured image don't output an image. And those that have a featured image output a placeholder image, rather than their featured image. Like the first and the third item seen here: 

 

The Code: 

The code in the search-result.liquid snippet is handling this function. And this is what is there now: 

{% if item.featured_image or item.image %}
     {% comment %}
      We have a featured_image
     {% endcomment %}
    {% assign has_image = true %}
    {% assign image_alt = item.title | escape %}
    <div class="grid__item one-fifth">
      <a href="{{ item.url }}" title="{{ image_alt }}">
        {% capture img_id %}SearchImage-{{ item.id }}{% endcapture %}
        {% capture wrapper_id %}SearchImageWrapper-{{ item.id }}{% endcapture %}
        {%- assign img_url = item.featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
        {% include 'image-style' with image: item.featured_image, width: 170, height: 240, wrapper_id: wrapper_id, img_id: img_id %}
        <div id="{{ wrapper_id }}" class="search__image-wrapper supports-js">
          <div style="padding-top:{{ 1 | divided_by: item.featured_image.aspect_ratio | times: 100}}%;">
            <img id="{{ img_id }}"
                 class="search__image lazyload test"
                 data-src="{{ img_url }}"
                 data-widths="[40, 65, 90, 120, 150, 180, 360, 480, 600]"
                 data-aspectratio="{{ item.featured_image.aspect_ratio }}"
                 data-sizes="auto"
                 alt="{{ image_alt }}">
          </div>
        </div>

        <noscript>
          {{ item | img_url: 'medium' | img_tag: image_alt }}
        </noscript>
      </a>
    </div>
  {% endif %}

"img_url = item.featured_image" looks right to me. 

But it comes out as: 

<div id="SearchImageWrapper-11013149" class="search__image-wrapper supports-js">
          <div style="padding-top:Liquid error: divided by 0%;">
            <img id="SearchImage-11013149" class="search__image test lazyautosizes lazyloaded" data-widths="[40, 65, 90, 120, 150, 180, 360, 480, 600]" data-aspectratio="" data-sizes="auto" alt="Lemon Pepper Hummus" data-srcset="//cdn.shopify.com/s/assets/no-image-50-3d8cc48bd078edcd544c8d60f929ed2d8800a3fc52e0f602e84b1767e392bfcd_40x.gif 40w, //cdn.shopify.com/s/assets/no-image-50-3d8cc48bd078edcd544c8d60f929ed2d8800a3fc52e0f602e84b1767e392bfcd_65x.gif 65w, //cdn.shopify.com/s/assets/no-image-50-3d8cc48bd078edcd544c8d60f929ed2d8800a3fc52e0f602e84b1767e392bfcd_90x.gif 90w, //cdn.shopify.com/s/assets/no-image-50-3d8cc48bd078edcd544c8d60f929ed2d8800a3fc52e0f602e84b1767e392bfcd_120x.gif 120w, //cdn.shopify.com/s/assets/no-image-50-3d8cc48bd078edcd544c8d60f929ed2d8800a3fc52e0f602e84b1767e392bfcd_150x.gif 150w, //cdn.shopify.com/s/assets/no-image-50-3d8cc48bd078edcd544c8d60f929ed2d8800a3fc52e0f602e84b1767e392bfcd_180x.gif 180w, //cdn.shopify.com/s/assets/no-image-50-3d8cc48bd078edcd544c8d60f929ed2d8800a3fc52e0f602e84b1767e392bfcd_360x.gif 360w, //cdn.shopify.com/s/assets/no-image-50-3d8cc48bd078edcd544c8d60f929ed2d8800a3fc52e0f602e84b1767e392bfcd_480x.gif 480w, //cdn.shopify.com/s/assets/no-image-50-3d8cc48bd078edcd544c8d60f929ed2d8800a3fc52e0f602e84b1767e392bfcd_600x.gif 600w" sizes="170px" srcset="//cdn.shopify.com/s/assets/no-image-50-3d8cc48bd078edcd544c8d60f929ed2d8800a3fc52e0f602e84b1767e392bfcd_40x.gif 40w, //cdn.shopify.com/s/assets/no-image-50-3d8cc48bd078edcd544c8d60f929ed2d8800a3fc52e0f602e84b1767e392bfcd_65x.gif 65w, //cdn.shopify.com/s/assets/no-image-50-3d8cc48bd078edcd544c8d60f929ed2d8800a3fc52e0f602e84b1767e392bfcd_90x.gif 90w, //cdn.shopify.com/s/assets/no-image-50-3d8cc48bd078edcd544c8d60f929ed2d8800a3fc52e0f602e84b1767e392bfcd_120x.gif 120w, //cdn.shopify.com/s/assets/no-image-50-3d8cc48bd078edcd544c8d60f929ed2d8800a3fc52e0f602e84b1767e392bfcd_150x.gif 150w, //cdn.shopify.com/s/assets/no-image-50-3d8cc48bd078edcd544c8d60f929ed2d8800a3fc52e0f602e84b1767e392bfcd_180x.gif 180w, //cdn.shopify.com/s/assets/no-image-50-3d8cc48bd078edcd544c8d60f929ed2d8800a3fc52e0f602e84b1767e392bfcd_360x.gif 360w, //cdn.shopify.com/s/assets/no-image-50-3d8cc48bd078edcd544c8d60f929ed2d8800a3fc52e0f602e84b1767e392bfcd_480x.gif 480w, //cdn.shopify.com/s/assets/no-image-50-3d8cc48bd078edcd544c8d60f929ed2d8800a3fc52e0f602e84b1767e392bfcd_600x.gif 600w">
          </div>
        </div>

Any suggestions?

 

0 Likes
stillj
Tourist
8 0 6

Anyone?

0 Likes
AliRae
Excursionist
10 0 2

I know this is old but did you ever find an answer to this? I'm searching for an issue myself and am not having much luck in figuring out how to pull the actual "featured image" image to display it in search when a blog post is in search, now it is displaying a placeholder saying there is no image.

0 Likes