How to add an image to blog post overview in nopCommerce

These days, many authors or websites prefer to post an image along with the blog post so that readers can get an idea right away what the blog post is about. From the design prospective also, posting an image makes your blog post looks interesting and it catches more attention.

Recently in 3.60 version, nopCommerce added a feature in the blog section where store admin (or authors) can post a blog overview so that whole blog post is not visible on the initial blog page. But, there is no additional feature out of the box to add (or upload) an image for your blog post.

Today, we will go over the process of adding an image to blog post as a workaround. There is no need to install (or buy) plugins or customize your code, as long as you know HTML, you can accomplish this very easily.

Go to: Administration > Content Management > Blog > Blog Posts


Now, pick any blog post where you would like to add an image.

nop blog image


One the "Edit blog post details" page, you will see the "Body Overview" section where the overview text is present.

"Body Overview": Brief overview of blog post. If specified, then it will be used instead of full body on the main blog page. HTML is supported.

Simple add HTML image tag with the image link in it like this (right above the text and add a line brake):

nop blog image

That's it - Try viewing the blog section of your site and you will see an image right with your blog post like this:

nopcommerce blog image


In case, you have a large image, you might see the image going out of the layout (this is normal). How to fix it correctly? Well, you can specify the dimensions like width and height but remember, if you add specific dimensions, the image "won't" be responsive. The correct way to add an image is to simply add 100% width and it will adjust itself automatically.

<img src="link goes here for the image" alt="" style="width:100%" />
<br/>


As soon as you add "width: 100%", the image should be  fixed on the blog page (desktop and mobile).

Results:

nopcommerce blog image


nopcommerce blog image


Hope it helps!

About Author

Written By Lavish Kumar

Based out of New York, USA, Lavish Kumar is a full stack web developer by profession and founder of Striving Programmers, a trusted community for developers that offers a wealth of articles and forums to assist individuals with improving their software development skills.

Leave your comment
Comments
8/28/2015 12:09 AM
Thanks for sharing this nice article. It have some great use full information.
9/2/2015 6:33 PM
I like your blog. I enjoyed reading your blog. It was amazing. Thanks a lot.
9/2/2015 11:03 PM
Thank you for your feedback, I appreciate it :)
10/2/2015 9:47 PM
Thanks for sharing this nice article it have some great useful blog....
10/22/2015 11:20 PM
Good article shared by you.Thanks for sharing this nice post.I read your blog it have some nice information which is useful for me in future.so thanks again for this nice blog.
10/23/2015 2:10 AM
@Ricoh, thank you for your feedback! Please feel free to browse the whole site and if you have any questions, post it on the discussion board here.
10/23/2015 7:23 PM
I read your blog. That was fantastic. I like your blog. Thanks a lot.
10/24/2015 2:30 AM
Thank you for your feedback and for being a regular reader of the blog :)
11/18/2015 5:00 PM
Thanks for sharing this nice article.and I wish to visit again on your blog. keep sharing with your work.
11/18/2015 5:59 PM
Thank you for your feedback!
11/19/2015 4:36 PM
You shared are more article like this having good knowledge.
11/19/2015 10:20 PM
Thank you for your comment!
11/23/2015 4:09 PM
Thanks for sharing this nice article. It have some great use full information.
11/26/2015 4:22 AM
Thank you - I am glad it helped :)