[Feature Request] Image Preview in Cards

[Snuggle]

As someone who is trying to move from Notion to Obsidian, one of the biggest issues I have found with this Kanban plugin is that there is no way to add a picture to a card. I find this incredibly useful to be able to see what cards are at a glance without needing to click for more information or to look at a wall of text.

I use loads of Kanban plugins for tracking things such as deliveries so that I can never forget about a delivery and have it not show up. Here is a side-by-side of what one of my 'delivery trackers' would look like in Notion vs obsidian-kanban. They're close, almost identical, but these snazzy pictures are still missing in Obsidian. How difficult would it be to add this as a feature? Let's say if a card has a note attached, the first image is the preview image? I'd love that!

Notion

obsidian-kanban

[Snuggle]

Here's a quick sketch of what this looks like now and what should happen. If the user puts ![[../path/to/image]] in the card metadata, it should render the image. Not sure how we could handle aspect ratio, but the way Notion does this is lovely where the user can set fit entire image in card or scale image to fill card's width

Set metadata key, enable 'Field contains markdown'

Add markdown for image in the metadata

What happens currently compared to what should happen

[MosheSteinberg]

This is definitely possible now. You may need to play with the css a bit, but see here on discord: https://ptb.discord.com/channels/686053708261228577/805952223124520961/856179609330647080

[SlRvb]

It used to be possible, but even I'm having trouble getting the kanban to display my wikilinked images, the only one that's still working is external images ![]().

I think it's best to change this from a feature request to a bug since it seems that using ![[wikilinked images]] no longer works when it used to.

[SlRvb]

Ah I think I found the issue. Something changed with Dataview version 0.4.4 meaning that it needs to be surrounded with quotes to render so it should be "![[Image.png]]" instead of just ![[Image.png]]

[SlRvb]

If that didn't make sense, I just mean surround the image link in quotes:

---
test: "![[Pasted image.png]]"
---

The image should output properly:

[mgmeyers]

@Snuggle and @SlRvb image embeds should be working much better now, both in the card content and metadata. You shouldn't need to wrap the image in quotes anymore, either. Let me know if you run into any issues.

Also, @Snuggle let me know if image embeds work for your use case. Especially in the latest version of the plugin, where you can add new lines to cards (shift + enter by default)

[Snuggle]

@mgmeyers - Testing on macOS 15, Obsidian v0.12.15 and Obsidian-Kanban v1.0.13 (latest), the images only display if there is some kind of text before the image embed. Without any text (such as quotes) before the image embed, it shows undefined.

---
delivery-notes: ![[Pasted image 20210914084514.png]]
---

Not quite sure what is causing the undefined but that's the only issue I see still. 😊

Without quotes (undefined)

With quotes

With text before the image

[mgmeyers]

@Snuggle So it turns out this is an issue on Obsidian's end. Well, really a YAML issue. Obsidian thinks that ![[my image.png]] is an array, rather than an image embed. There isn't much i can do on my end, unfortunately, and I think the only way around this is to wrap image embeds in quotes when adding them to frontmatter. The same goes for regular links in frontmatter

[Snuggle]

Ah I see, thank you! I've put a pull request in for documenting this feature & the weird quirks it has at the moment, since it made me not even realize that images were possible for months! Having images in a kanban board is (at least for me) massive thing for someone moving from Notion to Obsidian. I'll close this issue now as the YAML issue is an upstream one, but a note of this is included in the docs. #297 😊