149

Sto ospitando un blog Jekyll su Github e scrivo i miei post con Markdown. Quando aggiungo immagini, lo faccio nel modo seguente:

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

Questo quindi mostra l'immagine nel testo.

Tuttavia, come posso dire a Markdown di aggiungere una didascalia che viene presentata sotto o sopra l'immagine?

github markdown jekyll

— orschiro
fonte

115

Se non vuoi usare nessun plugin (il che significa che puoi inviarlo direttamente a GitHub senza prima generare il sito), puoi creare un nuovo file chiamato image.htmlin _includes:

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

E quindi visualizza l'immagine dal tuo markdown con:

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

— IQAndreas
fonte

1

Questa è una grande idea! Tuttavia, site_rootnon è accettato come variabile valida. Quando eseguito il rendering finisce come src="{{ site.url_root }}....

— Orschiro,

2

Ah, giusto, questa è una variabile aggiunta in Octopress . L'ho modificato, quindi il codice di esempio utilizza solo un URL relativo all'immagine.

— IQAndreas,

3

Jekyll ora include una site.urlvariabile.

— Roy Tinker,

20

Un markup migliore sarebbe:

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

— edmundo,

Ho bisogno di più informazioni ... è possibile inserire più di un'immagine senza la necessità di ripetere include image.html? Sto provando con qualcosa di simile {% for image in page.images %}ma senza successo. Mi potete aiutare?

— edmundo,

287

So che questa è una vecchia domanda, ma ho pensato di condividere ancora il mio metodo per aggiungere didascalie di immagini. Non sarai in grado di usare i tag captiono figcaption, ma questa sarebbe una semplice alternativa senza usare alcun plugin.

Nel tuo markdown, puoi avvolgere la didascalia con il tag di enfasi e metterla direttamente sotto l'immagine senza inserire una nuova riga in questo modo:

![](path_to_image)
*image_caption*

Ciò genererebbe il seguente HTML:

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

Quindi nel tuo CSS puoi modellarlo usando il seguente selettore senza interferire con gli altri em tag nella pagina:

img + em { }

Nota che non devi avere una linea vuota tra l'immagine e la didascalia perché ciò genererebbe invece:

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

Puoi anche usare qualunque tag tu voglia diverso da em. Assicurati solo che ci sia un tag, altrimenti non sarai in grado di modellarlo.

— Andrew Wei
fonte

3

Eccezionale! Non c'è bisogno di memorizzare alcune stupide sintassi jekyll :)

— Corstian Boerman

2

Sono un grande fan di questo

— Alex Williams,

Grazie! Lo

— stavo

1

Ciao! Non sono sicuro di dove e come mettere la parte CSS ... sarebbe davvero bello se qualcuno potesse aiutare.

— ChriiSchee

2

@ChriiSchee O lo metti nel file CSS principale oppure puoi crearne uno tuo e collegarlo al layout predefinito. Ad esempio, il mio layout predefinito si collega al file main.css, <link href="{{ site.baseurl }}/assets/css/main.css" rel="stylesheet">quindi aggiungo la mia definizione CSS personalizzata nella parte inferiore di questo file: // My custom css img + em { display: block; text-align: center; } //image captions

— Jan Zavrel,

95

Puoi usare la tabella per questo. Funziona bene

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

Risultato:

— Bilal Gultekin
fonte

8

Questa risposta è la migliore ... Usare il markdown puro e ottenere ciò di cui hai bisogno. Grazie!

— Kadam Parikh,

Una specie di offtopic, ma funziona anche nei notebook Jupyter.

— paulochf,

Per me ha ridotto la larghezza dal 100%. Come lo allargo?

— Abhay Hegde,

50

L'HTML corretto da utilizzare per le immagini con didascalie è <figure>con<figcaption> .

Non esiste un equivalente Markdown per questo, quindi se aggiungi solo una didascalia occasionale, ti incoraggio ad aggiungere quel codice HTML al tuo documento 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...

Le specifiche Markdown ti incoraggiano a incorporare HTML in casi come questo, quindi verrà visualizzato bene. È anche molto più semplice che scherzare con i plugin.

Se stai cercando di utilizzare altre funzionalità di Markdown-y (come tabelle, asterischi, ecc.) Per produrre didascalie, stai solo cercando di capire come avrebbe dovuto essere usato Markdown.

— bryanbraun
fonte

5

