Menggunakan keterangan gambar di Markdown Jekyll

149

Saya hosting Blog Jekyll di Github dan menulis posting saya dengan Markdown. Ketika saya menambahkan gambar, saya melakukannya dengan cara berikut:

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

Ini kemudian menunjukkan gambar dalam teks.

Namun, bagaimana saya bisa memberi tahu Markdown untuk menambahkan keterangan yang disajikan di bawah atau di atas gambar?

github markdown jekyll orschiro
sumber

Jawaban:

115

Jika Anda tidak ingin menggunakan plugin (yang berarti dapat Anda mendorongnya untuk GitHub langsung tanpa menghasilkan situs yang pertama), Anda dapat membuat file baru bernama image.htmldi _includes:

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

Dan kemudian tampilkan gambar dari penurunan harga Anda dengan:

{% include image.html url="/images/my-cat.jpg" description="My cat, Robert Downey Jr." %}
IQAndreas
sumber
1
Ide yang bagus! Namun, site_roottidak diterima sebagai variabel yang valid. Ketika diterjemahkan itu berakhir sebagai src="{{ site.url_root }}....
orschiro
2
Ah, benar, itu adalah variabel yang ditambahkan dalam Octopress . Saya mengeditnya, jadi kode sampel hanya menggunakan URL relatif ke gambar.
IQAndreas
3
Jekyll sekarang termasuk site.urlvariabel.
Roy Tinker
20
Markup yang lebih baik adalah:<figure class="image"><img src="{{ include.url }}" alt="{{ include.description }}"><figcaption>{{ include.description }}</figcaption></figure>
edmundo
Saya butuh informasi lebih lanjut ... apakah mungkin untuk meletakkan lebih dari satu gambar tanpa perlu mengulang include image.html? Saya mencoba dengan sesuatu seperti {% for image in page.images %}tetapi tidak berhasil. Bisakah kamu membantuku?
edmundo
287

Saya tahu ini adalah pertanyaan lama tapi saya pikir saya masih akan berbagi metode saya menambahkan keterangan gambar. Anda tidak akan dapat menggunakan captionataufigcaption tag , tetapi ini akan menjadi alternatif sederhana tanpa menggunakan plugin apa pun.

Dalam penurunan harga Anda, Anda dapat membungkus takarir Anda dengan tag penekanan dan meletakkannya langsung di bawah gambar tanpa memasukkan baris baru seperti:

![](path_to_image)
*image_caption*

Ini akan menghasilkan HTML berikut:

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

Kemudian di CSS Anda, Anda bisa menatanya menggunakan pemilih berikut tanpa mengganggu emtag lain pada halaman:

img + em { }

Perhatikan bahwa Anda tidak boleh memiliki garis kosong antara gambar dan teks karena itu akan menghasilkan:

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

Anda juga dapat menggunakan tag apa pun yang Anda inginkan selain em. Pastikan ada tag, jika tidak, Anda tidak akan bisa men-style-nya.

Andrew Wei
sumber
3
Luar biasa! Tidak perlu mengingat beberapa sintaks
jekyll yang
2
Saya penggemar ini
Alex Williams
Terima kasih! Sedang mencari itu
Michal Gruca
1
Hai yang disana! Saya tidak yakin di mana dan bagaimana menempatkan bagian CSS ... akan sangat bagus jika ada yang bisa membantu.
ChriiSchee
2
@ChriiSchee Entah Anda meletakkannya di file CSS utama, atau Anda dapat membuatnya sendiri dan menautkannya ke tata letak default Anda. Sebagai contoh, tata letak default saya menghubungkan ke file main.css <link href="{{ site.baseurl }}/assets/css/main.css" rel="stylesheet">jadi saya hanya menambahkan definisi CSS kustom saya di bagian bawah file ini: // My custom css img + em { display: block; text-align: center; } //image captions
Jan Zavrel
95

Anda dapat menggunakan tabel untuk ini. Ini bekerja dengan baik.

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

Hasil:

masukkan deskripsi gambar di sini

Bilal Gultekin
sumber
8
Jawaban ini adalah yang terbaik .. Menggunakan markdown murni dan mendapatkan apa yang Anda butuhkan. Terima kasih!
Kadam Parikh
Agak offtopic, tetapi ini juga berfungsi di Jupyter Notebooks.
paulochf
Ini mengurangi lebar dari 100% untuk saya. Bagaimana saya melebarkannya?
Abhay Hegde
50

HTML yang benar untuk digunakan untuk gambar dengan teks, adalah <figure>dengan<figcaption> .

Tidak ada Markdown yang setara untuk ini, jadi jika Anda hanya menambahkan teks sekali-sekali, saya sarankan Anda untuk menambahkan html itu ke dalam dokumen penurunan harga Anda:

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

Spesifikasi Markdown mendorong Anda untuk menyematkan HTML dalam kasus-kasus seperti ini, sehingga itu akan ditampilkan dengan baik. Ini juga jauh lebih sederhana daripada mengotak-atik plugin.

Jika Anda mencoba menggunakan fitur Markdown-y lainnya (seperti tabel, tanda bintang, dll) untuk menghasilkan teks, maka Anda hanya mencari-cari bagaimana Markdown dimaksudkan untuk digunakan.

