Show image titles as subtitles

There is no simple way to add descriptions/subtitles to an image at the moment.

Current version:

What I would love:

<div style="background: #e8e8e8; border-radius: 8px; text-align: center;">
          <img src="" alt="">
          <p>Photo by <a href="">Luca J </a><a href="">Unsplash</a></p>

In this example, I just used an extra div to demonstrate.

In a theme that I’m working on, I’ve repurposed the code block / pre as image titles. Not optimal, as you can’t have hyperlinks and stuff - but it’s very easy to use! Also, obviously a no-go if you need code blocks (as their supposed to be used) alot. :stuck_out_tongue:
I’ve left the normal code-thing as is, though!

Here’s a picture from Obsidian, showing how I “make” the title:

And here’s some photos of what it currently looks like “in action”, just by pasting from Obsidian:

1 Like

Cool, tho not a solution for me as I actually use the codeblock for code

Yeah, I understand that’s how it is for some (so I plan to make the repurposing easy to “comment out” when I hopefully publish the theme).

I considered repurposing the inline code instead of the

code block / pre.

Would you be able to give up one of them you think?
The reason I’m asking is also to help me with which one I should “leave as code” as my default. :slight_smile:

Hmm, as I was writing, I had another thought:
You see, the only thing I’m doing, really, is adjusting some padding and margins (the most important is margin-top: -1.2rem; ) and changing the font back to the standard serif font.
It would probably work fine, if I just kept the font as the monospaced and you just knew you had to add an extra line break above it to get decent margins when using as a code block instead of image title.

1 Like

First of I like the idea of using the current system, but a native way would be much more appreciated as it removes the duplication of the alt text from the image itself to another paragraph below. Secondly I have no idea how to use pre in the editor so I couldn’t test it. Html doesn’t seem to be supported by the rich editor

Oh, yes - a native way would of course be way better! :slight_smile: I’m 100 % behind you on the feature request. I’m not sure what that would entail, though - as it’s not part of any Markdown standards I’ve found. This article says the best thing is “to write captions as inline HTML <figcaption> tags.” Maybe we both should try that?

Here’s how you make the two different types of code I’ve found: One of them (that can be used inline, like I did in the post above, but also separate by just giving it it’s own line) is made by putting one backtick before and after, so

`like this.`

The block, or pre, is made by making three backticks above and bellow the text, so

like this, but with backticks.

Read the link above for the difference - but in the context of, the difference is that the block always takes up the whole width, but the other one just creates a block around where it is. So just inline like this,

or like this on it's own line.

(Notice how the last one there didn’t fill up the whole width like the blocks above did.)

I don’t quite understand what you mean about the alt-text, though. They don’t mix in with the captions at all for me. I usually add images using markdown, so the whole thing (image, alt and caption) could look like this:

If the alt-text and caption happen to be the same, I would just remove the alt-text or perhaps write something like “Description in the caption”. I’d say all of the above would also apply if you add photos via HTML (which I do when I need them to be smaller or to have other customisations).

never heard of figcaptions. I’ll look into that. Hopefully that doesn’t brake the rich editor.

It probably will break it, heh.

I can highly recommend writing in Obsidian and pasting into the plain text editor, though! Obsidian renders styles, images, etc. (which I prefer while writing), but copy+paste into still works perfectly. They both support HTML as well.

First of all, I despise doing anything in the browser I can do in an app, so I would never want to write straight into the browser anyway. :stuck_out_tongue: But what I like about this solution, is that I feel like I’m getting the best of both worlds: The simplicity and predictability of plain text, while still getting the richness as Obsidian looks like a rich editor.

Here you can see an example: Obsidian on the right, and copy+pasted (with no edits) into the plain text editor on the left.