Adding caption to images

Feature requests
21

It seems that both the image and caption are left-aligned by default. We can use the CSS like this to center the image.

  /*center image*/
  img { 
    display: block !important; 
    margin-left: auto !important; 
    margin-right: auto !important; 
    }

But I don’t know how to center the caption. I tried this, but it doesn’t work.

  .image-captions-caption {
    text-align: center;
  }
22

You’ll want to use this to center the image:’

.image-captions-figure { 
  margin-left: auto; 
  margin-right: auto; 
}

It sounds like you have some other CSS affecting this. You can test this in the Sandbox vault and see that the captions are centered:

image
image1792×1402 179 KB

You just need to do some investigation to find out what other CSS is preventing the text from being centreed.

1 Like
23

Sorry for the confusion. I have two obsidian caption plugins. I turned down another one. It works fine now.

24

Possible solution, editor mode + preview mode

Version: 1.2.8 (Installer 1.1.16)
Build with :

  • Create a .css file with the following code (I use Textedit for mac, don’t leave the .txt extension)
  • Put it in the snippet folder : your vault/.vault/snippet
  • Open the .vault folder using CMD OPT . command.
  • Notice that I added text-align: center; to center the caption because I use another snippet to center my image. If you don’t want to center your image, juste erase this part of the code (for reading mode and source view).
  • Don’t forget to activate this new snippet in the obsidian setting
  • Don’t hesitate to try different settings !
/* reading mode */
.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);
    text-align: center;

}
/* source view and live preview */
.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);
    text-align: center;
}

The other snippet to center all my image if this interests you :

/* reading mode */
img {
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
}
    
 .markdown-source-view.mod-cm6 .cm-content > * {
        margin: auto auto !important;
}
/* source view and live preview */
img {
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
}
    
 .markdown-source-view.mod-cm6 .cm-content > * {
        margin: auto auto !important;
}
5 Likes
25

That’s very cool and could negate the need for a plugin.

Did you have any luck getting external images to work?

This style:

![Alt text](https://forum.obsidian.md/uploads/default/original/1X/39438916879fc6e20fca16cbc962a44f272e102f.png)
26

Old Topics. But my personal solution is to use a callout for figure. One has to scarify a standard callout or custom one. Here after I use tip:

> [!tip] ![[my_figure.png]]
> *This is the caption*

With some css leverage you can customise Icon and Title specific for tip (in this example) callout.

I wish Obsidian can support some [!figure] [!table] [!math] callout natively.

With this trick you can also make a collapsible bigger figure with caption :

> [!tip]- ![[my_figure.png|100]]
> ![[my_figure.png]]
> *This is the caption*
2 Likes
27

Now you only need to share the css :smile:

28

This would be a snippet like this one :

.callout[data-callout="figure"] {
  --callout-color: 100, 100, 100;
  --callout-icon: none;
  .callout-content {
      font-size: 0.5em; 
      text-align: center;
   }
 }

The markdown :

Normal text 

> [!figure] ![[two_noises.png]]
> Two signal measurement one has a SNR of 10 the other of 100. The signal average is however the same. 

Some normal text continue here

How it looks like :

image
image582×624 52.8 KB

I like the solution because it stays human readable, it does not need special plugin, and I can make it work on my markdown publisher (quartz) easily.

4 Likes
29

@slyg I would offer a counterpoint to this.

Markdown already has a place for the image description (spec here):

![Image description](path/to/image.jpg)

or

![[path/to/image.jpg|Image description]]

This is where the text is taken from in the captions plugin(s) above.

Relying on Obsidian-style callouts is quite far from any sort of standard Markdown. It might be supported on another Markdown renderer, but it probably won’t be.

Using the in-spec Image Description has a higher likelihood of being supported on another platform into the future, and even without that, it is easier for other software to parse and renders perfectly into HTML.

edit: I’ll add that there’s nothing wrong with doing it the callout way - it’s just food for thought as you consider the longevity of your vault, and the cross-compatibility of it on other platforms if Obsidian is no longer around.

30

Of course . This was just an additional solution on the topics.

This solution is pretty suitable for long descriptions which can include bold text LaTeX , cross references etc …

Works well within Obsidian and any Markdown render with Obsidian callout flavour .

In fact the information is still there for Markdown render that does not handle callouts (like pandoc) . Only a weird [!figure] is added somewhere, but figure and caption are there.

1 Like
31

Good points - I quite like that approach, especially being able to add other markdown in the description.

32

I just realised an other use case for this method. Is the possibility to add One caption for two images.

> [!figure] ![[fig1.png|300]] ![[fig2.png|300]] 
> The two figures shows .... **when**  $\alpha  = \int_0^\infty f(t) dt$
1 Like
33

Using @slyg’s Callout option, another way to center the caption without CSS is to use html tags.

> [!tip] ![[Black-Eyed Susans.png|256]]
> <center>Black-eyed Susans</center>