bryanbraun
sumber
5
Sayang sekali jawaban ini tidak mendapat perhatian - saya benar-benar berpikir itu adalah yang paling sederhana dan paling benar secara semantik. Saya sangat tertekan dengan semua jawaban yang menyarankan pemformatan menggunakan tabel, yang hanya menimbulkan kekacauan tahun 1990-an. ;-)
sudo make install
Saya setuju. Namun sepertinya belum didukung oleh Bitbucket. Kucing.
Boriel
Saya suka jawaban yang cerdas dan sederhana yang disediakan oleh @Andrew tapi saya harus menggunakan yang ini secara eksplisit, menggunakan tag HTML yang sesuai, dan tidak perlu mengetik terlalu banyak.
Seanba
1
Terima kasih banyak, saya baru mengenal jekyll dan tidak tahu penurunan harga dapat digunakan dengan html.
Sambo Kim
6

Riff kecil di bagian atas memberikan suara yang saya temukan menjadi sedikit lebih eksplisit adalah dengan menggunakan sintaks jekyll untuk menambahkan kelas ke sesuatu dan kemudian gaya itu seperti itu.

Jadi di pos Anda akan memiliki:

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

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

Dan kemudian di file CSS Anda, Anda dapat melakukan sesuatu seperti ini:

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

Keluar terlihat bagus!

Cory
sumber
4

Ada dua solusi semantik yang benar untuk pertanyaan ini:

  1. Menggunakan plugin
  2. Membuat custom termasuk

1. Menggunakan plugin

Saya sudah mencoba beberapa plugin melakukan ini dan favorit saya adalahjekyll-figure .

1.1. Installjekyll-figure

Salah satu cara untuk menginstal jekyll-figureadalah menambahkan gem "jekyll-figure"Gemfile Anda di grup plugin Anda.

Kemudian jalankan bundle installdari jendela terminal Anda.

1.2. Menggunakanjekyll-figure

Cukup bungkus penurunan harga {% figure %}dan {% endfigure %}tag Anda.

Keterangan Anda ada di {% figure %}tag pembuka , dan Anda bahkan dapat menatanya dengan penurunan harga!

Contoh:

{% 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. Gaya itu

Sekarang gambar dan teks Anda secara semantik benar, Anda dapat menerapkan CSS sesuai keinginan:

  • figure (untuk gambar dan teks)
  • figure img (hanya untuk gambar)
  • figcaption (hanya untuk keterangan)

2. Membuat custom termasuk

Anda harus membuat image.htmlfile di _includesfolder Anda , dan memasukkannya menggunakan Liquid in Markdown .

2.1. Buat _includes / image.html

Buat image.htmldokumen di folder _includes Anda:

<!-- _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. Dalam penurunan harga, sertakan gambar menggunakan Liquid

Gambar /assets/imagesdengan keterangan:

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

Gambar (eksternal) menggunakan URL absolut: (ubah src=""ke 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 -->
%}

Gambar yang dapat diklik: (tambahkan url=""argumen)

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

Gambar tanpa teks:

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

Sekarang gambar dan teks Anda secara semantik benar, Anda dapat menerapkan CSS sesuai keinginan:

  • figure (untuk gambar dan teks)
  • figure img (hanya untuk gambar)
  • figcaption (hanya untuk keterangan)
Robin Métral
sumber
1
Hanya untuk kelengkapan, jika Anda ingin menggunakan jekyll-figure Anda harus menambahkan jekyll-figur ke plugin di _config.yml Anda
Aleix Sanchis
3

Anda dapat mencoba menggunakan pandocsebagai konverter Anda. Berikut adalah plugin jekyll untuk mengimplementasikan ini. Pandoc akan dapat menambahkan keterangan gambar yang sama dengan altatribut Anda secara otomatis.

Tetapi Anda harus mendorong situs yang dikompilasi karena github tidak mengizinkan pengaya di halaman Github untuk keamanan.

Chongxu Ren
sumber
Terima kasih. Jadi penurunan harga saja tidak mampu membuat teks?
orschiro
Saya percaya ini tergantung pada konverter yang Anda gunakan, namun, standar penurunan harga tidak mendukung penambahan teks.
Chongxu Ren
3

Jawaban Andrew andrew-wei sangat bagus. Anda juga dapat membuat beberapa rantai bersama, tergantung pada apa yang Anda coba lakukan. Ini, misalnya, memberi Anda gambar dengan alt, judul, dan teks dengan jeda baris dan huruf tebal dan huruf miring di berbagai bagian teks:

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

Dengan <img>penurunan harga berikut :

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

Itulah penggunaan teks dasar. Tidak perlu menggunakan plugin tambahan.

Hasan Tezcan
sumber
0

Inilah solusi paling sederhana (tapi tidak tercantik): buatlah tabel di sekitar semuanya. Jelas ada masalah penskalaan, dan inilah mengapa saya memberikan contoh saya dengan HTML sehingga Anda dapat memodifikasi ukuran gambar dengan mudah. Ini berhasil untuk saya.

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