guide - markdown standard syntax

¿Cómo agregar clase en markdown de imagen en Ghost?

Question

En Ghost, la rebaja de la imagen es

![alt](src)

¿Hay un formato oculto para agregar una clase en la etiqueta img ? ¿O es que esta característica aún no está en Ghost?

Quería tener un resultado como este:

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

No quiero usar el marcado html. Realmente necesito lograr esto utilizando markdown. Por favor ayuda..

Answer 1

En las clases de markdown sin formato para las imágenes no son posibles. En algunas implementaciones es posible, por ejemplo, usos adicionales de reducción de marca ![alt](src) {.class} . Lo intenté, pero en Ghost no es posible, tampoco ![alt|img-thumbnail](src) . Tampoco hay pistas en el doku .

Pero puede usar una solución alternativa si usa el src como atributo-css.

Solo agrega un hash ''inútil'' a la url:

![alt](src#img-thumbnail)

y direccione esto en css o js

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

Answer 2

Esto es quizás demasiado obvio, pero puede ponerlo en cualquier elemento que desee, es decir,

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

y luego usar la herencia css

.myDiv img { width: 50px; }

ya que el marcado en ghost admite html (probablemente la mayoría) también puede hacer etiquetas <img ...> regulares también

Answer 3

Puede agregarlos a través de jQuery con el siguiente código antes de la etiqueta de final del cuerpo en el archivo default.hbs

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

Answer 4

en fantasma, el archivo post.hbs que representa de {{contenido}} con clase .kg-card-markdown u puede usar css para ver si

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

Answer 5

en fantasma, el archivo post.hbs que representa {{contenido}} con clase .kg-card-markdown puede crear esta función para js agregar clase en todas las imágenes en el contenido de la publicación

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