Bases: Can't get card view images to be displayed

[ObsidiPilot]

I have notes that have each a title image associated. The png files are stored in the same folder as the notes. The “path” to the image is stored in the ingeniously named ‘title pic’ property, e.g.

---
titlepic: 1234.png
---

In my Bases Table view I can display the images using image(titlepic).
However, in the Cards view, the images won’t show, even if I set titlepic as the ‘image property’.

The documentation states: The view settings allow you to optionally configure an image property, which can be an image URL or attachmentlink.

I guess I need to encode the information in the titlepic property differently, but I cannot figure out how.

V1.9.4 should have addressed an image path issue, but I guess not in my case.

Thanks for your support!

[anon80950206]

Hello.

Hope these samples help show your options:

---
yamlimage: "[[image.jpg]]"
titlepic: 1234.png
anotherproperty: photo of trees
---

~~~base
views:
  - type: cards
    name: CardView
    filters:
      and:
        - file.name == this.file.name
    order:
      - file.name
      - anotherproperty
    image: yamlimage

~~~


~~~base
formulas:
  tpcard: link(titlepic)
views:
  - type: cards
    name: CardView
    filters:
      and:
        - file.name == this.file.name
    order:
      - file.name
      - anotherproperty
    image: formula.tpcard

~~~

[ObsidiPilot]

Thanks @anon80950206!

Two things I learned today:

1. You can create real inline bases with the ~~~base ~~~ syntax. I always created new bases via the menu command and assumed there must be another way.
2. titlepic: "[[1234.jpg]]" is the way to encode the yaml property to get it displayed in the cards view.

[PaulDickson]

@ObsidiPilot

titlepic: "[[1234.jpg]]" is the way to encode the yaml property to get it displayed in the cards view.

This seems to be the only way I could get mine working as well

Tried custom formulas to convert "![[image.jpg]]" into "[[image.jpg]]" but had no luck

My Experience Setting up Cards with Bookshelf

I would love iFrames in Cards view also for my YouTube URLs but I don’t think it’s going to happen

[ariehen]

You may be aware and not sure if this works for your use case(s), but you can choose the first embedded image in a note to display: e.g.

---
categories: "[[Albums]]"
artist: "[[Maggie Rogers]]"
year: 2019
rating:
---
# Heard It In A Past Life -- Maggie Rogers

![[Heard-It-In-A-Past-Life.webp|300]]

and a forumla of image(file.embeds[0])

[PaulDickson]

@ariehen

You may be aware and not sure if this works for your use case(s), but you can choose the first embedded image in a note to display: e.g.

That’s pretty cool, thank you for sharing.

[ObsidiPilot]

Would that work also in the Cards view?

[ariehen]

Unfortunately it doesn’t appear to in the way you’d hope:

It may be a bug, unimplemented yet, or not possible to use formulas as the Image property in the cards layout. I’ll ask around to see what turns up. See below

[anon80950206]

@ariehen

It may be a bug, unimplemented yet, or not possible to use formulas as the Image property in the cards layout. I’ll

Not on a device with Obsidian installed to be able to try anything, but can a link be added (nested) to an image property?

Any chance link(file.embeds[0]) works?

[ariehen]

I’ve left the command center for the day, so will need to check later. Noticed this though:

https://help.obsidian.md/bases/views#Image+property

so it may not be possible at the moment.

[anon80950206]

EDITED to remove the unnecessary () from file.embeds[0]

Is this what people want?

Here is the first image

![[1234.png]]

# BASES CARD VIEW

~~~base
formulas:
  firstimage: file.embeds[0]
views:
  - type: cards
    name: CardView
    filters:
      and:
        - file.name == this.file.name
    order:
      - file.name
    image: formula.firstimage

~~~

And this works for hex codes (if anyone is interested).

---
hex: "#F54927"
---

# BASES CARD VIEW

~~~base
views:
  - type: cards
    name: CardView
    filters:
      and:
        - file.name == this.file.name
    image: note.hex

~~~

[anon80950206]

EDITED to remove the unnecessary () from file.embeds[0]

@anon80950206

Any chance link(file.embeds[0]) works?

This does also seem to work, although seemingly superfluous.

Here is the first image

![[1234.png|100]]

# BASES CARD VIEW > `file.embeds[0]`

~~~base
formulas:
  firstimage: file.embeds[0]
views:
  - type: cards
    name: CardView
    filters:
      and:
        - file.name == this.file.name
    order:
      - file.name
    image: formula.firstimage

~~~

# BASES CARD VIEW > `link(file.embeds[0])`

~~~base
formulas:
  firstimage: link(file.embeds[0])
views:
  - type: cards
    name: CardView
    filters:
      and:
        - file.name == this.file.name
    order:
      - file.name
    image: formula.firstimage

~~~

[ariehen]

Guapa wouldn’t lead us astray () but just want to confirm (in a .base file, an embedded base, or ```base code block):

• with the Table layout: a formula of image(file.embeds[0]) shows the first embedded image in a note.

• with the Cards layout → Image Property: a formula of link(file.embeds[0]) shows the first embedded image in a note.

---

I don’t know how much I’d use this myself; I don’t keep a lot of images in my vault and don’t plan to.

For media, I link to smaller external images and figure if the internet isn’t working for a while, I probably have a lot of bigger issues to deal with.

It’s great it’s an option though!

[anon80950206]

@ariehen

with the Cards layout → Image Property: a formula of link(file.embeds[0]) shows the first embedded image in a note.

Think users can just use file.embeds[0] (without the link part and brackets). Works locally, at least.