Display Post Images on Home Page

This post is going to show you how to take an image from inside of a post and display it on your home page. We are going to be editing the default Casper theme, so you can use that for reference if you would like.

If you are new to creating or editing a theme, check our our theme basics posts for information on how themes work with Ghost

  1. As of Ghost 0.5.2, you can add a post image via the post settings menu. So, go ahead and click on the cog at the bottom of the screen and it will open the menu

    Ghost Display Post Images

  2. Click on the "Add post image" square and upload your image

    Ghost Display Post Images

  3. Now that the image has been uploaded, we need to edit the theme to show the image on the home page. (Some themes may already have this built in, but we will show you how in the Casper theme)

    In most themes, all of the work we would do would be in the index.hbs file because that is where the the specifics for the home page live. But, in Casper, it uses a loop.hbs partials file (located in the partials folder) to put the posts on the home page, so that is the file we will be editing. So, open up the loop.hbs file in a text editor (I use sublime text).

  4. On line 14 of loop.hbs file, you will see:

     <p>{{excerpt words="26"}} <a class="read-more" href="{{url}}">&raquo;</a></p>

    This means it is going to grab the first 26 words from the post, but not images. So, to add the post image, we want to use the {{image}} tag.

    I am going to add the image before the excerpt, so right before the {{excerpt}} line, put this in:

     <img src={{image}} />

    This will grab the post image and place it before the content.

  5. Once you have added this code, restart Ghost and then you will see the images on the front page!

    Ghost Display Post Images

Check out our next post on how to change a post excerpts length!