Utilisation d'une légende d'image dans Markdown Jekyll

J'héberge un Blog Jekyll sur Github et écris mes messages avec Markdown. Quand j'ajoute des images, je le fais de la manière suivante:

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

Cela montre alors l'image dans le texte.

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

75
demandé sur tanguy_k 2013-10-12 10:42:58

9 réponses

Si vous ne voulez pas utiliser de plugins (ce qui signifie que vous pouvez le pousser directement sur GitHub sans générer le site en premier), vous pouvez créer un nouveau fichier nommé image.html dans _includes: 

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

(et évidemment, je ne suis pas un designer. Vous devriez probablement utiliser CSS au lieu d'une table pour aligner correctement votre image)

Puis affichez l'image de votre démarque avec: 

{% include image.html url="/images/my-cat.jpg" description="My cat, Robert Downey Jr." %}
56
répondu IQAndreas 2013-10-15 01:30:01

Je sais que c'est une vieille question, mais je pensais que je voudrais partager ma méthode d'ajout de légendes d'images. Vous ne pourrez pas utiliser les balises caption ou figcaption, mais ce serait une alternative simple sans utiliser de plugins.

Dans votre markdown, vous pouvez envelopper votre légende avec la balise emphasis et la placer directement sous l'image sans insérer une nouvelle ligne comme ceci: 

![](path_to_image)
*image_caption*

Cela générerait le code HTML suivant: 

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

Ensuite, dans votre CSS, vous pouvez le styliser en utilisant le sélecteur suivant sans interférer avec les autres balises em sur la page: 

img + em { }

Notez que vous ne devez pas avoir de ligne vide entre l'image et la légende car cela générerait à la place: 

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

Vous pouvez également utiliser la balise que vous voulez autre que em. Assurez-vous simplement qu'il y a une balise, sinon vous ne pourrez pas la styliser.

182
répondu Andrew Wei 2015-05-21 06:55:52

Vous pouvez utiliser table pour cela. Il fonctionne très bien.

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

Résultat:

entrez la description de l'image ici

21
répondu Bilal Gultekin 2017-07-19 12:52:23

Si vous ajoutez seulement la légende occasionnelle et que vous voulez utiliser le plus sémantique <figure> et <figcaption> pensez simplement à ajouter ce html dans votre document 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...

C'est beaucoup plus simple que de jouer avec des plugins et Markdown encourage l'intégration de HTML, donc il s'affichera très bien.

18
répondu bryanbraun 2017-07-20 15:42:51

Vous pouvez essayer d'utiliser pandoc comme votre convertisseur. Voici un plugin Jekyll pour implémenter ceci. Pandoc pourra 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 plus de sécurité.

4
répondu Chongxu Ren 2017-01-08 20:00:56

Un léger riff sur la réponse top voted {[4] } que j'ai trouvé un peu plus explicite est d'utiliser la syntaxe jekyll pour ajouter une classe à quelque chose et ensuite le style de cette façon.

Donc, dans le post, vous auriez: 

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

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

Et puis dans votre fichier CSS, vous pouvez faire quelque chose comme ceci:

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

Sort bien!

2
répondu Cory 2017-05-23 11:33:25

La réponse de Andrew @andrew-wei fonctionne très bien. Vous pouvez également enchaîner quelques-uns ensemble, en fonction de ce que vous essayez de faire. Ceci, par exemple, vous obtient une image avec alt, titre et légende avec un saut de ligne et en gras et en italique dans différentes parties 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 démarque <img> suivant: 

![description](https://img.jpg "description")
***Image:*** *description*
2
répondu Matthew Bennett 2018-01-07 12:21:43

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

| <img src="" alt="" style="width: 400px;"/> |
| My Caption |
0
répondu ndimhypervol 2016-12-09 09:16:48

Il y a deux solutions sémantiquement correctes à cette question:

  1. utilisation d'un plugin
  2. création d'une inclusion personnalisée

1. Utilisation d'un plugin

J'ai essayé quelques plugins en faisant 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 vos plugins groupe.

Ensuite, exécutez bundle install à partir de la fenêtre de votre terminal.

1.2. Utiliser jekyll-figure

Enveloppez simplement votre démarque dans les balises {% figure %} et {% endfigure %}.

Vous légende va dans l'ouverture {% figure %} tag, et vous pouvez même le style 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. Style il

Maintenant que vos images et légendes sont sémantiquement correctes, vous pouvez appliquer CSS comme vous le souhaitez:

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

2. Creating une coutume comprend

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

2.1. Créer des _includes / image.html

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

<!-- _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. Dans Markdown, inclure une image en utilisant Liquid

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

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

Une image (externe) utilisant une URL absolue: (change src="" to 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 -->
%}

Un image cliquable: (ajouter url="" argument) 

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

Une image sans légende:

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

Maintenant que vos images et légendes sont sémantiquement correctes, vous pouvez appliquer CSS comme vous le souhaitez:

  • figure (pour l'image et la légende)
  • figure img (pour l'image seulement)
  • figcaption (pour légende seulement)
0
répondu Robin Métral 2018-08-17 05:01:05