Media

Images

Images must be stored in a directory whose name starts with _, otherwise they will be deleted during the build. The recommended uploaded file size is 5 MB, the maximum is 10 MB.

The standard markup for inserting an image is as follows:

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

• `alt-text — works like the alt attribute in HTML. It is displayed if the image fails to load, and is used for SEO and screen reader reading.

  Note

  To display alt-text in an SVG image, add the attribute inline=false.

• ``_images/image.png` — the URL or path to the image file.

• ``"tooltip_text"` — a tooltip that will be displayed when hovering over the image. Optional parameter.

• ``width=100, height=100` — image dimensions. Optional parameters.

  Tip

  If you want to preserve the original aspect ratio of the image, specify only its width: width=100.

  Warning

  It is not recommended to pass image dimensions via =100x200 inside link brackets — this format breaks backward compatibility with markdown markup.

Image link

You can make an image clickable using the link formatting rules. To do this, add the standard image markup to the part intended for specifying the link text.

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

Result:

Reference-style markup for images

Similar to reference-style links, you can declare an image once in a special place and then refer to it by label throughout the rest of the document. This allows you to use the image multiple times without overloading the text with long URLs or other parameters.

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

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

Result:

SVG inlining

If SVG images are used in the documentation, Diplodoc embeds them directly into the HTML code as a `` tag during generation. This solution allows applying the current documentation theme settings to the SVG.

To force disable SVG inlining, use the attribute inline=false, then

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

will be converted to

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

You can control SVG image inlining at the project level using the maxInlineSvgSize setting, which limits the maximum size of embedded images. To disable SVG inlining, set maxInlineSvgSize to zero.

Video

Video from a supported video hosting service

1. To add a video to a page, use the markup:

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

2. Replace hosting_name with the name of the video hosting service from the list: yandex, rutube, vk, youtube, vimeo, vine, osf, prezi.

3. Open the page with the video you want to embed in the documentation.

4. Find the code for publishing the video (the code can be found when exporting in the iframe tag, for example, in the "Share" section).

   <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. Replace video_id_or_link_to_it with the link from the src attribute.

Markup example:

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

Result:

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:
  langs: ['en','ru']
...

Video from another video hosting service

1. To add a video to a page, use the markup:

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

2. Get a link to the video.

3. Replace video_id_or_link_to_it with the received link.

Markup example:

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

Result: