Caption image + center image (works with preview mode)

Share & showcase
1

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

Things I have tried

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;
}

Then,

![[my image.png|Caption]

Or (resizing image)

![[my image.png|Caption|300]

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;
}
1 Like