How to add class in image markdown in Ghost?

Question

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..

score 68 · Accepted Answer · edited Mar 10 '21 at 18:52

68

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;}

edited Mar 10 '21 at 18:52

TheBlackBenzKid

26,324
41
139
209

answered Mar 27 '14 at 09:43

klml

1,718
16
22

This awesome! However it does not seem to work with `pandoc` used with option `--self-contained`, that is when image gets embedded as a base64. – Michał Mar 14 '17 at 19:39
@Michał the useless hash works for me also with base64 https://jsfiddle.net/g6w2o91k/ , can you give me the code of your base64 image. – klml Mar 15 '17 at 19:54
2

this is not even a hack, but a very elegant method. Wouldn´t have find out on my own, thanks ! – Flex Elektro Deimling Jan 21 '18 at 22:45
1

Anyone looking to do this in Kramdown (Jekyll) will need to knock out the space between the src and class: `![alt](src){.class}` – James Hibbard Sep 05 '18 at 08:34
FYI, this won't work in github's markdown. See https://stackoverflow.com/questions/40261461/mix-github-markdown-language-with-css – doub1ejack Dec 02 '18 at 15:36
THIS IS SOME KING ###! I was looking for a solution for this unsing vuepress.. but the plugins doesn't seems to work very well – Mariano L Jan 27 '23 at 21:33

Sonic Soul · Answer 2 · 2016-06-14T00:55:35.137

3

this is perhaps too obvious but you can put it in any element you wish i.e.

 <div class="myDiv">
    ![](...)
 </div>

and then use css inheritance

.myDiv img { width: 50px; }

since markup in ghost supports html (probably most do) you can also do regular <img...> tags as well

edited Jun 14 '16 at 00:55

answered Jun 13 '16 at 23:37

Sonic Soul

23,855
37
130
196

Rogerio Orioli · Answer 3 · 2018-02-12T02:59:39.560

0

in ghost the file post.hbs rendering de {{content}} whit class .kg-card-markdown you can create this function for js add class in all image in post content

function imageResponsive() {
  $('.kg-card-markdown').each(function(){
    $('img').addClass('img-responsive');     
  });
}

edited Feb 12 '18 at 02:59

answered Feb 11 '18 at 20:45

Rogerio Orioli

121
1
2

Rogerio Orioli · Answer 4 · 2018-02-12T13:45:41.523

0

in ghost the file post.hbs rendering de {{content}} whit class .kg-card-markdown u can use css to whit sass

.kg-card-markdown { 
  img{
    @extend .img-responsive;
  } 
}

edited Feb 12 '18 at 13:45

answered Feb 12 '18 at 00:51

Rogerio Orioli

121
1
2

While this code-only post might answer the question, please add an explanation of why it does so. This will help readers evaluate the answer for their situation. – Tom Brunberg Feb 12 '18 at 05:30

score -6 · Answer 5 · answered May 06 '15 at 22:21

-6

You can add them through jQuery with the following code before the body end tag on the default.hbs file

$('img').addClass('img-thumbnails');

answered May 06 '15 at 22:21

philberndt

1,118
2
11
15

How to add class in image markdown in Ghost?

5 Answers5

Linked