Как добавить иллюстрацию или галерею

Иллюстрация — это изображение с подписью: на неё указывает текст, и читатель может рассмотреть её отдельно. Галерея — несколько изображений, показанных одной группой. Это руководство добавляет изображение в работу, делает его иллюстрацией, ссылается на неё, а затем собирает галерею с одной подписью на всю группу.

Загрузить изображение

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

В редакторе выберите Визуально и поставьте курсор на пустую строку, где должно стоять изображение.
Выберите Медиа, затем Загрузка, и перетащите файл или щёлкните, чтобы его выбрать. Принимаются PNG, JPG, GIF, WEBP и SVG.
В поле Альтернативный текст опишите, что изображено, для читателя, который не видит изображения: «График y = sin x на одном периоде», а не «график».
Выберите Загрузить и вставить. Изображение появится на месте курсора.

В режиме Код изображение теперь — строка вида ![альтернативный текст](адрес). Изображение, которое уже есть в интернете, можно сразу записать в этой форме, с адресом https.

Сделать его иллюстрацией

В режиме Код поставьте строку ::::figure прямо над строкой изображения.
Под изображением, после пустой строки, напишите подпись.
Закройте иллюстрацию строкой ::::.

Результат

График y = sin x на одном периоде — Синус на одном периоде. Он равен нулю в точках $0$ , $π$ и $2 π$ и достигает $\pm 1$ посередине между ними.

Markdown

::::figure
![График y = sin x на одном периоде](/examples/sine.svg)
 
Синус на одном периоде. Он равен нулю в точках $0$, $\pi$ и $2\pi$ и
достигает $\pm 1$ посередине между ними.
::::

Первый блок внутри иллюстрации — её содержимое, всё после него — подпись, которая может занимать несколько предложений с форматированием, ссылками и формулами. У иллюстрации четыре двоеточия, а не три, потому что её содержимым может быть отдельный блок, например диаграмма или галерея, а внешней ограде нужно больше двоеточий, чем всему, что внутри.

Хорошая подпись позволяет читателю, который сначала смотрит на иллюстрацию, понять её без окружающего текста: что показано, что означают оси или цвета и на что одно стоит обратить внимание. Альтернативный текст говорит, что на картинке; подпись говорит, что это значит. Не повторяйте одно в другом.

Сослаться на иллюстрацию

Добавьте на ограду иллюстрации якорь: ::::figure{#fig-sine-period}.
Сошлитесь на неё в тексте: [иллюстрация ниже](#fig-sine-period).

Результат

Как показывает иллюстрация ниже, синус повторяется через $2 π$ .

Markdown

Как показывает [иллюстрация ниже](#fig-sine-period), синус повторяется через $2\pi$.
 
::::figure{#fig-sine-period}
![График y = sin x на одном периоде](/examples/sine.svg)
 
Один период синуса.
::::

Щелчок по ссылке прокручивает страницу к иллюстрации. Выберите короткое имя, которое говорит, что это за иллюстрация, например #fig-phase-portrait: на неё могут ссылаться извне работы, и имя не меняется, когда вы добавляете иллюстрацию выше. Страница не нумерует иллюстрации сама, поэтому если в тексте написано «рисунок 2», номер в подписи и в тексте ссылки пишите сами.

Показать несколько изображений галереей

Напишите на строке :::gallery.
Под ней поставьте по изображению на строку, каждое со своим альтернативным текстом.
Закройте её строкой :::.

Результат

Markdown

:::gallery
![График y = sin x на одном периоде](/examples/sine.svg)
![График y = cos x на одном периоде](/examples/cosine.svg)
:::

Галерея принимает только изображения; строка текста внутри неё отбрасывается. Используйте её для сравнения или серии: функция и её производная, один и тот же образец с двумя окрасками, кадры анимации.

Подписать галерею как одну иллюстрацию

Напишите галерею, как выше.
Поместите её внутрь иллюстрации и дайте иллюстрации пять двоеточий, ведь у галереи внутри их три.
Напишите подпись после галереи.

Результат

График y = sin x — Синус и косинус на одном периоде. Каждый — это другой, сдвинутый на $π /2$ : $cos x = sin (x + π /2)$ .

График y = cos x — Синус и косинус на одном периоде. Каждый — это другой, сдвинутый на $π /2$ : $cos x = sin (x + π /2)$ .

Markdown

:::::figure{#fig-sine-cosine}
:::gallery
![График y = sin x](/examples/sine.svg)
![График y = cos x](/examples/cosine.svg)
:::
 
Синус и косинус на одном периоде. Каждый — это другой, сдвинутый на
$\pi/2$: $\cos x = \sin(x + \pi/2)$.
:::::

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

Поместить диаграмму в иллюстрацию

Диаграмма TikZ помещается в иллюстрацию так же, как изображение: блок :::tikz — содержимое иллюстрации, а подпись идёт после него. См. Как нарисовать диаграмму в TikZ.

Результат

В просмотре каждая иллюстрация показывает изображение с подписью под ним, а ссылка на иллюстрацию переносит к ней. Галерея показывает свои изображения рядом, по ширине текста. Щелчок по изображению или Enter, когда оно в фокусе, открывает его на весь экран с увеличением, а стрелки листают все изображения страницы по порядку. Так происходит, только если просмотрщик покажет изображение крупнее, чем страница: маленькое изображение, уже показанное в полном размере, остаётся как есть, а изображения галереи и диаграммы открываются всегда.

Если изображение не открывается, скорее всего, оно стоит внутри ссылки, по которой щелчок и переходит, или оно не загрузилось и показывает свой альтернативный текст в неброской рамке. См. Решение проблем с Markdown.

Когда достаточно простого изображения

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