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

Shopify Expert
59 0 17

Hi Jason,

The snippet displayed in our previous post has a check whether there is an image or not. It is the following line of code:

{% if article.image.src != blank %}

So do you have the "No Image" displayed on your home page, or on your Blog page? You can use the same check for every page like the Blog page and the Article pages. 

Please let me know if you need any further help or information.

 

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

Hello guys,

I´ve read all the comments and paste the code  <img src="{{ article.image.src | img_url: '1024x1024' }}" alt="{{ article.image.alt }}">  in my blog.liquid file. The image now appears really big and underneath the excerpt of my article. I wish it appears in the left or right of the excerpt of my article and with a same height so it looks all together as a block. How can I do this? 

 

Thanks,

Gaby

0 Likes
Shopify Expert
59 0 17

Hi Gaby,

The piece of code above just displays the featured image with a size of 1024 px x 1024 px. You can change this to something smaller like 600x600. 

Looking at you store it looks like if you change the place of the snippet for the featured image, it will be displayed correctly in the left side. Can you try placing the above line of code on the following place:

<article class="grid small--text-center article">
  <div class="grid__item large--two-tenths push--large--one-tenth">
      <time datetime="2016-08-30" class="date">Aug 30, 2016</time>
      <img src="{{ article.image.src | img_url: '1024x1024' }}" alt="{{ article.image.alt }}">
        
....
.....
....

  </div>
</article>

Just place it after the <time> tag. You do not need to change anything else, but just change the place of the featured image. If you need the image to be clickable with a link you can use the following snippet:

<a href="{{ article.url }}" title="{{ article.title }}">
    <img src="{{ article.image.src | img_url: '1024x1024' }}" alt="{{ article.image.alt }}">
</a>

 

Hope that helps.

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

Hi,

Late response, I know. The issue is occurring on the blog landing page. I inserted that new code but it's not working. Here are the lines of code in that section:

 

<img src="{{ article.image.src | img_url: '1024x1024' }}" alt="{{ article.image.alt }}">
                                {% if article.image.src != blank %}
                                {% endif %}
                                {% if article.content contains '<img' %}
                                <div class="image">
                                  {% assign content_blog_home = article.content %}
                                  <img src="{% include 'blog-src-image' width article.content %}" title="{{ article.title }}" class="img-responsive replace-2x" alt="{{ article.title }}" />
                                </div>
                                {% endif %}

 

Any ideas how to remedy this?

Thanks.

-Jason

0 Likes
Highlighted
Shopify Expert
59 0 17

Hi Jason,

 

The reason why you still see the no image is because the rendering of the image is outside the check. Please use the following snippet and let me know if that works for you.

 

{% if article.image.src != blank %}
    <div class="image">
      <img  class="img-responsive replace-2x" src="{{ article.image.src | img_url: '1024x1024' }}" alt="{{ article.image.alt }}">
    </div>
  {% endif %}
  {% if article.content contains '<img' %}                               
    {% assign content_blog_home = article.content %}
    <div class="image">
      <img src="{% include 'blog-src-image' width article.content %}" title="{{ article.title }}" class="img-responsive replace-2x" alt="{{ article.title }}" />
    </div>
  {% endif %}

 

Hope that helps.

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

Hello everyone,

I have the same exact issue, but I'm a total n00b so I need your help in making this edit.

We're using the "District" theme which allows to upload a featured image, however the featured Image neither shows up on the blog list nor on the homepage. 

(see the linked image.)

http://imgur.com/a/VvL2Q

I looked at the codes you guys put up here and added them on the article.liquid as it was, but it didn't work so I removed it. Maybe I put it the wrong way or I was supposed to tweak the code.

This is what i did. Went to Edit HTML/CSS > selected blog.liquid under Templates > pasted this code at the end of the page. So the last thing on that page was this.

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

{% endpaginate %}

 

So, here's my 2 requests

  • Please paste the code exactly how I'll need to paste it on that code file.
  • Where exactly am I supposed to paste it? On article.liquid or blog.liquid? And where on these files do I paste it? After all the existing code? Anywhere? Does this mean something at the end of the page? "</section>" ?

Here's the blog link. 

Thanks so much,

Monica

0 Likes
Tourist
9 0 1

This is how I have the code to show: Blog (featured) image, title and excerpt:

<img src={{ article | img_url: 'original' }}/><br><br>
        {{ article.excerpt_or_content }}

You want to paste that in your blog.liquid template (Edit HTML/CSS > Templates) within/under: 

<div class="article"> 

Simple :) Hope it works for you!

0 Likes
New Member
1 0 0

Hello, I am using the Puro 3v1-3PO theme, and i am currently unable to get my featured image shown anywhere i.e. not on the blog page nor the image page. What should i do to get them to show up?

 

0 Likes
New Member
7 0 0

Thank you! :)

0 Likes