Adding blog thumbnails to search results (in Minimal Theme)

Shopify Partner
199 0 21

My first questions would be, did you add a photo to the "excerpt" section of that/all blog posts? It looks like there is just no picture there for it to load. 

As for the style rule, are you referring to the code Ryan had posted? I believe that code is already there so you shouldnt have to worry about it! Sorry for any confusion on that part. Or is there some other styling you are trying to acomplish?

-Brendin

0 Likes
Shopify Expert
195 0 23

I think Brendin has it. The excerpt fields on the post just need to contain one image. For example this page http://www.hollywoodtrenches.com/search?q=hollywood. There is noting being outputted for the excerpt. 

John can you verify what you have in the article excerpts? 

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

You're right that I simply hadn't placed an image in the "excerpt" section of the post. I've gone ahead and done that for each blog post and the search results page looks fantastic. Thanks!

There is one issue though. In the footer section, the excerpt is replacing the blog post text that is normally featured there. So rather than a few lines of text from the post, I'm getting a thumbnail image of the excerpt. This isn't ideal and looks odd. Screenshot here.

Is there a way to not have that footer section call the "excerpt" and simply default back to the text showing?

Thanks!

0 Likes
Shopify Expert
195 0 23

Hi John,

If you are okay with this you could just remove the excerpt output from your footer so the image does not show. 

-Ryan

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

Thanks Ryan! Removed the IF output for the excerpt and it works perfectly!

One last thing since this worked so well, is there anyway to repeat the process for my "About Us", "Contact Us" , "FAQ" pages? They too are being called in the search and appear without a thumbnail. There is no "excerpt" section in those pages, so I'm not sure if this option could apply.

Thanks!

John

 

0 Likes
Shopify Expert
195 0 23

Hi John,

There is no image or extra field, like the article's excerpt field, on the page objects. However, since you probably only have a few pages we could hard code some images. The code could look somehting like this:

<div class="thumbnail">
  <!-- Articles -->
  {% if item.excerpt %}
    <a href="{{ item.url }}">{{ item.excerpt }}</a>
  {% endif %}
  <!-- Products -->
  {% if item.featured_image %}
    <a href="{{ item.url }}">{{ item.featured_image | product_img_url: 'small' | img_tag }}</a>
  {% endif %}
  <!-- Pages -->
  {% if item.handle = 'about-us' %}
    <a href="{{ item.url }}"><img src="url-to-about-us-image.jpg"></a>
  {% endif %}
  {% if item.handle = 'contact-us' %}
    <a href="{{ item.url }}"><img src="url-to-contact-us-image.jpg"></a>
  {% endif %}
</div>

It's not an ideal solution but I think it can accomplish what you want. 

Cheers,

Ryan

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

It's a shame the blog doesn't have a "featured image" upload section like Wordpress.

1 Like
New Member
20 0 0

Hi Ryan,

Added the code, and the corresponding images to source for those pages, but it now returns an error on the search page. Screenshot here. 

Any suggestions?

Thanks!

John

 

0 Likes
Shopify Expert
195 0 23

Oh jeez I'm sorry. I used an assignment operator instead of a equality operator. Update the code with this:

<div class="thumbnail">
  <!-- Articles -->
  {% if item.excerpt %}
    <a href="{{ item.url }}">{{ item.excerpt }}</a>
  {% endif %}
  <!-- Products -->
  {% if item.featured_image %}
    <a href="{{ item.url }}">{{ item.featured_image | product_img_url: 'small' | img_tag }}</a>
  {% endif %}
  <!-- Pages -->
  {% if item.handle == 'about-us' %}
    <a href="{{ item.url }}"><img src="url-to-about-us-image.jpg"></a>
  {% endif %}
  {% if item.handle == 'contact-us' %}
    <a href="{{ item.url }}"><img src="url-to-contact-us-image.jpg"></a>
  {% endif %}
</div>

Oh remember to update the image src urls with an actual image url. 

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

Ricky,

That would be a good feature request for the Shopify team.

-Ryan

Stop Stressing About Shopify You’ve Got Better Things To Do => https://320ny.com/shopify/
1 Like