Использование подписи к изображению в Markdown Jekyll


149

Я веду блог Jekyll на Github и пишу свои сообщения с Markdown. Когда я добавляю изображения, я делаю это следующим образом:

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

Это тогда показывает изображение в тексте.

Однако, как я могу сказать Markdown добавить заголовок, который представлен ниже или выше изображения?

Ответы:


115

Если вы не хотите использовать какие-либо плагины (что означает, что вы можете отправить их на GitHub напрямую, не создавая сайт в первую очередь), вы можете создать новый файл с именем image.htmlв _includes:

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

А затем отобразите изображение из вашей уценки с помощью:

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

1
Это отличная идея! Тем site_rootне менее, не принимается в качестве допустимой переменной. Когда оказано это заканчивается как src="{{ site.url_root }}....
Орширо

2
Ах, да, это переменная, добавленная в Octopress . Я отредактировал его, поэтому пример кода просто использует относительный URL-адрес изображения.
IQAndreas

3
Джекилл теперь включает site.urlпеременную.
Рой Тинкер

20
Лучшая разметка будет:<figure class="image"><img src="{{ include.url }}" alt="{{ include.description }}"><figcaption>{{ include.description }}</figcaption></figure>
Эдмундо

Мне нужно больше информации ... можно поставить более одного изображения без необходимости повторять include image.html? Я пытаюсь с чем-то вроде, {% for image in page.images %}но безуспешно. Вы можете помочь мне?
Эдмундо

287

Я знаю, что это старый вопрос, но я решил поделиться своим методом добавления подписей к изображениям. Вы не сможете использовать теги captionor figcaption, но это будет простая альтернатива без использования каких-либо плагинов.

В вашей уценке вы можете обернуть заголовок тегом выделения и поместить его непосредственно под изображением, не вставляя новую строку, например, так:

![](path_to_image)
*image_caption*

Это сгенерирует следующий HTML:

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

Затем в вашем CSS вы можете стилизовать его, используя следующий селектор, не мешая другим emтегам на странице:

img + em { }

Обратите внимание, что у вас не должно быть пустой строки между изображением и заголовком, потому что вместо этого будет генерироваться:

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

Вы также можете использовать любой тег, который вы хотите, кроме em. Просто убедитесь, что есть тег, иначе вы не сможете его стилизовать.


3
Потрясающие! Не нужно запоминать какой-то дурацкий синтаксис джекила :)
Корстиан Берман

2
Я большой поклонник этого
Алекс Уильямс

Спасибо! Просто искал это
Михал Грука

1
Всем привет! Я не совсем уверен, где и как разместить часть CSS ... было бы здорово, если бы кто-нибудь мог помочь.
ChriiSchee

2
@ChriiSchee Либо вы помещаете его в основной файл CSS, либо можете создать свой собственный и связать его с макетом по умолчанию. Например, мой макет по умолчанию ссылается на файл main.css, <link href="{{ site.baseurl }}/assets/css/main.css" rel="stylesheet">поэтому я просто добавляю свое пользовательское определение CSS внизу этого файла: // My custom css img + em { display: block; text-align: center; } //image captions
Ян Заврел

95

Вы можете использовать таблицу для этого. Работает нормально.

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

Результат:

введите описание изображения здесь


8
Этот ответ - лучший. Используйте чистую уценку и получайте то, что вам нужно. Спасибо!
Кадам Парих

Вроде оффтоп, но это тоже работает в Jupyter Notebooks.
Паулочф

Это уменьшило ширину от 100% для меня. Как мне это расширить?
Абхай Хегде

50

Правильный HTML-код для изображений с подписями - <figure>с<figcaption> .

Для этого нет эквивалента уценки, поэтому, если вы добавляете только случайный заголовок, я рекомендую вам просто добавить этот HTML-код в документ уценки:

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

Спецификация Markdown рекомендует вам встраивать HTML в таких случаях, поэтому он будет отображаться очень хорошо. Это также намного проще, чем возиться с плагинами.

Если вы пытаетесь использовать другие функции Markdown-y (например, таблицы, звездочки и т. Д.) Для создания подписей, то вы просто разбираетесь в том, как Markdown предназначался для использования.


