From 600e76e50ff6c1ae2ff8837cf9beefb086e5ec9e Mon Sep 17 00:00:00 2001 From: osulyanov Date: Mon, 16 Dec 2024 13:22:05 +0300 Subject: [PATCH] doc: Document image captions support --- en/syntax/media.md | 32 ++++++++++++++++++++++++-------- 1 file changed, 24 insertions(+), 8 deletions(-) diff --git a/en/syntax/media.md b/en/syntax/media.md index 82f0a8c0..d54cb8d8 100644 --- a/en/syntax/media.md +++ b/en/syntax/media.md @@ -14,16 +14,33 @@ The standard markup for inserting an image is: ![alt-text](_images/image.png "hint_text" =100x100) ``` - * `alt-text`: Alternative image text. - * `_images/image.png`: The URL or path to the image file. - * `"hint_text"`: A hint that will be displayed when you hover over the image. Optional. - * `=100x100`: The image size. Optional. +* `alt-text`: Alternative image text. +* `_images/image.png`: The URL or path to the image file. +* `"hint_text"`: A hint that will be displayed when you hover over the image. Optional. +* `=100x100`: The image size. Optional. - {% note tip %} + {% note tip %} - If you want to keep the aspect ratio of your image, only specify its width: `100x`. + If you want to keep the aspect ratio of your image, only specify its width: `100x`. + + {% endnote %} + +### Images with captions + +You can enable the display of the caption you need to add the { caption } as attribute, the default value is equal to the title, but it can also be passed in the attribute. + +```markdown +![Alt text](../../_images/mountain.jpg "Default caption text" =100x100){ caption } + +![Alt text](../../_images/mountain.jpg "Title" =100x100){ caption="Specified caption text" } +``` + +**Result** + +![Alt text](../../_images/mountain.jpg "Default caption text" =100x100){ caption } + +![Alt text](../../_images/mountain.jpg "Title" =100x100){ caption="Specified caption text" } - {% endnote %} ### Images as links {#image-link} @@ -61,4 +78,3 @@ To add videos to a page, use markup: ``` To review the style options and list of available video hosting services, see the [markdown-it-video](https://www.npmjs.com/package/markdown-it-video) plugin page. -