Pregunta Usar una leyenda de imagen en Markdown Jekyll


Estoy alojando un blog de Jekyll en Github y escribo mis publicaciones con Markdown. Cuando agrego imágenes, lo hago de la siguiente manera:

![name of the image](http://link.com/image.jpg)

Esto luego muestra la imagen en el texto.

Sin embargo, ¿cómo puedo decirle a Markdown que agregue un título que se presenta debajo o encima de la imagen?


73
2017-10-12 06:42


origen


Respuestas:


Si no desea usar ningún complemento (lo que significa que puede enviarlo directamente a GitHub sin generar primero el sitio), puede crear un nuevo archivo llamado image.html en _includes:

<table class="image">
<caption align="bottom">{{ include.description }}</caption>
<tr><td><img src="{{ include.url }}" alt="{{ include.description }}"/></td></tr>
</table>

(y obviamente no soy diseñador. Probablemente deberías usar CSS en lugar de una tabla para que tu imagen se alinee correctamente)

Y luego muestra la imagen de tu reducción con:

{% include image.html url="/images/my-cat.jpg" description="My cat, Robert Downey Jr." %}

56
2017-10-14 12:30



Sé que esta es una pregunta antigua, pero pensé que seguiría compartiendo mi método de agregar títulos de imagen. No podrás usar el caption o figcaption etiquetas, pero esta sería una alternativa simple sin usar ningún complemento.

En su rebaja, puede ajustar su leyenda con la etiqueta de énfasis y colocarla directamente debajo de la imagen sin insertar una nueva línea como esta:

![](path_to_image)
*image_caption*

Esto generaría el siguiente HTML:

<p>
    <img src="path_to_image" alt>
    <em>image_caption</em>
</p>

Luego, en tu CSS puedes diseñarlo usando el siguiente selector sin interferir con otros em etiquetas en la página:

img + em { }

Tenga en cuenta que no debe tener una línea en blanco entre la imagen y el título porque eso generaría en su lugar:

<p>
    <img src="path_to_image" alt>
</p>
<p>
    <em>image_caption</em>
</p>

También puede usar cualquier etiqueta que desee que no sea em. Solo asegúrate de que haya una etiqueta, de lo contrario no podrás diseñarla.


174
2018-05-21 06:45



Puedes usar la tabla para esto. Funciona bien.

| ![space-1.jpg](http://www.storywarren.com/wp-content/uploads/2016/09/space-1.jpg) | 
|:--:| 
| *Space* |

Resultado:

enter image description here


21
2017-07-19 12:52



Si solo está agregando el título ocasional y desea usar el más semántico  <figure> y <figcaption> considere solo agregar ese html en su documento de descuento:

Lorem ipsum dolor sit amet, consectetur adipiscing elit...

<figure>
  <img src="{{site.url}}/assets/image.jpg" alt="my alt text"/>
  <figcaption>This is my caption text.</figcaption>
</figure>

Vestibulum eu vulputate magna...

Es mucho más simple que jugar con complementos y Markdown fomenta la incorporación de HTML, por lo que se mostrará bien.


15
2017-07-06 14:32



Puedes intentar usar pandoc como tu convertidor Aquí hay un plugin de jekyll para implementar esto Pandoc podrá agregar una leyenda de figura del mismo modo que su alt atributo de forma automática.

Pero debe empujar el sitio compilado porque github no permite complementos en las páginas de Github para mayor seguridad.


4
2017-10-13 08:32



Un ligero riff en el la respuesta más votado que me pareció un poco más explícito es usar la sintaxis de jekyll para agregar una clase a algo y luego darle un estilo de esa manera.

Entonces en la publicación tendrías:

![My image](/images/my-image.png)

{:.image-caption}
*The caption for my image*

Y luego en su archivo CSS puede hacer algo como esto:

.image-caption {
  text-align: center;
  font-size: .8rem;
  color: light-grey;

Sale luciendo bien!


2
2018-03-27 11:50



La respuesta de Andrew @ andrew-wei funciona muy bien. También puede encadenar unos pocos, dependiendo de lo que esté tratando de hacer. Esto, por ejemplo, le proporciona una imagen con alt, título y título con un salto de línea y negrita y cursiva en diferentes partes de la leyenda:

img + br + strong {margin-top: 5px; margin-bottom: 7px; font-style:italic; font-size: 12px; }
img + br + strong + em {margin-top: 5px; margin-bottom: 7px; font-size: 12px; font-style:italic;}

Con lo siguiente <img> reducción:

![description](https://img.jpg "description")
***Image:*** *description*

2
2018-01-07 12:21



Aquí está la solución más simple (pero no la más bonita): haga una tabla alrededor de todo. Obviamente, hay problemas de escala, y es por eso que doy mi ejemplo con el HTML para que pueda modificar el tamaño de la imagen fácilmente. Esto funcionó para mí.

| <img src="" alt="" style="width: 400px;"/> |
| My Caption |

0
2017-12-09 09:16