Медиа

Изображения

Изображения должны храниться в каталоге, имя которого начинается с символа _, иначе они будут удалены при сборке. Рекомендуемый размер загружаемого файла — 5 МБ, максимальный — 10 МБ.

Стандартная разметка для вставки изображения имеет вид:

![alt-текст](_images/image.png "текст_подсказки"){width=100 height=100}

• alt-текст — название изображения, задается автором. В сборке не отображается.

• _images/image.png — URL или путь до файла изображения.

• "текст_подсказки" — подсказка, которая будет отображаться при наведении на изображение. Необязательный параметр.

• width=100, height=100 — размер изображения. Необязательные параметры.

  Совет

  Если вы хотите сохранить оригинальное соотношение сторон изображения, укажите только его ширину: width=100.

  Важно

  Не рекомендуется использовать передачу размера изображения через =100x200 внутри скобок со ссылкой — этот формат нарушает обратную совместимость с markdown-разметкой.

Изображение-ссылка

Вы можете сделать изображение кликабельным, используя правила оформления ссылок. Для этого добавьте стандартную разметку изображения в ту часть, которая предназначена для указания текста ссылки.

[![An old rock in the desert](../_images/mountain.jpg "Mountain"){width=100 height=200}](https://yandex.com/images/search?text=mountain)

Результат:

Reference-style разметка для изображений

Аналогично reference-style ссылкам, вы можете один раз объявить изображение в специальном месте, а в остальном документе обращаться к нему по метке. Это позволит использовать изображение несколько раз, не перегружая текст длинными URL или другими параметрами.

![An old rock in the desert][image1]

[image1]: ../_images/mountain.jpg "Mountain"

Результат:

Инлайнинг SVG

Если в документации используются SVG-изображения, Diplodoc при генерации встраивает их напрямую в HTML-код в виде тега <svg>. Такое решение позволяет применять настройки текущей темы документации к SVG.

Для форсированного отключения инлайнинга SVG используйте атрибут inline=false, тогда

![](_images/image.png){inline=false}

будет преобразован в

<img src="_images/image.svg"/>

Видео

Видео из поддерживаемого видеохостинга

1. Чтобы добавить на страницу видео, используйте разметку:

   @[название_хостинга](id_видео_или_ссылка_на_него)
   

2. Замените название_хостинга на название видеохостинга из списка: yandex, rutube, vk, youtube, vimeo, vine, osf, prezi.

3. Откройте страницу с видео, которое нужно встроить в документацию.

4. Найдите код для публикации видео (код можно найти при экспорте в теге iframe, например, в разделе «Поделиться»).

   <iframe src="https://vk.com/video_ext.php?oid=-207738372&id=456239060&hd=2&autoplay=1" width="853" height="480" allow="autoplay; encrypted-media; fullscreen; picture-in-picture; screen-wake-lock;" frameborder="0" allowfullscreen></iframe>
   

5. Замените id_видео_или_ссылка_на_него на ссылку из атрибута src.

Пример разметки:

@[vk](https://vk.com/video_ext.php?oid=-207738372&id=456239060&hd=2&autoplay=1)

Результат:

resources:
  csp:
    - "frame-src":
        - "ссылка_на_видеохостинг"

allowHTML: true
langs: ['en','ru']

resources:
  csp:
    - "frame-src":
        - "https://vk.com"
        - "https://login.vk.com"        
        - "https://runtime.strm.yandex.ru"

docs-viewer:
  project-name: diplodoc
  langs: ['en','ru']
...

Видео из другого видеохостинга

1. Чтобы добавить на страницу видео, используйте разметку:

   @[](id_видео_или_ссылка_на_него)
   

2. Получите ссылку на видео.

3. Замените id_видео_или_ссылка_на_него на полученную ссылку.

Пример разметки:

@[](https://frontend.vh.yandex.ru/runtime/player/video/vplvic7jsotpobyc7o5b?autoplay=0&branding=0&from=documentation&mute=0&redirect_from=ugc)

Результат: