Verwenden einer Bildunterschrift in Markdown Jekyll

149

Ich hoste einen Jekyll-Blog auf Github und schreibe meine Beiträge mit Markdown. Wenn ich Bilder hinzufüge, gehe ich folgendermaßen vor:

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

Dies zeigt dann das Bild im Text.

Wie kann ich Markdown jedoch anweisen, eine Beschriftung hinzuzufügen, die unter oder über dem Bild angezeigt wird?

github markdown jekyll Orschiro
quelle

Antworten:

115

Wenn Sie Plugins nicht verwenden wollen (das heißt , Sie es zu GitHub direkt ohne ein Erzeugen der Website zuerst drücken kann), können Sie eine neue Datei erstellen Namen image.htmlin _includes:

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

Und dann zeigen Sie das Bild von Ihrem Markdown mit:

{% include image.html url="/images/my-cat.jpg" description="My cat, Robert Downey Jr." %}
IQAndreas
quelle
1
Das ist eine großartige Idee! Wird site_rootjedoch nicht als gültige Variable akzeptiert. Wenn es gerendert wird, endet es als src="{{ site.url_root }}....
Orschiro
2
Ah, richtig, das ist eine Variable, die in Octopress hinzugefügt wurde . Ich habe es herausgeschnitten, daher verwendet der Beispielcode nur eine relative URL zum Bild.
IQAndreas
3
Jekyll enthält jetzt eine site.urlVariable.
Roy Tinker
20
Ein besserer Aufschlag wäre:<figure class="image"><img src="{{ include.url }}" alt="{{ include.description }}"><figcaption>{{ include.description }}</figcaption></figure>
Edmundo
Ich benötige mehr Informationen. Es ist möglich, mehr als ein Bild einzufügen, ohne das wiederholen zu müssen include image.html. Ich versuche es mit so etwas wie {% for image in page.images %}aber ohne Erfolg. Können Sie mir helfen?
Edmundo
286

Ich weiß, dass dies eine alte Frage ist, aber ich dachte, ich würde immer noch meine Methode zum Hinzufügen von Bildunterschriften teilen. Sie können die Tags captionoder nicht verwenden figcaption, dies wäre jedoch eine einfache Alternative, ohne Plugins zu verwenden.

In Ihrem Markdown können Sie Ihre Beschriftung mit dem Hervorhebungs-Tag umschließen und direkt unter das Bild einfügen, ohne eine neue Zeile wie folgt einzufügen:

![](path_to_image)
*image_caption*

Dies würde den folgenden HTML-Code generieren:

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

Dann können Sie es in Ihrem CSS mit dem folgenden Selektor formatieren, ohne andere emTags auf der Seite zu beeinträchtigen :

img + em { }

Beachten Sie, dass zwischen dem Bild und der Beschriftung keine Leerzeile stehen darf, da dies stattdessen Folgendes erzeugen würde:

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

Sie können auch ein beliebiges anderes Tag als verwenden em. Stellen Sie einfach sicher, dass ein Tag vorhanden ist, da Sie es sonst nicht formatieren können.

Andrew Wei
quelle
3
Genial! Keine Notwendigkeit, sich eine dumme Jekyll-Syntax zu merken :)
Corstian Boerman
2
Ich bin ein großer Fan davon
Alex Williams
Danke dir! War nur auf der Suche danach
Michal Gruca
1
Hallo! Ich bin mir nicht ganz sicher, wo und wie ich den CSS-Teil platzieren soll ... es wäre wirklich großartig, wenn jemand helfen könnte.
ChriiSchee
2
@ChriiSchee Entweder platzieren Sie es in der CSS-Hauptdatei, oder Sie können eine eigene erstellen und mit Ihrem Standardlayout verknüpfen. Zum Beispiel ist mein Standardlayout mit der Datei main.css verknüpft, <link href="{{ site.baseurl }}/assets/css/main.css" rel="stylesheet">sodass ich einfach meine benutzerdefinierte CSS-Definition am Ende dieser Datei hinzufüge: // My custom css img + em { display: block; text-align: center; } //image captions
Jan Zavrel
92

Sie können hierfür eine Tabelle verwenden. Es funktioniert gut.

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

Ergebnis:

Geben Sie hier die Bildbeschreibung ein

Bilal Gultekin
quelle
8
Diese Antwort ist die beste. Verwenden Sie reinen Abschlag und bekommen Sie, was Sie brauchen. Vielen Dank!
Kadam Parikh
Art offtopic, aber das funktioniert auch in Jupyter Notebooks.
Paulochf
Es hat die Breite für mich von 100% reduziert. Wie erweitere ich es?
Abhay Hegde
50

Der richtige HTML-Code für Bilder mit Untertiteln ist <figure>mit<figcaption> .

Hierfür gibt es kein Markdown-Äquivalent. Wenn Sie also nur gelegentlich Untertitel hinzufügen, empfehlen wir Ihnen, diesen HTML-Code einfach in Ihr Markdown-Dokument einzufügen:

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

Die Markdown-Spezifikation empfiehlt Ihnen, HTML in solchen Fällen einzubetten, damit es einwandfrei angezeigt wird. Es ist auch viel einfacher als mit Plugins herumzuspielen.

Wenn Sie versuchen, andere Markdown-y-Funktionen (wie Tabellen, Sternchen usw.) zu verwenden, um Untertitel zu erstellen, hacken Sie nur herum, wie Markdown verwendet werden sollte.

