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?

Si no desea utilizar ningún tipo de plugins (que significa que puede empujar a GitHub directamente sin generar el sitio en primer lugar), puede crear un nuevo archivo con el nombre image.htmlde _includes:

<figure class="image">
  <img src="{{ include.url }}" alt="{{ include.description }}">
  <figcaption>{{ include.description }}</figcaption>
</figure>

Y luego muestre la imagen de su descuento con:

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

Sé que esta es una vieja pregunta, pero pensé que aún compartiría mi método de agregar subtítulos de imágenes. No podrás usar el captionofigcaption etiquetas , pero esta sería una alternativa simple sin usar ningún complemento.

En su descuento, puede envolver su subtítulo con la etiqueta de énfasis y colocarlo 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 su CSS, puede darle estilo usando el siguiente selector sin interferir con otras emetiquetas 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:

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

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:

El HTML correcto para usar con imágenes con subtítulos es <figure>con<figcaption> .

No hay un equivalente de Markdown para esto, por lo que si solo agrega un subtítulo ocasional, le animo a que agregue ese html en su documento de Markdown:

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

La especificación Markdown lo alienta a incrustar HTML en casos como este, por lo que se mostrará muy bien. También es mucho más simple que jugar con complementos.

Si está tratando de usar otras funciones de Markdown-y (como tablas, asteriscos, etc.) para producir subtítulos, simplemente está pirateando cómo se pensó que se usaría Markdown.

Un pequeño riff en la respuesta votada que me pareció un poco más explícito es usar la sintaxis 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!

Hay dos soluciones semánticamente correctas a esta pregunta:

1. Usando un complemento
2. Crear una inclusión personalizada

1. Usando un complemento

He probado un par de complementos para hacer esto y mi favorito esjekyll-figure .

1.1. Instalar en pcjekyll-figure

Una forma de instalar jekyll-figurees agregar gem "jekyll-figure"a su Gemfile en su grupo de complementos.

Luego corre bundle installdesde la ventana de tu terminal.

1.2. Utilizarjekyll-figure

Simplemente envuelva su descuento {% figure %}y {% endfigure %}etiquetas.

Tu subtítulo va en la {% figure %}etiqueta de apertura , ¡e incluso puedes peinarlo con rebajas!

Ejemplo:

{% figure caption:"Le logo de **Jekyll** et son clin d'oeil à Robert Louis Stevenson" %}
    ![Le logo de Jekyll](/assets/images/2018-08-07-jekyll-logo.png)
{% endfigure %}

1.3. Darle estilo

Ahora que sus imágenes y subtítulos son semánticamente correctos, puede aplicar CSS como desee:

• figure (tanto para la imagen como para el pie de foto)
• figure img (solo para imagen)
• figcaption (solo para subtítulos)

2. Crear una inclusión personalizada

Deberá crear un image.htmlarchivo en su _includescarpeta e incluirlo usando Liquid en Markdown .

2.1. Crear _include / image.html

Cree el image.htmldocumento en su carpeta _include:

<!-- _includes/image.html -->
<figure>
    {% if include.url %}
    <a href="{{ include.url }}">
    {% endif %}
    <img
        {% if include.srcabs %}
            src="{{ include.srcabs }}"
        {% else %}
            src="{{ site.baseurl }}/assets/images/{{ include.src }}"
        {% endif %}
    alt="{{ include.alt }}">
    {% if include.url %}
    </a>
    {% endif %}
    {% if include.caption %}
        <figcaption>{{ include.caption }}</figcaption>
    {% endif %}
</figure>

2.2. En Markdown, incluya una imagen usando Liquid

Una imagen /assets/imagescon un título:

This is [Jekyll](https://jekyllrb.com)'s logo :

{% include image.html
    src="jekyll-logo.png" <!-- image filename (placed in /assets/images) -->
    alt="Jekyll's logo" <!-- alt text -->
    caption="This is Jekyll's logo, featuring Dr. Jekyll's serum!" <!-- Caption -->
%}

Una imagen (externa) usando una URL absoluta: (cambiar src=""a srcabs="")

This is [Jekyll](https://jekyllrb.com)'s logo :

{% include image.html
    srcabs="https://jekyllrb.com/img/logo-2x.png" <!-- absolute URL to image file -->
    alt="Jekyll's logo" <!-- alt text -->
    caption="This is Jekyll's logo, featuring Dr. Jekyll's serum!" <!-- Caption -->
%}

Una imagen en la que se puede hacer clic: (agregar url=""argumento)

This is [Jekyll](https://jekyllrb.com)'s logo :

{% include image.html
    src="https://jekyllrb.com/img/logo-2x.png" <!-- absolute URL to image file -->
    url="https://jekyllrb.com" <!-- destination url -->
    alt="Jekyll's logo" <!-- alt text -->
    caption="This is Jekyll's logo, featuring Dr. Jekyll's serum!" <!-- Caption -->
%}

Una imagen sin título:

This is [Jekyll](https://jekyllrb.com)'s logo :

{% include image.html
    src="https://jekyllrb.com/img/logo-2x.png" <!-- absolute URL to image file -->
    alt="Jekyll's logo" <!-- alt text -->
%}

2.3. Darle estilo

Ahora que sus imágenes y subtítulos son semánticamente correctos, puede aplicar CSS como desee:

• figure (tanto para la imagen como para el pie de foto)
• figure img (solo para imagen)
• figcaption (solo para subtítulos)

Puedes intentar usarlo pandoccomo tu convertidor. Aquí hay un complemento jekyll para implementar esto. Pandoc podrá agregar un pie de figura igual que su altatributo automáticamente.

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

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

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 el siguiente <img>descuento:

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

<p align="center">
  <img alt="img-name" src="/path/image-name.png" width="300">
  <br>
    <em>caption</em>
</p>

Ese es el uso básico de los subtítulos. No es necesario usar un complemento adicional.

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 |