Adding caption to images

[harr]

I’d like to add a counterpoint to the counterpoint. Example 571 of the CommonMark spec distinguishes between image description and title.

![foo](/url "title")

is rendered to HTML as

<p><img src="/url" alt="foo" title="title" /></p>

According to the HTML specs the <alt>-tag “must be an appropriate replacement for the image”. AFAIK this tag is more about accessibility and fallback than about a caption.

The specs continue later: “If a caption is to be included, then either the title attribute can be used, or the figure and figcaption elements can be used. In the latter case, the image would in fact be a phrase or paragraph with an alternative graphical representation, and would thus require alternative text.”

<ALT> is not a good place for captions.

But if Obsidian supported <TITLE> for captions, it would be compliant with CommonMark and HTML specs.

[mpineda]

Could you show a markdown example of how to implement this?

[harr]

Yes, of course. This is the Markdown of the examples shown above:

Voluptate et repudiandae nulla laudantium quia et et vitae voluptas aliquam ab. Asperiores aliquid nisi non quidem autem quis iure autem commodi esse sit voluptates libero nostrum autem.

> [!figure] ![[35.jpg]] 
> *Figure 7*: Occaecati rerum error quis assumenda **perferendis** sequi eos in id.

Debitis voluptatem accusantium dolorem cum voluptatem voluptate. Hic maiores earum eligendi eveniet sed veniam molestias perferendis animi doloribus amet qui earum. 

> [!figure-right] ![[35.jpg]] 
> *Figure 8*: Occaecati rerum error quis assumenda **perferendis** sequi eos in id.

Sequi quidem rem dolor rerum repellendus libero neque iure sequi et. Debitis est eius nobis nobis eum facere. Nesciunt commodi aut aliquam quidem repellendus asperiores sapiente molestias dolores dignissimos eos libero iusto.
Aut quo nisi est voluptas dolorem dolor sint ut iure. Voluptas temporibus commodi culpa dolorem possimus incidunt. Voluptas sed sint delectus voluptates et libero eos sed ducimus laborum id est qui quidem. Qui dolorum veritatis doloribus aliquam autem cum ipsam. Aut eum et quidem autem ea accusamus et repellendus tempora. Assumenda rem minus commodi nostrum et exercitationem facilis voluptas modi debitis ratione sed. 

> [!figure-left] ![[35.jpg]] 
> *Figure 9*: Occaecati rerum error quis assumenda **perferendis** sequi eos in id.

Incidunt voluptas ut architecto aut dolorem dolorem ipsum quisquam nemo laudantium id est molestias laboriosam. Temporibus commodi quam repellat doloremque est est reiciendis in quibusdam non unde.

[Grey]

Thank you for adding this. Callouts for captions is a great solution for the current project I’m working on. For anyone in future, you can also add the following to get the images centered.

.callout[data-callout^="figure"] {
  max-width: 40%;
  margin-left: auto !important;
  margin-right: auto !important;

[Fred_V]

I use Image Captions plugin.

With minimal theme, here is my CSS snippet:

/* [Image captions] custom apparence */
.image-captions-figure {
  --image-caption-padding: 4px;
  --bg-color: var(--accent-dark);
  --border-color: var(--accent-normal);
  --text-color: var(--accent-neon);

  padding: var(--image-caption-padding);
  display: block;
  background-color: var(--bg-color) !important;
  border-radius: var(--image-radius) !important;
  border: solid 1px var(--border-color);

  & img {
    /* padding: var(--image-caption-padding) var(--image-caption-padding) 0 var(--image-caption-padding); */
    --image-captions-radius: calc(var(--image-radius) - 2px);
    display: block;
    border-radius: var(--image-captions-radius) !important;
  }

  & .image-captions-caption {
    display: block;
    margin: 0;
    background-color: var(--bg-color) !important;
    line-height: 1.5em;
    border-radius: 0 0 var(--image-radius) var(--image-radius) !important;
    font-family: serif;
    color: var(--text-color);
    padding-block: 5px 0;
  }
}

Just edit the variables or add the ones that could be missing in your global scope.
Here is the result on my setup:

I like the plugin’s features.

[peeragetalkers]

Thanks! I made it more compatible with the theme’s image grids and trimmed it down some to appear super minimal :

CSS snippet with image girds aligned to center

[Minimal][Image_Captions]_Minimal_captions_with_grids_aligned_to_center.css (1.3 KB)

/**
* Snippet Name: Minimal image captions with tweaks for image grids
* Version: 1.0
* Author: Created via Claude
* Source: https://forum.obsidian.md/t/adding-caption-to-images/16431/46
* Last Updated: 2024-12-18
*/

.image-captions-figure {
   padding: 0;
   background-color: var(--bg-color) !important;
   display: flex !important;
   flex-direction: column !important;
   gap: 16px !important;
}

.image-captions-caption {
   margin: 0 !important;
   padding: 0 !important;
   background-color: var(--bg-color) !important;
   color: var(--tx3);
   line-height: 1.5em;
}

.hide-captions .image-captions-caption {
   display: none;
}

.img-grid .image-embed.is-loaded {
   display: flex !important;
   align-items: center !important;
   height: auto !important;
}

.img-grid .markdown-preview-section div:has(> .image-embed ~ .image-embed) {
   display: grid !important;
   grid-auto-rows: auto !important;
}

.img-grid .markdown-preview-section div:has(> .image-embed ~ .image-embed) .image-embed img,
.img-grid .markdown-preview-section p:has(> .image-embed ~ .image-embed) .image-embed img {
   height: auto !important;
   object-fit: var(--image-grid-fit) !important;
}

.markdown-source-view.mod-cm6.is-live-preview:not(.cm-focused) {
   padding-bottom: initial !important;
}

CSS snippet with image grids aligned to top

[Minimal][Image_Captions]_Minimal_captions_with_grids_aligned_to_top.css (608 Bytes)

/**
* Snippet Name: Minimal image captions
* Version: 1.0
* Author: Created via Claude
* Source: https://forum.obsidian.md/t/adding-caption-to-images/16431/46
* Last Updated: 2024-12-18
*/

.image-captions-figure {
   padding: 0;
   background-color: var(--bg-color) !important;
   display: flex !important;
   flex-direction: column !important;
   gap: 16px !important;
}

.image-captions-caption {
   margin: 0 !important;
   padding: 0 !important;
   background-color: var(--bg-color) !important;
   color: var(--tx3);
   line-height: 1.5em;
}

.hide-captions .image-captions-caption {
   display: none;
}

It’d be real nice though if this didn’t take a plugin and a snippet but was a core feature!