Search code examples
markdownghost-blog

How to add class in image markdown in Ghost?

In Ghost, the markdown for image is

![alt](src)

Is there a hidden format for adding a class in the img tag? Or is this feature not in Ghost yet?

I wanted to have a result like this:

<img src="src" alt="alt" class="img-thumbnail">

I don't want to use the html markup. I really need to achieve this using markdown. Please help..

Solution

  • In plain markdown classes for images are not possible. In some implementations it is possible, e.g. markdown extra uses ![alt](src) {.class}. I tried it, but in Ghost it is not possible, neither ![alt|img-thumbnail](src). Also no hints in the doku.

    But you can use a workaround:

    If you use the src as css-attribute!

    Just add an 'useless' hash to the URL:

    ![alt](src#img-thumbnail)

    Then you can address this in CSS or JavaScript:

    img[src$='#img-thumbnail'] { float:left;}