Table: Multi-line text and images side-by-side

[joni_corazon]

I’m migrating from a self-coded VS Code plugin I wrote before Obsidian came along, so I already have a bunch of notes I’m in the process of converting.

What I don’t get to work, and what is a common use-case in my notes: I have some sort of tutorial. It’s a table without headers, with multiline text in the left column and one image (plus some optional text) in the right column.

Classic markdown tables don’t work - they don’t allow header-less tables, and don’t support multiline text, as far as I know.
So, in the past I have done this using HTML tables. They look like this:

<table><tr><td>

This is some text.
It can be multi-line with linebreaks. 

</td><td>

!()[../Attachments/2021-10-10_12-32-09.png]

</td></tr><tr><td>

This is new text.

</td><td>

!()[../Attachments/2021-10-10_12-38-32.png]
Source: somewhere

</td></tr></table>

However, in this table, my images won’t be rendered. They would be rendered using an tag, however Obsidian doesn’t seem to support relative paths within img-tags?

One solution would be to use the Multi-column Markdown plugin. However, then I would have to create a whole new multi-column section for every row - it is important that the text and the corresponding images line up. Also, I’d like to stick to standard Markdown/HTML as much as possible.

Do you know any good solutions?

[holroy]

@joni_corazon

What I don’t get to work, and what is a common use-case in my notes: I have some sort of tutorial. It’s a table without headers, with multiline text in the left column and one image (plus some optional text) in the right column.

Classic markdown tables don’t work - they don’t allow header-less tables, and don’t support multiline text, as far as I know.

Using custom classes to hide the headers

Obsidian supports custom classes for any given note, through the use of cssClass in the frontmatter. Through this, you’re able to create your header-less tables. That is, you’re able to hide the headers of any table in that note. This then allows for ordinary markdown tables.

There is also a plugin, GitHub - LilaRest/obsidian-custom-classes: A minimal Obsidian plugin that allows you to add your own HTML classes to chosen Markdown elements directly from your notes., which is able to tag blocks with a custom class. This would allow for other tables to exist in your notes, which are not header less.

Either HTML or markdown

Obsidian has made a choice that if you’re using HTML, then markdown doesn’t work nicely within the HTML tags. (This is kind of a generalisation, but you get the idea)

Using HTML

So if you persist on using <table>, I think you should also use <img />. If you try that with relative URI’s, it fails (in my attempts at least) to resolve them properly.

But you can use the full path, and get them to resolve that way, at least on desktop (haven’t tried on mobile). So in my case where the main address for the vault is: /Volumes/Local/tmp/Sandkasse, and an image is at _img/EBuJo.png, I can use <img src="app://local/Volumes/Local/tmp/Sandkasse" /> to display the image.

This’ll work only at my desktop. You could try using app.vault.adapter.basePath to build it on the current device, but requires access to javascript, which again will require access to markdown (and tools such as dataviewjs).

Using Markdown

So I guess the best option would be to use markdown table, with some custom formatting, and then use its embedding of images.

A variation of this, could be the following:

| <span style="display: none" /> | <span style="display: none" /> |
| --- | --- |
| This is some text. <br> It can be multi-line with linebreaks    | ![[EBuJo.png|200]] |

Which in the default theme displays as:

And in Minimal as: