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

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

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

Затем отображается изображение в тексте.

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

85 голосов | спросил orschiro 12 +04002013-10-12T10:42:58+04:00312013bEurope/MoscowSat, 12 Oct 2013 10:42:58 +0400 2013, 10:42:58

9 ответов


0

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

<table class="image">
<caption align="bottom">{{ include.description }}</caption>
<tr><td><img src="{{ include.url }}" alt="{{ include.description }}"/></td></tr>
</table>

(и, очевидно, я не дизайнер. Вероятно, вам следует использовать CSS вместо таблицы, чтобы правильно выровнять изображение)

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

{% include image.html url="/images/my-cat.jpg" description="My cat, Robert Downey Jr." %}
ответил IQAndreas 14 +04002013-10-14T16:30:40+04:00312013bEurope/MoscowMon, 14 Oct 2013 16:30:40 +0400 2013, 16:30:40
0

Я знаю, что это старый вопрос, но я решил поделиться своим методом добавления подписей к изображениям. Вы не сможете использовать caption или 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. Просто убедитесь, что есть тег, иначе вы не сможете его стилизовать.

ответил Andrew Wei 21 Mayam15 2015, 09:45:58
0

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

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

Результат:

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

ответил Bilal Gultekin 19 J000000Wednesday17 2017, 15:52:23
0

Правильный 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 предназначался для использования.

ответил bryanbraun 6 J000000Thursday17 2017, 17:32:41
0

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

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

ответил Chongxu Ren 13 +04002013-10-13T12:32:47+04:00312013bEurope/MoscowSun, 13 Oct 2013 12:32:47 +0400 2013, 12:32:47
0

Небольшое отклонение от ответа с наибольшим количеством голосов , которое, как мне показалось, немного более явным, заключается в использовании синтаксиса 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;

Хорошо выглядит!

ответил Cory 27 MarpmMon, 27 Mar 2017 14:50:20 +03002017-03-27T14:50:20+03:0002 2017, 14:50:20
0

Эндрю @ 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*
ответил Matthew Bennett 7 Jpm1000000pmSun, 07 Jan 2018 15:21:43 +030018 2018, 15:21:43
0

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

  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 папка и включите ее, используя жидкость в 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 добавьте изображение, используя жидкость

Изображение в /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 (только для подписи)
ответил robinmetral 4 AM00000080000001031 2018, 08:45:10
0

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

| <img src="" alt="" style="width: 400px;"/> |
| My Caption |
ответил ndimhypervol 9 FriEurope/Moscow2016-12-09T12:16:48+03:00Europe/Moscow12bEurope/MoscowFri, 09 Dec 2016 12:16:48 +0300 2016, 12:16:48

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132