Rahul Arora

Show Post thumbnails in a Ghost Theme

Web people are giving good response to the Ghost blogging platform. Availability of hundreds of free and premium ghost themes on the web confirms the start of a new trend in web design.

Web developers and designers have started doing experiment with Ghost to bring out the best products. As we don’t have any Plugin and Theme API for Ghost right now, developers won’t be able to add additional functionality like custom covers for posts or adding featured thumbnails to display in the post index.

Mason Ghost Theme
Mason theme for Ghost shows thumbnails in the post index

In this article, I’m gonna show how I display thumbnails for posts in the post index in my Ghost themes. It’s not very handy way, but is helpful for developers and you can continue with it until they add any API support to the platform.

Since there is no such featured thumbnails feature available, the trick lies in adding an image at the start of the blog post and then fetch it using theme functions.

Showing image from post as Thumbnail

If you’re showing full post in the index, there is no need to show thumbnail with it; it makes no sense to show thumbnails with full post, its not in the design tradition actually (cover images can be the exception, but Ghost is yet to roll them out). Assuming you’re using the image at the very start of every blog post, follow the below steps to show them as thumbs in the index:

  • Navigate to your Ghost theme folder and edit the index.hbs file.
  • Now, if you’re using the {{content}} handlebar to show the content with the words attribute, just edit it to {{content words="0"}}. You may make use of {{content}} again to display post; but better use {{excerpt}} to throw the post summary only.
    Ghost Content Handlebar
    A demonstration of editing index.hbs

    Or in case you’re using the {{excerpt}} handlebar to display the post excerpt, place the {{content words="0"}} above it.

  • Save changes.

Now, take a look at your ghost theme, it must be showing the first image from the post as thumbnail. Hope it has helped, let me know your thoughts, questions and suggestions on this.

About the author

I'm Rahul Arora. I'm a Web developer, with expertise in CSS3, JavaScript, and WordPress. More about me →