Add Image Thumbnails to Blog Home Page?

Highlighted
New Member
17 0 0

Hi 

i am able to customize the blog home page by editing blog.liquid and added post excerpts.

Now, i want to add image thumbnails along with the textual excerpts. can anyone please suggest how to make this change or what code needs to be added and where?

 

The blog home page should come along with image and post excerpt.

Here is the blog home page url http://www.highnoteperformance.com/blogs/news

 

Please suggest as i am trying to figure it out but no success.

Thanks in advance

0 Likes
Highlighted
Shopify Staff (Retired)
Shopify Staff (Retired)
87 0 20

Hi Jasjiv,

Ana here, from the Shopify guru team. :)

It looks like in your case you may not have the code for featured images inserted into your theme code. Here's the code you'll need: 

<img src="{{ article.image.src | img_url: '1024x1024' }}" alt="{{ article.image.alt }}">

You'll want to insert that into your blog.liquid theme file, as well as make sure that you have featured images attached to your blog posts for this to work. 

Also, something to keep in mind: the '1024x1024' designates the size of the image you're pulling in, which you can change. Here's more info on setting size parameters: https://help.shopify.com/themes/liquid/filters/url-filters#size-parameters

Essentially, you're wanting to insert that code somewhere in between the blog post loop, which is found in between the  {% for article in blog.articles %} and {% endfor %} code found in blog.liquid. 

I recommend playing around with the placement of that code, until you find a position and size for the image that works for you. 

Hope this helps guide you in the right direction!

Ana

2 Likes
Highlighted
New Member
2 0 0

Yes it is realy helpful adding name to the image because it also help costumer to reach your website and good for website traffic.

Cheap Housekeeping products Online 

0 Likes
Highlighted
New Member
2 0 0

Adding image tumbnail to blog really helpful for bringing traffic to your blog.......

Cheap Housekeeping products Online 

0 Likes
Highlighted
New Member
17 0 0

thanks Ana

Earlier i was able to do this but image not appearing, i missed to add feature image. Now it worked, :)

0 Likes