How to Setup Feature Image in a Blog?

[cpoexperts]

Hi There,

I have a question about setup feature image in a blog post. I am a beginner in Shopify. If I do not set the feature image, how will I call the first image as a featured image on a blog post?

Here I have attached a screenshot, please have a look.

If you have any query, please let me know.

Blog Url: https://cpo-experts.myshopify.com/blogs/image-editing-tips/multi-clipping-path-vs-photo-masking-in-2...

Main Page: https://cpo-experts.myshopify.com/

Example: https://www.clippingpathoutsource.com/blog?start=18

Regards,

Anup Roy

[oscprofessional]

Hi,

WAYS TO ADD A SHOPIFY FEATURED IMAGE IN BLOG POSTS

1. UPLOAD ANY PICTURE YOU WANT TO USE AS A SHOPIFY FEATURED IMAGE INTO YOUR SITE FILES.

For this method to work, you have to publish your blog post and determine the ID of the blog post itself. The ID of the blog post is typically the only number in the url

Using this method you would save your image “blog-18993667.jpg” – without the quotes, and upload the image into the files section in your Shopify admin. You can upload files by logging into your Shopify admin and then clicking on settings and then clicking on files.  I know, it is complicated, but you want a Shopify featured image on your blog don’t you? To make this work you then have to modify your template files. You are looking for the blog index template. This can change from theme to theme so you might have to do some detective work. Within the template file that renders the blog index you want to insert the following code into the for article loo

Here is the code:

{% for article in blog.articles %}

 
    <a href="{{ article.url }}">

 
        {% capture file_name %}blog-{{ article.id }}.jpg{% endcapture %}

 
        {% capture alt_attr %}{{ article.title | escape }}{% endcapture %}

 
        {{ file_name | asset_url | img_tag: alt_attr }}    

 
    </a>

 
{% endfor %}

2. USE THE FIRST IMAGE WITHIN A POST AS THE SHOPIFY FEATURED IMAGE

This method is a bit easier for the end user. There are no additional steps to take to upload an image, as long as you have an image in your actual blog post, you will have a Shopify featured image. Automatically using the first image is potentially an issue. If you have a small or irrelevant image as the first one in your blog post the featured image might not attract a reader. You just have to keep this in mind when creating your blog posts.

Same as with the previous method you are going to insert this code into the for article loop on the blog index page.

Here is the code:

   {% if article.content contains "<img" %}

    {% assign src=article.content | split: 'src="' %}

    {% assign src=src[1] | split: '"' | first | replace: '//cdn', 'http://cdn';; | replace: 'http:http://';;, 'http://';; | remove: 'https:' %}

    <a href="{{ article.url }}">

    <img src="{{ src }}" >

    </a>

    {% endif %}

I have used both of these methods. My preference is method 2 as it is easier for the end user and happens without further action after posting a blog. I can see circumstances where I would opt for method 1. Mainly when you want more control over the featured image.

 Finally! You can upload featured images!

Shopify store owners and developers rejoice. Shopify has finally launched a featured image for their blog. While this is great news it does not really help you if you are using an older theme. You will have to modify your theme files to take advantage of the new featured image feature.

Uploading images to use as the feature image is a breeze. From within your blog post click on choose image and upload your image.

Using the article image is a bit more complicated, here is a sample snippet:

{% if article.image %}
 {{ article | image_url: 'medium'}}
{% endif %}

you can refer this link

http://longlivetheinternet.com/shopify-featured-image-in-blog-posts/