Utiliser une légende dans Markdown Jekyll
J'héberge un blog Jekyll sur Github et écris mes publications avec Markdown. Lorsque j'ajoute des images, je le fais de la manière suivante:
Cela montre alors l'image dans le texte.
Cependant, comment puis-je dire à Markdown d'ajouter une légende présentée sous ou au-dessus de l'image?
Si vous ne souhaitez utiliser aucun plugin (vous pouvez donc le transférer directement dans GitHub sans générer le site au préalable), vous pouvez créer un nouveau fichier nommé image.html dans _includes:
<figure class="image">
<img src="{{ include.url }}" alt="{{ include.description }}">
<figcaption>{{ include.description }}</figcaption>
</figure>
Et affichez ensuite l'image de votre démarque avec:
{% include image.html url="/images/my-cat.jpg" description="My cat, Robert Downey Jr." %}
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 caption ou figcaption, mais ce serait une alternative simple sans utiliser de plug-in.
Dans votre démarque, vous pouvez envelopper votre légende avec la balise d'emphase et la placer directement sous l'image sans insérer de nouvelle ligne, comme ceci:
*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 l'appeler à l'aide du sélecteur suivant sans interférer avec les autres balises em de la page:
img + em { }
Notez que vous ne devez pas laisser de ligne vierge 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.
Vous pouvez utiliser la table pour cela. Ça fonctionne bien.
|  |
|:--:|
| *Space* |
Résultat:
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 ajoutez uniquement 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, afin qu’elle s’affiche parfaitement. C'est aussi beaucoup plus simple que de jouer avec des plugins.
Si vous essayez d'utiliser d'autres fonctionnalités de Markdown-y (telles que des tableaux, des astérisques, etc.) pour générer des sous-titres, vous vous frayez un tour à la façon dont Markdown devait être utilisé.
Vous pouvez essayer d'utiliser pandoc comme convertisseur. Voici un plugin jekyll pour mettre en œuvre cela. Pandoc pourra ajouter une légende de figure identique à votre attribut alt automatiquement.
Mais vous devez pousser le site compilé car github n'autorise pas les plugins dans les pages de Github pour des raisons de sécurité.
Un léger riff sur la réponse votée par top que j’ai trouvé un peu plus explicite consiste à utiliser la syntaxe jekyll pour ajouter une classe à quelque chose puis à l’appeler ainsi.
Donc, dans le post, vous auriez:
{:.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;
Semble bien!
Il y a deux solutions sémantiquement correctes à cette question:
- Utiliser un plugin
- Création d'un include personnalisé
1. Utiliser un plugin
J'ai essayé plusieurs plugins et mon préféré est jekyll-figure .
1.1. Installez jekyll-figure
Une façon d'installer jekyll-figure consiste à ajouter gem "jekyll-figure" à votre Gemfile dans votre groupe de plugins.
Ensuite, lancez bundle install à partir de la fenêtre de votre terminal.
1.2. Utilisez jekyll-figure
Enroulez simplement votre démarque dans les balises {% figure %} et {% endfigure %}.
Votre légende va dans la balise d'ouverture {% figure %}, et vous pouvez même l'appeler avec markdown!
Exemple:
{% figure caption:"Le logo de **Jekyll** et son clin d'oeil à Robert Louis Stevenson" %}
{% endfigure %}
1.3. Le style
Maintenant que vos images et légendes sont sémantiquement correctes, vous pouvez appliquer le CSS à votre guise:
figure(pour l'image et la légende)figure img(pour image seulement)figcaption(pour la légende seulement)
2. Créer une inclusion personnalisée
Vous devez créer un fichier image.html dans votre dossier _includes et l'inclure à l'aide de Liquid dans Markdown.
2.1. Créer _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, incluez une image avec 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: (remplacez 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 l'argument url="")
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. Le style
Maintenant que vos images et légendes sont sémantiquement correctes, vous pouvez appliquer le CSS à votre guise:
figure(pour l'image et la légende)figure img(pour image seulement)figcaption(pour la légende seulement)
Andrew's @ andrew-wei answer fonctionne très bien. Vous pouvez également en chaîner quelques-uns ensemble, 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 des caractères gras et italiques 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émarquage <img> suivant:
***Image:*** *description*
Voici la solution la plus simple (mais pas la plus jolie): faites un tableau autour de tout. Il y a évidemment des problèmes de mise à l'échelle, et c'est pourquoi je donne mon exemple avec le code HTML afin que vous puissiez modifier facilement la taille de l'image. Cela a fonctionné pour moi.
| <img src="" alt="" style="width: 400px;"/> |
| My Caption |