How to show the featured image in blog post

[cbdextra]

Hey guys, 

I'm using the debut theme for my new shopify store. How can I show the featured image in my blog posts? It's only showing up as a preview image on my start page as well as on my blog page, but not inside the blog post. The image is probably hide by default.

Thanks.

[Nick · Accepted solution]

Hi cbdextra, 

Nick here from Shopify. 

To show the featured image in your blog posts it will require you to add something to the code in your website. 

You will need to go to the article-template.liquid (Online Store > Themes > Actions > article-template.liquid). Once in this file, you would need to put the following code just before where it says <div class="rte">. 

{% if article.image %}
{% capture img_id %}ArticleImage-{{ article.image.id }}{% endcapture %}
{% capture img_wrapper_id %}ArticleImageWrapper-{{ article.image.id }}{% endcapture %}
{%- assign img_url = article.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

{% include 'image-style' with image: article.image, small_style: true, width: 345, height: 345, wrapper_id: img_wrapper_id, img_id: img_id %}
<div id="{{ img_wrapper_id }}" class="article__grid-image-wrapper js">
  <div class="article__grid-image-container" style="padding-top:{{ 1 | divided_by: article.image.aspect_ratio | times: 100 }}%;">
    <img id="{{ img_id }}"
         class="article__grid-image lazyload"
         src="{{ article.image | img_url: '300x300' }}"
         data-src="{{ img_url }}"
         data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
         data-aspectratio="{{ article.image.aspect_ratio }}"
         data-sizes="auto"
         alt="">
  </div>
</div>
<noscript>
  <div class="article__grid-image-wrapper">
    {{ article | img_url: '345x345', scale: 2 | img_tag: article.title, 'article__grid-image' }}
  </div>
</noscript>
{% endif %}

It should look something along these lines as an example then. Hopefully, this helps and works for you. If you are not comfortable with editing any code in your store don't hesitate to reach out to our support team for any other help. 

All the best, Nick

[cbdextra]

Thank you!

[Nick]

No problem at all. 

Hope it helps!

[acgrall]

For once, I searched the forums and found an answer quickly that actually worked.

Thanks!!

[ConcreteLab]

Hi!

This is the answer I’ve been searching for but in my code for the same file and same theme I can’t find <div class=“rte”>

Has the theme been updated? 

[TheMustardSeed]

Hi Nick, I was glad to find your help in getting the blog image to appear on the actual blog page itself. And it worked, but the image is smaller than I'd like, and there's a large space above it which doesn't look right. Would you be willing to help me resolve this? Thanks so much! - Randy

[Russ_M]

Hi Randy. I'm facing exactly the same issue. I managed through trial and error to find a way to get rid of all the extra white space before the image but I'm stuck with modifying the image size. Did you ever find a way to resolve this one?

- Russ

[WadeNguyen]

Hello,

For resolving your problem, please remove the code line style="padding-top...."

---

@TheMustardSeed wrote:

Hi Nick, I was glad to find your help in getting the blog image to appear on the actual blog page itself. And it worked, but the image is smaller than I'd like, and there's a large space above it which doesn't look right. Would you be willing to help me resolve this? Thanks so much! - Randy

---

. I did it for my site.

[lovequoteshindi]

You can add easily feature image in your shopify blog post

you can create a post 

Title,

Subtitle

and also add images in your post

its looking great...

if you want to check example of the post you can check this site..lovequoteshindi.com

[ericTreeLight]

Worked a charm! Thanks. To clarify the directions a tad...

To go to the article-template.liquid code:

1. Online Store > Themes > Actions >  Edit Code
2. Scroll down past  Layout, and past Templates to Sections.
3. Select article-template.liquid
4. Once there, put in the code just before where it says <div class="rte">

Easy-peasy, and does the job!

[AngryFrogs]

I’ve almost got it perfect, but I can’t figure out how to center it. Can anyone help?

[redgypsy]

Hi there,

I followed these instructions to add the image. I've copied the code and all looks well except for a little hitch I can't seem to figure out. It seems that randomly my images blank in and out. Sometimes they show and sometimes they do not. For example last night, one of the posts was showing the image on the Blogs page but when I click it, the space is there but the image does not show on the actual post itself. Today, that isn't happening on the PC, but on my phone, the image isn't showing up at all in the blogs list, and when I click where the image is supposed to be and go to the post, I see the image for about one second and then it disappears. And these are different posts as well. I used the Instablog app to create these posts, but they have directed me that it may be a problem with the code and not their app. Does anyone have any ideas why this might be happening? I'm also using the Debut theme. It may also be helpful to know that when I go in to edit the post, the featured image appears  to be broken within the post. Thank you in advance.

[DymaxionGroove]

This works great. Is there a way to have the featured image show up when I share the post socially? When I share a post with a featured image in the page, I’m not able to see any image options in Facebook or Twitter.
Thanks.

[ericTreeLight]

I'll second the motion!

It sure would be nice to share the image on social media, along with the link.

[GoRustic]

Hi, I use the theme MINIMAL & I can't get my feature image to show when published. But there is a feature image option while uploading details on blog page. pls help. I can't find the code that you are talking about here. 

[AKAFIG]

Greetings! I see this post is dated 2018 and there have been changes to Debut since then (sections, etc). I would also like to show my featured images at the top of my blog posts. Should I cut and paste the same code or is there a simpler work around now? Thanks!

[jill_fh]

I just added this code (using Debut theme) and it kind of worked, but on desktop the image is smaller than I'd like it to be. The image I am using is 1024x683. On the main blog page the image displays nicely across the page and larger than how it displays on the blog article page. How can I increase the width of the image so that it's aligned with the copy on the article page? Thanks for any suggestions!

[AKAFIG]

I'd also like to increase the size of the image within the post. How do I make it the same size as the original image? Thanks!

[ImkeSNB]

Hi @Nick ,

I hope you can assist - I used the code you shared back in 2018 to add images to my blog posts, but they are small and not centered. See below.

Is there a way to get them bigger and centre them please?

Would appreciate the assistance!

Regards,
Imke