问题
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