So you want to display author image or author avatar on every article of blog in Shopify? Conventionally, you cannot do that, but I will show you a tip to display Shopify author image in blog posts.
Display Shopify Author Image in Blog Posts
To start with, the modification will be taken in sections/article-template.liquid where the actual code of showing article content is. I’m using Debut theme to edit, but you can use any theme on Shopify, they should be similar in structure.
This is the initial source code of the article header part:
<div class="section-header text-center">
<h1 class="article__title">{{ article.title }}</h1>
{% if section.settings.blog_show_author %}
<span class="article__author">
{{ 'blogs.article.by_author' | t: author: article.author }}
</span>
{% endif %}
{% if section.settings.blog_show_date %}
<span class="article__date">
{{ article.published_at | time_tag: format: 'date' }}
</span>
{% endif %}
</div>What we will do in this tutorial is to display author image right before author name, so the final result will look like this.
As you read Shopify Liquid Objects documentation, then you will see this object article.user.image, so try it out.
<div class="section-header text-center">
<h1 class="article__title">{{ article.title }}</h1>
{% if section.settings.blog_show_author %}
<span class="article__author">
<span class="article__author--avatar">
<img src="{{ article.user.image | img_url: 'master' }}" alt="{{ article.author }}">
</span>
{{ 'blogs.article.by_author' | t: author: article.author }}
</span>
{% endif %}
{% if section.settings.blog_show_date %}
<span class="article__date">
{{ article.published_at | time_tag: format: 'date' }}
</span>
{% endif %}
</div>Since article.user.image returns an image object, we need to pipe to img_url filter to get the correct image URL along with size parameter.
But wait, in some cases, it doesn’t return author image URL, the article.user.image returns null. Why?
I, myself, seriously, don’t know why, because I face this issue, too. The workaround I’ve discovered to fix is to log into Shopify account, remove photo and upload photo again. This should be done once per account per store. After that, try again and you will see that author image will display.
Be aware that if you don’t pipe to img_url, it will returns something like users/xxxxx.jpg or something similar and it is incorrect value of author image URL.
If you deploy it, you will see author image showing up on the article header part.
Style to make it look a little nicer and fit into layout, by adding following CSS styling right below:
<style>
.article__author--avatar img {
display: inline;
width: 24px;
height: 100%;
border-radius: 100%;
vertical-align: middle;
}
</style>There you have it, the updated snippet of article template will display Shopify author image in blog posts.
