In this tutorial, I’m going to show you how-to display a post’s image in Ghost. If you have ever used WordPress, a post image is similar to the featured image in WordPress.Open post.hbs to display the post image in the post itself or open loop.hbs in the partials directory if you want to display the post image in the post listing, i.e. index or tag listing.

Now add the following where you want the post image to be displayed:

{{#if image}}
    <img src="{{image}}" alt="{{{title}}}" />
{{else}} 
    ... display something else, like a blank or default image...
{{/if}}

In the above code snippet, if the post has a post image, it will be displayed. If the post does not have a post image, nothing will be displayed.

If there is no post image, you can display a blank image or a default image. The code would look something like this:

{{#if image}}
    <img src="{{image}}" alt="{{{title}}}" />
{{else}} 
    <img src="{{asset "images/blank.png"}}" alt="" />
{{/if}}

In the above code snippet, if there is no post image, blank.png in the images directory of the assets directory will be displayed – file path would be /assets/images/blank.png. You can of course change the file name or use an external image by changing the image URL.

If you are displaying the post image in a post list by using loop.hbs – index or tag. You might want to make the post image linkable to the post. You can do so by using the following code:

{{#if image}}
    <a href="{{url}}" title="{{{title}}}"><img src="{{image}}" alt="{{{title}}}" class="post-image" /></a>
{{else}} 
    ... display something else, like a blank or default image...
{{/if}}

That’s it! Post images should now be displaying in the post or post lists.