En utilisant une légende d'image dans Markdown Jekyll

Question

Je héberge un blog Jekyll sur Github et j'écris mes articles avec Markdown. Lorsque j'ajoute des images, je le fais de la manière suivante :

![nom de l'image](http://lien.com/image.jpg)

Cela affiche alors l'image dans le texte.

Cependant, comment puis-je dire à Markdown d'ajouter une légende qui est présentée en dessous ou au-dessus de l'image ?

Answer 1

Il existe deux solutions sémantiquement correctes à cette question :

1. Utiliser un plugin
2. Créer une inclusion personnalisée

1. Utiliser un plugin

J'ai essayé quelques plugins pour faire cela et mon préféré est jekyll-figure.

1.1. Installer jekyll-figure

Une façon d'installer jekyll-figure est d'ajouter gem "jekyll-figure" à votre Gemfile dans votre groupe de plugins.

Ensuite, exécutez bundle install depuis votre fenêtre de terminal.

1.2. Utiliser jekyll-figure

Il vous suffit d'encadrer votre markdown avec les balises {% figure %} et {% endfigure %}.

Votre légende va dans la balise d'ouverture {% figure %}, et vous pouvez même le styler avec markdown!

Exemple:

{% 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. Styliser

À présent que vos images et légendes sont sémantiquement correctes, vous pouvez y appliquer du CSS comme vous le souhaitez :

• figure (pour l'image et la légende)
• figure img (pour l'image seulement)
• figcaption (pour la légende seulement)

2. Créer une inclusion personnalisée

Vous devrez créer un fichier image.html dans votre dossier _includes, et l'inclure en utilisant Liquid dans Markdown.

2.1. Créer _includes/image.html

Créez le document image.html dans votre dossier _includes :

    {% if include.url %}

    {% endif %}

    {% if include.url %}

    {% endif %}
    {% if include.caption %}
        {{ include.caption }}
    {% endif %}

2.2. Dans Markdown, inclure une image en utilisant Liquid

Une image dans /assets/images avec une légende :

Ceci est le logo [Jekyll](https://jekyllrb.com) :

{% include image.html
    src="jekyll-logo.png" 
    alt="Le logo de Jekyll" 
    caption="Ceci est le logo de Jekyll, présentant le sérum du Dr. Jekyll!" 
%}

Une image (externe) en utilisant une URL absolue : (changez src="" en srcabs="")

Ceci est le logo de [Jekyll](https://jekyllrb.com) :

{% include image.html
    srcabs="https://jekyllrb.com/img/logo-2x.png" 
    alt="Le logo de Jekyll" 
    caption="Ceci est le logo de Jekyll, présentant le sérum du Dr. Jekyll!" 
%}

Une image cliquable : (ajoutez l'argument url="")

Ceci est le logo de [Jekyll](https://jekyllrb.com) :

{% include image.html
    src="https://jekyllrb.com/img/logo-2x.png" 
    url="https://jekyllrb.com" 
    alt="Le logo de Jekyll" 
    caption="Ceci est le logo de Jekyll, présentant le sérum du Dr. Jekyll!" 
%}

Une image sans légende :

Ceci est le logo de [Jekyll](https://jekyllrb.com) :

{% include image.html
    src="https://jekyllrb.com/img/logo-2x.png" 
    alt="Le logo de Jekyll" 
%}

2.3. Styliser

À présent que vos images et légendes sont sémantiquement correctes, vous pouvez y appliquer du CSS comme vous le souhaitez :

• figure (pour l'image et la légende)
• figure img (pour l'image seulement)
• figcaption (pour la légende seulement)

Answer 2

Vous pouvez essayer d'utiliser pandoc comme convertisseur. Voici un plugin jekyll pour implémenter ceci. Pandoc sera capable d'ajouter automatiquement une légende de figure identique à votre attribut alt.

Mais vous devez pousser le site compilé car Github n'autorise pas les plugins dans les pages Github pour des raisons de sécurité.

Answer 3

La réponse de Andrew @andrew-wei fonctionne très bien. Vous pouvez également enchaîner plusieurs, en fonction de ce que vous essayez de faire. Cela vous donne par exemple une image avec alt, title et légende avec un saut de ligne et en gras et italique à différents endroits de la légende :

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

Avec le markdown suivant :

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

Answer 4

    caption

C'est l'utilisation de légende de base. Pas nécessaire d'utiliser un plugin supplémentaire.

Answer 5

Voici la solution la plus simple (mais pas la plus jolie) : entourez le tout d'une table. Il y a évidemment des problèmes d'échelle, et c'est pourquoi je donne mon exemple avec le code HTML pour que vous puissiez facilement modifier la taille de l'image. Cela a fonctionné pour moi.

|  |
| Ma Légende |