Bryanbraun
quelle
4
Es ist schade, dass diese Antwort keine Beachtung gefunden hat - ich denke wirklich, dass es die einfachste und semantisch korrekteste ist. Ich bin besonders besorgt über all die Antworten, die eine Formatierung mit Tabellen vorschlagen, was nur das Chaos der 90er Jahre verursacht. ;-)
sudo make install
Genau. Es scheint jedoch noch nicht von Bitbucket unterstützt zu werden. Eine Schande.
Boriel
Ich mag die clevere und einfache Antwort von @Andrew, aber ich muss mich für diese entscheiden, die explizit ist, die entsprechenden HTML-Tags verwendet und nicht zu viel Eingabe erfordert.
Seanba
1
Vielen Dank, ich bin neu in Jekyll und wusste nicht, dass Markdown mit HTML verwendet werden kann.
Sambo Kim
6

Ein leichtes Riff in der obersten Antwort , das ich als etwas expliziter empfunden habe, ist, die Jekyll-Syntax zu verwenden, um einer Klasse eine Klasse hinzuzufügen und sie dann so zu gestalten.

Also in der Post hätten Sie:

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

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

Und dann können Sie in Ihrer CSS-Datei Folgendes tun:

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

Kommt gut aus!

Cory
quelle
4

Für diese Frage gibt es zwei semantisch korrekte Lösungen:

  1. Verwenden eines Plugins
  2. Erstellen eines benutzerdefinierten Includes

1. Verwenden eines Plugins

Ich habe ein paar Plugins ausprobiert und mein Favorit istjekyll-figure .

1.1. Installierenjekyll-figure

Eine Möglichkeit zur Installation jekyll-figurebesteht darin gem "jekyll-figure", Ihrem Gemfile in Ihrer Plugins-Gruppe etwas hinzuzufügen .

Führen Sie dann bundle installvon Ihrem Terminalfenster aus.

1.2. Verwendenjekyll-figure

Wickeln Sie einfach Ihren Abschlag in {% figure %}und {% endfigure %}Tags ein.

Ihre Beschriftung wird in das Eröffnungs- {% figure %}Tag eingefügt, und Sie können sie sogar mit Abschriften versehen!

Beispiel:

{% 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. Stylen Sie es

Nachdem Ihre Bilder und Bildunterschriften semantisch korrekt sind, können Sie CSS wie gewünscht anwenden:

  • figure (für Bild und Bildunterschrift)
  • figure img (nur für Bild)
  • figcaption (nur zur Beschriftung)

2. Erstellen eines benutzerdefinierten Includes

Sie müssen eine image.htmlDatei in Ihrem _includesOrdner erstellen und diese mit Liquid in Markdown einfügen .

2.1. Erstellen Sie _includes / image.html

Erstellen Sie das image.htmlDokument in Ihrem Ordner _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. Fügen Sie in Markdown ein Bild mit Liquid ein

Ein Bild /assets/imagesmit einer Bildunterschrift:

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

Ein (externes) Bild mit einer absoluten URL: (ändern src=""zu 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 -->
%}

Ein anklickbares Bild: ( url=""Argument hinzufügen )

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

Ein Bild ohne Bildunterschrift:

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. Stylen Sie es

Nachdem Ihre Bilder und Bildunterschriften semantisch korrekt sind, können Sie CSS wie gewünscht anwenden:

  • figure (für Bild und Bildunterschrift)
  • figure img (nur für Bild)
  • figcaption (nur zur Beschriftung)
Robin Métral
quelle
1
Der Vollständigkeit halber müssen Sie, wenn Sie Jekyll-Figur verwenden möchten, Jekyll-Figur zu Plugins in Ihrer _config.yml hinzufügen
Aleix Sanchis
3

Sie können versuchen, pandocals Konverter zu verwenden. Hier ist ein Jekyll-Plugin , um dies zu implementieren. Pandoc altkann automatisch eine Bildunterschrift hinzufügen, die Ihrem Attribut entspricht.

Sie müssen die kompilierte Site jedoch pushen, da Github aus Sicherheitsgründen keine Plugins auf Github-Seiten zulässt.

Chongxu Ren
quelle
Vielen Dank. Markdown allein kann also keine Untertitel erstellen?
Orschiro
Ich glaube, es hängt vom verwendeten Konverter ab, aber der Markdown-Standard unterstützt das Hinzufügen von Untertiteln nicht.
Chongxu Ren
3

Andrews @ andrew-wei Antwort funktioniert großartig. Sie können auch einige miteinander verketten, je nachdem, was Sie versuchen. Auf diese Weise erhalten Sie beispielsweise ein Bild mit Alt, Titel und Beschriftung mit Zeilenumbruch sowie Fett- und Kursivschrift in verschiedenen Teilen der Beschriftung:

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

Mit folgendem <img>Preisnachlass:

![description](https://img.jpg "description")
***Image:*** *description*
Matthew Bennett
quelle
1 
<p align="center">
  <img alt="img-name" src="/path/image-name.png" width="300">
  <br>
    <em>caption</em>
</p>

Das ist die grundlegende Verwendung von Untertiteln. Es ist nicht erforderlich, ein zusätzliches Plugin zu verwenden.

Hasan Tezcan
quelle
0

Hier ist die einfachste (aber nicht schönste) Lösung: Machen Sie einen Tisch um das Ganze. Es gibt offensichtlich Skalierungsprobleme, und deshalb gebe ich mein Beispiel mit dem HTML, damit Sie die Bildgröße leicht ändern können. Das hat bei mir funktioniert.

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