Peccato che questa risposta non abbia attirato alcuna attenzione - penso davvero che sia la più semplice e la più semanticamente corretta. Sono particolarmente angosciato da tutte le risposte che suggeriscono la formattazione usando le tabelle, che scatenano il caos degli anni '90. ;-)

— sudo make installa il

Sono d'accordo. Tuttavia sembra non essere ancora supportato da Bitbucket. Un peccato.

— Boriel,

Mi piace la risposta intelligente e semplice fornita da @Andrew, ma devo andare con questo dato che è esplicito, fa uso dei tag HTML appropriati e non richiede troppa digitazione.

— Seanba,

1

Grazie mille, sono nuovo di Jekyll e non sapevo che il markdown potesse essere usato con HTML.

— Sambo Kim,

6

Un leggero riff nella risposta votata in alto che ho trovato un po 'più esplicito è quello di utilizzare la sintassi jekyll per aggiungere una classe a qualcosa e quindi modellarla in quel modo.

Quindi nel post avresti:

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

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

E poi nel tuo file CSS puoi fare qualcosa del genere:

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

Esce bene!

— Cory
fonte

4

Esistono due soluzioni semanticamente corrette a questa domanda:

Utilizzando un plugin
Creazione di un'inclusione personalizzata

1. Utilizzo di un plug-in

Ho provato un paio di plugin facendo questo e il mio preferito èjekyll-figure .

1.1. Installare`jekyll-figure`

Un modo per installare jekyll-figureè aggiungere gem "jekyll-figure"al tuo Gemfile nel tuo gruppo di plugin.

Quindi corri bundle installdalla finestra del tuo terminale.

1.2. Uso`jekyll-figure`

Basta avvolgere il markdown {% figure %}e i {% endfigure %}tag.

La didascalia va nel {% figure %}tag di apertura e puoi persino modellarla con il markdown!

Esempio:

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

Ora che le tue immagini e didascalie sono semanticamente corrette, puoi applicare i CSS come desideri:

figure (sia per immagine che per didascalia)
figure img (solo per immagine)
figcaption (solo per didascalia)

2. Creazione di un'inclusione personalizzata

Dovrai creare un image.htmlfile nella tua _includescartella e includerlo usando Liquid in Markdown .

2.1. Crea _includes / image.html

Crea il image.htmldocumento nella cartella _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. In Markdown, includi un'immagine usando Liquid

Un'immagine /assets/imagescon una didascalia:

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

Un'immagine (esterna) che utilizza un URL assoluto: (cambia src=""in 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'immagine cliccabile: (aggiungi url=""argomento)

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

Un'immagine senza didascalia:

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

Ora che le tue immagini e didascalie sono semanticamente corrette, puoi applicare i CSS come desideri:

figure (sia per immagine che per didascalia)
figure img (solo per immagine)
figcaption (solo per didascalia)

— Robin Métral
fonte

1

Solo per completezza, se vuoi usare jekyll-figure dovrai aggiungere jekyll-figure ai plugin nel tuo _config.yml

— Aleix Sanchis

3

Puoi provare a utilizzare pandoccome convertitore. Ecco un plugin jekyll per implementarlo. Pandoc sarà in grado di aggiungere automaticamente una didascalia uguale altall'attributo.

Ma devi spingere il sito compilato perché github non consente i plug-in nelle pagine di Github per motivi di sicurezza.

— Chongxu Ren
fonte

Grazie. Quindi il markdown da solo non è in grado di creare didascalie?

— Orschiro,

Credo che dipenda dal convertitore in uso, tuttavia lo standard di markdown non supporta l'aggiunta di didascalie.

— Chongxu Ren,

3

La risposta @ andrew-wei di Andrew funziona alla grande. Puoi anche concatenarne alcuni insieme, a seconda di ciò che stai cercando di fare. Questo, ad esempio, ti dà un'immagine con alt, titolo e didascalia con un'interruzione di riga e grassetto e corsivo in diverse parti della didascalia:

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

Con il seguente <img>markdown:

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

— Matthew Bennett
fonte

1

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

Questo è l'uso di didascalia di base. Non è necessario utilizzare un plug-in aggiuntivo.

— Hasan Tezcan
fonte

0

Ecco la soluzione più semplice (ma non più carina): creare un tavolo attorno a tutto. Ci sono ovviamente problemi di ridimensionamento, ed è per questo che do il mio esempio con l'HTML in modo da poter modificare facilmente le dimensioni dell'immagine. Questo ha funzionato per me.

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

— ndimhypervol
fonte

Utilizzando una didascalia di immagine in Markdown Jekyll