Obsidian Image Caption

Add captions to your images.

Use

Internal embeds

Use the pipe (|) after the the source of an embeded image to display the text as a caption of the figure.

e.g.

![[my_amazing_image.png|Check out this amazing picture.]]

External embeds

Use alt text to display as a caption.

Allows resizing of images, exactly how internal embeds work. (See below)

e.g.

![Another beautiful picture.](https://prettypicture.com/image01.png)

Resizing When resizing internally embedded images one can normally use the <width>x<height> after the pipe (|) character.

e.g.

![[my_amazing_image.png|50x50]]

You can now resize both internally and externally embeded images with caption. However, delimeters must be used to distinguis the caption text if it is present.

e.g. If " is the caption delimeter.

![[my_amazing_image.png|50x50]]

![[my_amazing_image.png|50x50 "Look at my caption ma!"]]

!["I can caption anything!" 100x150](https://prettypicture.com/image01.png)

![100x150](https://prettypicture.com/image01.png)

Settings

• Label: Text that prepends all captions.
  For automatic numbering use '#'. If a '#' character is meant to be output, escape it with a backslash ('\'), i.e. '\#'. Backslashes must also be escaped to be output, i.e.'\\'.

• CSS: Apply custom CSS styling to the image captions.
  Captions are indexed from 1 using the 'data-image-caption-index' attribute for styling based on figure number.

• Delimeter: Indicates the caption text.
  A delimeter is a set of characters that identify the caption text to use. The delimeter must enclose the text you wish to display as the caption.

  • If no delimeter is set the entire text is used.
  • A single delimeter can be used for the start and end.
    e.g. " -> "My caption" or !! -> !!My caption!!
  • A start and end delimter can be used by separating them with a comma (,).
    e.g. {, } -> {My caption} or <<, >> -> <<My caption>>
  • Note: Whitespace is trimmed from the delimeter character sets.
  • Note: Only the first and last delimeters are matched, so the delimeter character can be used in the caption without special consideration, such as escaping.

• Caption as HTML: Allows your captions to be rendered as HTML.
  By turning this option on your captions will be inserted into the document as HTML, rather than text.

FAQ

• My captions aren't showing up: Captions are only added if the image is rerendered. Try changing the caption (needs to be more than a trailing space) and trying again. If this fixes the issue then change it back, otherwise open an Issue.

Known issues

(none at the moment)