How to show the featured image in blog post

Solved
cbdextra
Tourist
5 0 1

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.

Accepted Solution (1)

Accepted Solutions
Nick
Community Moderator
Community Moderator
4503 431 974

This is an 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

Nick | Community Moderator @ Shopify (OOO until June 14th)
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

View solution in original post

Replies 29 (29)
Nick
Community Moderator
Community Moderator
4503 431 974

This is an 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

Nick | Community Moderator @ Shopify (OOO until June 14th)
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

cbdextra
Tourist
5 0 1

Thank you!

Nick
Community Moderator
Community Moderator
4503 431 974

No problem at all. 

Hope it helps!

Nick | Community Moderator @ Shopify (OOO until June 14th)
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

acgrall
New Member
1 0 0

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

Thanks!!

ConcreteLab
Tourist
4 0 1

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
New Member
1 0 2

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! - RandyScreen Shot 2019-10-30 at 11.19.42 AM.png

Russ_M
New Member
1 0 0

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
New Member
1 0 0

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! - RandyScreen Shot 2019-10-30 at 11.19.42 AM.png



. I did it for my site.

lovequoteshindi
New Member
1 0 0

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

seoprashant is highly experienced in SEO, SMM, SMO, SEM, SHOPIFY and wordpress. i am working in MNC and also providing freelancer digital marketing services.
ericTreeLight
Excursionist
22 2 3

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
Shopify Partner
4 0 2

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

redgypsy
New Member
1 0 0

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
Tourist
5 0 0
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
Excursionist
22 2 3

I'll second the motion!

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

 

GoRustic
New Member
1 0 0

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
Tourist
13 0 2

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
New Member
3 0 0

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
Tourist
13 0 2

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
Excursionist
21 0 5

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

 

ImkeSNB_0-1600313256796.png