How to add class in image markdown in Ghost?

纵饮孤独 提交于 2020-01-12 12:01:10

问题


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


回答1:


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)

and adress this in css or js

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




回答2:


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




回答3:


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



回答4:


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



回答5:


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

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


来源:https://stackoverflow.com/questions/22627458/how-to-add-class-in-image-markdown-in-ghost

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!