5
Жаль, что этот ответ не привлек к себе никакого внимания - я действительно думаю, что он самый простой и наиболее семантически правильный. Я особенно расстроен всеми ответами, предлагающими форматирование с использованием таблиц, что просто приводит к хаосу 1990-х годов. ;-)
sudo make install

Я согласен. Однако он пока не поддерживается Bitbucket. Жаль.
Бориэль

Мне нравится умный и простой ответ, предоставленный @Andrew, но я должен согласиться с тем, что он является явным, использует соответствующие теги HTML и не требует слишком большого набора текста.
Шеанба

1
Большое спасибо, я новичок в jekyll и не знал, что уценку можно использовать с html.
Самбо Ким

6

Небольшой риф на ответе с верхним голосом, который я нашел немного более явным, состоит в том, чтобы использовать синтаксис jekyll для добавления класса к чему-то и затем стилизовать его таким образом.

Так что в посте вы бы имели:

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

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

И тогда в вашем файле CSS вы можете сделать что-то вроде этого:

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

Выглядит хорошо!


4

Есть два семантически правильных решения этого вопроса:

  1. Используя плагин
  2. Создание пользовательского включения

1. Использование плагина

Я попробовал пару плагинов, делающих это, и мой любимый этоjekyll-figure .

1.1. устанавливатьjekyll-figure

Один из способов установки jekyll-figure- добавить gem "jekyll-figure"ваш Gemfile в группу плагинов.

Затем бегите bundle installиз окна вашего терминала.

1.2. использованиеjekyll-figure

Просто оберните ваши уценки {% figure %}и {% endfigure %}теги.

{% figure %}Ваша подпись помещается в открывающий тег, и вы даже можете оформить его с помощью markdown!

Пример:

{% 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. Стиль это

Теперь, когда ваши изображения и подписи семантически верны, вы можете применять CSS так, как вы хотите:

  • figure (для изображения и подписи)
  • figure img (только для изображения)
  • figcaption (только для подписи)

2. Создание пользовательского включения

Вам нужно будет создать image.htmlфайл в вашей _includesпапке и включить его, используя Liquid в Markdown .

2.1. Создать _includes / image.html

Создайте image.htmlдокумент в папке _include:

<!-- _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. В Markdown добавьте изображение с помощью Liquid

Изображение /assets/imagesс подписью:

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

(Внешнее) изображение с использованием абсолютного URL: (изменить src=""на 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 -->
%}

Кликабельное изображение: (добавить 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 -->
%}

Изображение без подписи:

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. Стиль это

Теперь, когда ваши изображения и подписи семантически верны, вы можете применять CSS так, как вы хотите:

  • figure (для изображения и подписи)
  • figure img (только для изображения)
  • figcaption (только для подписи)

1
Просто для полноты, если вы хотите использовать jekyll-figure, вам нужно будет добавить jekyll-figure к плагинам в вашем _config.yml
Aleix Sanchis

3

Вы можете попробовать использовать в pandocкачестве конвертера. Вот плагин Jekyll для реализации этого. Pandoc сможет altавтоматически добавлять подписи к рисункам так же, как ваш атрибут.

Но вы должны подтолкнуть скомпилированный сайт, потому что github не разрешает плагины на страницах Github для безопасности.


Спасибо. Значит, одна только уценка не способна создавать подписи?
Орширо

Я полагаю, что это зависит от используемого вами конвертера, однако стандарт уценки не поддерживает добавление подписей.
Chongxu Ren

3

Эндрю @ andrew-wei ответ прекрасно работает. Вы также можете объединить несколько цепочек, в зависимости от того, что вы пытаетесь сделать. Это, например, дает вам изображение с alt, заголовком и заголовком с разрывом строки и жирным шрифтом и курсивом в разных частях заголовка:

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

Со следующей <img>уценкой:

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

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

Это основное использование подписи. Не обязательно использовать дополнительный плагин.


0

Вот самое простое (но не самое красивое) решение: составьте таблицу вокруг всего этого. Очевидно, есть проблемы с масштабированием, и именно поэтому я привожу свой пример с HTML, чтобы вы могли легко изменять размер изображения. Это сработало для меня.

| <img src="" alt="" style="width: 400px;"/> |
| My Caption |
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.