How to show the featured image in blog post

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.

0 Likes
Community Manager
Community Manager
2395 163 350

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 | Social Care @ Shopify
 - 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

3 Likes
Tourist
5 0 1

Thank you!

1 Like
Community Manager
Community Manager
2395 163 350

No problem at all. 

Hope it helps. ?

Nick | Social Care @ Shopify
 - 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

1 Like
New Member
1 0 0

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

Thanks!!

0 Likes
New Member
1 0 0

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? 

0 Likes
New Member
1 0 0

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

0 Likes
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

0 Likes
Highlighted
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.

0 Likes

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.
0 Likes