Simple way to add image styling to Ghost blog

Question

There are some problems with trying to style images in Ghost blogs. Their Markdown implementation is really basic. You can upload with the code ![](), but then to add class or styling you have to convert that to HTML. It's also not the best for teams where someone may not be great at HTML.

Answer 1

Here's what I did:

1. Add an image style to your CSS that you want to be able to apply.

2. Make sure your blog has JQuery installed (it's not included in Ghost anymore - download it and add just as in step 2 if needed)

3. Add a file called styles.js to the js folder of your theme (in assets). Link the file in the theme's default.hbs:

<script type="text/javascript" src="{{asset "js/styles.js"}}"></script>

4. Add $('img[alt~="name of your class"]').addClass("name of your class"); to styles.js. This will apply the style of your choosing to the image.

5. When adding an image in the Markdown editor, include the class name between the brackets. Here's an example of the whole thing, to float an image left:

#styles.css

  img.left {float:left;}

#styles.js

 $('img[alt~="left"]').addClass("left");

In the editor:

![Dog left](http://images.com/dog.jpg)

The main drawback to this method is that the style won't be previewed in the editor. You'll have to load the page to see it, but it seems like the simplest way I could come up with to add optional image styling to a Ghost blog.