Adding image captions to Ghost

For some reason Ghost doesn't support image captions by default. Lots of Jekyll themes and Medium both support image captions out of the box. Not sure what the reasoning is since it's fairly easy to use JavaScript to create the image captions and a modification to the Casper theme is definitely not out of the question.

The open source Chiara theme, has a small JavaScript snippet which will add a caption to all of the images with alt text specified.

![alt text][image]

Copy the following snippet into the Blog Footer form of the Code Injection entry in your Ghost installation:

<script>
    // Creates Captions from Alt tags
    $(".post-content img").each(
        function() {
            // Let's put a caption if there is one
            if ($(this).attr("alt")) {
                $(this).wrap(
                    '<figure class="image"></figure>'
                ).after(
                    '<figcaption>' +
                    $(this).attr(
                        "alt") +
                    '</figcaption>'
                );
            }
        });
</script>

Then you want to add the following CSS snippet to the Blog Header section:

<style>
.post .post-content figcaption {
    font-weight: 400;
    font-style: italic;
    font-size: 16px;
    line-height: 1.3;
    color: #666665;
    outline: 0;
    z-index: 300;
    text-align: center;
}
</style>  

It should look a little something like this:

Now if you save everything, your blog should have freshly cut image captions. Of course this isn't done on the server side so there could be some slight lag in processing but it should be fairly unnoticeable.

Hopefully the Ghost team comes through with actual image captions soon.