149

J'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:

![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?

github markdown jekyll

— Orschiro
source

115

Si vous ne souhaitez pas utiliser de plugins (ce qui signifie que vous pouvez le pousser directement vers GitHub sans générer le site au préalable), vous pouvez créer un nouveau fichier nommé image.htmldans _includes:

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

Et puis affichez l'image de votre démarque avec:

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

— IQAndreas
source

1

C'est une bonne idée! Cependant, site_rootn'est pas acceptée comme variable valide. Une fois rendu, il se termine par src="{{ site.url_root }}....

— orschiro

2

Ah, c'est vrai, c'est une variable ajoutée dans Octopress . Je l'ai modifié, donc l'exemple de code utilise simplement une URL relative vers l'image.

— IQAndreas

3

Jekyll inclut désormais une site.urlvariable.

— Roy Tinker

20

Un meilleur balisage serait:

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

— edmundo

J'ai besoin de plus d'informations… il est possible de mettre plus d'une image sans avoir besoin de répéter le include image.html? J'essaye avec quelque chose comme {% for image in page.images %}mais sans succès. Pouvez-vous m'aider?

— edmundo

287

Je sais que c'est une vieille question, mais j'ai pensé que je partagerais toujours ma méthode d'ajout de légendes d'image. Vous ne pourrez pas utiliser les balises captionou figcaption, mais ce serait une alternative simple sans utiliser de plugins.

Dans votre démarque, vous pouvez envelopper votre légende avec la balise de mise en évidence 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 à l'aide du sélecteur suivant sans interférer avec les autres embalises de 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 de votre choix autre que em. Assurez-vous simplement qu'il y a une balise, sinon vous ne pourrez pas la styliser.

— Andrew Wei
source

3

Impressionnant! Pas besoin de mémoriser une stupide syntaxe jekyll :)

— Corstian Boerman

2

Je suis un grand fan de ça

— Alex Williams

Je vous remercie! Je cherchais juste ça

— Michal Gruca

1

Salut! Je ne sais pas trop où et comment mettre la partie CSS ... ce serait vraiment génial si quelqu'un pouvait aider.

— ChriiSchee

2

@ChriiSchee Soit vous le placez dans le fichier CSS principal, soit vous pouvez créer le vôtre et le lier à votre mise en page par défaut. Par exemple, ma mise en page par défaut est liée au fichier main.css <link href="{{ site.baseurl }}/assets/css/main.css" rel="stylesheet">, je viens donc d'ajouter ma définition CSS personnalisée au bas de ce fichier: // My custom css img + em { display: block; text-align: center; } //image captions

— Jan Zavrel

95

Vous pouvez utiliser la table pour cela. Ça fonctionne bien.

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

Résultat:

— Bilal Gultekin
source

8

Cette réponse est la meilleure. Utiliser le démarquage pur et obtenir ce dont vous avez besoin. Merci!

— Kadam Parikh le

Sorte de hors-sujet, mais cela fonctionne également dans Jupyter Notebooks.

— paulochf le

Cela a réduit la largeur de 100% pour moi. Comment l'élargir?

— Abhay Hegde le

50

Le code HTML correct à utiliser pour les images avec des légendes est <figure>avec<figcaption> .

Il n'y a pas d'équivalent Markdown pour cela, donc si vous n'ajoutez qu'une légende occasionnelle, je vous encourage à simplement ajouter ce code 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...

La spécification Markdown vous encourage à incorporer du HTML dans des cas comme celui-ci, donc il s'affichera très bien. C'est aussi beaucoup plus simple que de jouer avec des plugins.

Si vous essayez d'utiliser d'autres fonctionnalités de Markdown-y (comme des tableaux, des astérisques, etc.) pour produire des légendes, vous ne faites que pirater la façon dont Markdown était censé être utilisé.

— bryanbraun
source

5

C'est dommage que cette réponse n'ait pas retenu l'attention - je pense vraiment que c'est la plus simple et la plus sémantiquement correcte. Je suis particulièrement affligé par toutes les réponses suggérant le formatage à l'aide de tableaux, ce qui ne fait que semer le chaos des années 1990. ;-)

— sudo make install

Je suis d'accord. Cependant, il ne semble pas encore être pris en charge par Bitbucket. Un peu dommage.

— Boriel

J'aime la réponse intelligente et simple fournie par @Andrew mais je dois aller avec celle-ci étant donné qu'elle est explicite, utilise les balises HTML appropriées et ne nécessite pas trop de frappe.

— Seanba du

1

Merci beaucoup, je suis nouveau sur jekyll et je ne savais pas que le démarque peut être utilisé avec html.

— Sambo Kim le

6

Un léger riff sur la réponse votée en haut que j'ai trouvé un peu plus explicite est d'utiliser la syntaxe jekyll pour ajouter une classe à quelque chose, puis le styliser 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!

— Cory
source

4

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

Utiliser un plugin
Créer une inclusion personnalisée

1. Utilisation d'un plugin

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

1.1. Installer`jekyll-figure`

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

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

1.2. Utilisation`jekyll-figure`

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

Votre légende va dans la {% figure %}balise d' ouverture , et vous pouvez même la styliser 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. Donnez du style

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

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

2. Création d'une inclusion personnalisée

Vous devrez créer un image.htmlfichier dans votre _includesdossier et l' inclure à l'aide de Liquid dans Markdown .

2.1. Créer _includes / image.html

Créez le image.htmldocument 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, incluez une image à l'aide de Liquid

Une image /assets/imagesavec 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: (remplacer src=""par 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 -->
%}

Une image cliquable: (ajouter un 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. Donnez du style

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

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

— Robin Métral
source

1

Juste pour être complet, si vous voulez utiliser jekyll-figure, vous devrez ajouter jekyll-figure aux plugins dans votre _config.yml

— Aleix Sanchis

3

Vous pouvez essayer de l'utiliser pandoccomme convertisseur. Voici un plugin jekyll pour implémenter cela. Pandoc pourra ajouter altautomatiquement une légende de figure identique à votre attribut.

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

— Chongxu Ren
source

Merci. Le démarquage seul n'est donc pas capable de créer des légendes?

— orschiro

Je pense que cela dépend du convertisseur que vous utilisez, cependant, la norme de démarquage ne prend pas en charge l'ajout de légendes.

— Chongxu Ren du

3

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

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

— Matthew Bennett
source

1

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

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

— Hasan Tezcan
source

0

Voici la solution la plus simple (mais pas la plus jolie): faire 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 facilement modifier la taille de l'image. Cela a fonctionné pour moi.

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

— ndimhypervol
source

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