Blog post has a featured image in admin and how to display it in the public part

Shopify Expert
59 0 17

Hi all,

 

I have been searching for solution to this issue, but could not find any. 

When I create a new blog post in the admin of Shopify there is a Featured Image that can be added which is displayed in the Blog Posts page in the administration. Does anyone know how to show this image in the public part of the site on the Blog page. I tried the following code snippets, but none of them worked.

{{ article.featured_image }}

<img src="{{ article.featured_image.src }}">

Any help will be greatly appreciated.

Beautiful and responsive Shopify themes crafted with care at www.kabukithemes.com.
0 Likes
Shopify Expert
9938 80 1450

You are pretty close - it's article.image. This works:

{{ article | img_url: 'medium' }}

 as does:

<img src="{{ article.image.src | img_url: 'medium' }}">

 

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
1 Like
Shopify Expert
59 0 17

Hi Jason,

Thanks for the prompt reply. That was exactlty what I was looking for.

Thanks again!

Beautiful and responsive Shopify themes crafted with care at www.kabukithemes.com.
0 Likes
New Member
5 0 0

Where do you insert this code?

0 Likes
Shopify Expert
59 0 17

Hi Luciana,

 

As you know the blog posts now have a featured image that can be referenced in the following way:

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

We use this this piece of code on the home pages of our themes. You can have a look at the Spirit Theme Demo under the Blog section where we display the last blog posts in a certan blog that can be choosed from the administration of the theme.

Hope that helps. 

Should you need any further information, please let me know.

Beautiful and responsive Shopify themes crafted with care at www.kabukithemes.com.
0 Likes
New Member
1 0 0

Hi Kabuki, in which file should I insert the following code "<img src="{{ article.image.src | img_url: '1024x1024' }}" alt="{{ article.image.alt }}">"

Is it on the blog.liquid? Sorry I am new to shopify, thanks in advance.

0 Likes
Shopify Expert
59 0 17

Hi Valon,

It depends on where you need to have your blog posts displayed. For example if you need to use this featured image on the Blog page, you will need to add it in the blog.liquid file. Somewhere within the 

 {% for article in blog.articles %}

 {% endfor %}

block. Thus you will have the featured image displayed on the blog page.

 

If you need to display the blog posts on your home page, you will need to add some more logic in order to retrieve a given blog and use its articles collection in order to access the information about the blog posts in this blog. You can have a look at the following excerpt that we use in our themes:

 

 {% for article in blogs[settings.home_page_blog].articles limit: blogPostCount %}
        <li class="post">
          {% if article.image.src != blank %}
            <div class="post-picture">
              <a class="post-picture-link" href="{{ article.url }}" title="{{ article.title }}">
                <img src="{{ article.image.src | img_url: '1024x1024' }}" alt="{{ article.image.alt }}">
              </a>
            </div>
          {% endif %}
  .....
  .....
  .....

 {% endfor %}

where the "settings.home_page_blog" is the blog that is selected to be displayed from the administration of the theme.

 

Hope that helps.

Beautiful and responsive Shopify themes crafted with care at www.kabukithemes.com.
0 Likes
New Member
1 0 0

So glad I found this thread!  I added in the snippet so the photo now shows on the blog page.  But I was hoping to have the photo on the left and then the block of text to the right of that.  Any idea on how to do that?  

Disclaimer: I'm very new to shopify...

0 Likes
New Member
2 0 0

If you need the image in the body of the article, you need add the code <img src="{{ article.image.src | img_url: '1024x1024' }}" alt="{{ article.image.alt }}"> in

article.liquid

0 Likes
New Member
2 0 0

Hi Kabuki,

 

Thanks for that piece of code — it works great for me. One thing though, not all of the blog posts on the site I'm building have featured images, so above those posts on the blog landing page is a blank image with the words "No image." Is there a tweak to this code that will only display an image for posts that have one?

Thanks for your help.

-Jason

0 Likes