Making images appear in a ghost post excerpt


Quick tip I found on hostoghost that will be useful for any friends that utilize the nice ghost software that is under heavy development.

To make images appear on your index page in the excerpts you will need to do the below three things.

  1. Make sure that an image is the first item in your post. There must not be any text before it in your article as otherwise it will be excluded from the excerpt.

  2. Insert the below in your theme's index.hbs replacing the post-excerpt section with something similar to the below. The key here is the {{content words="0"}} which forces ghost to utilize the first image as the excerpt. Now that you have your image displayed you put back the {{excerpt}} to include the original 140 article extract that forms the default excerpt.

           <section class="post-excerpt">
               {{content words="0"}}
               <a class="continue-post" href="{{url}}">Continue Reading</a>
  3. Finally add styling to the ghost theme's stylesheet. CSS similar to the following will be needed for the .post-excerpt class. It can be added to the screen.css or any other theme specific stylesheet.

     .post-excerpt img {
         clear: both;
         border: #eee 1px solid;
         border-radius: 6px;
         float: none;
         max-width: 100%;
         margin: 0 auto;
         padding: 3px;

Thanks to Tahmid Tahmid for writing the original piece. Neat trick/easter egg. Good Find.