Why isn't there a way to add a caption to a local image in one of my Obsidian markdown notes?

[ahawkua]

Things I have tried

What I’m trying to do

Why isn’t there a way to add a caption to a local image in one of my Obsidian markdown notes?

[reg]

I’ve been using subscript <sup></sup> on the line after the image to act as a caption.

[DEV_Scribbles]

Hi there is actually a way that was shared in the discord by @foreveryone that will use snippets:

Message: Discord

Snippets:

• Figcaption snippet
• img-grid/float snippet

Input in the note:

![[imagename.jpg|left|200]]

<figcaption id="left" style="width:200px">This is a caption</figcaption>

** Note: the width = the width of the image, set through the pipe (for example: `![[image.png|left|400]]`

[saf-dmitry]

Here is another possible workaround I’m currently using. You can display the image’s alt text as figure caption using the following CSS snippet:

.image-embed[alt]:after {
    content: attr(alt);
    display: block;
    margin: 0.2rem 1rem 1rem 1rem;
    font-size: 90%;
    line-height: 1.4;
    color: var(--text-faint);
}

Here an example:

Please note, however, that inline Markdown syntax in the alt text will be not interpreted.

[saf-dmitry]

Please, also see my feature request:

Adding caption to images

Use case or problem As far as I know, there is currently no “official” way to add a caption to an image. Proposed solution I would suggest, that an image with nonempty alt text, occurring by itself in a paragraph, will be rendered as a figure with a caption. The image’s alt text will be used as the caption. That means that following Markdown snippet  or ![[image.png|This is the caption]] will be rendered as something like <figure> <img src="path/to/ima…

[mo49]

Thanks for the snippet. But even though I activated it as CSS snippet, it does not display the caption.

This is how I did. Am I missing anything?
(tried with theme and with no theme selected)

[saf-dmitry]

@mo49

Unfortunately, this seems to work currently only for internal images (images saved inside your vault), referenced using relative path to the image file, e.g.

![Caption](image.png)

or

![[image.png|Caption]]

[mo49]

@saf-dmitry

![Caption](image.png)

Oh okay! But it works now. Thank you so much