How do you dynamically embed a picture tied to a metadata value?

Help
,
1

Hello everybody!

I couldn’t find anything this specific by the search, so here’s my question. I’m trying to build a database of people in Obsidian, and I’m running into a particularly frustrating (to me) hiccup. I’m trying to embed a picture of the person the page is about, but define that picture in the metadata so that it can be changed (either via MetaEdit or Database Folder) without needing to edit the note directly.

Things I have tried

Right now I have a fake person, Ryan Green, I’m using as a template. In the front matter of his note I have the value portrait: that links to the attachment of his picture [[Ryan Green Portrait.jpg]]. I’m using an infobox callout snippet to generate a Wikipedia style info panel. In the callout, I have tables of info categories all being populated from the metadata. I’m making calls like =this.firstName, =this.email, etc. and all is going well, except the profile picture. Several of the iteration I’ve tried are:

  • !=this.portrait
  • !$=current().portrait
  • ="!"+this.portrait
  • $=“!”+ current().portrait
  • etc.

It will often display !Ryan Green Portrait or sometimes just a link to the attachment. It looks like the ! is rendering before the inline calls, and therefore not embedding. I’ve tried portrait defined as metadata, as well as inline in the body of the note as portrait::. I’ve even tried defining it as portrait: “![[Ryan Green Portrait.jpg]]” much like the banner plugin does in order to have the inline call also render the ! to display the image. No dice.

The Question

Is there a way (preferably without a custom .css snippet) to do this without simply typing ![[ProfilePicture.jpg]] manually on each person’s note?

2

Have you tried: $= dv.fileLink(dv.current().portrait, true) ?

https://blacksmithgu.github.io/obsidian-dataview/api/code-reference/#dvfilelinkpath-embed-display-name

3

This also displays nothing. It doesn’t even render the file link.

4

Does this kludge of a thingy work in your setting?

 `$= dv.el("img", "", {attr: { src : "app://local/" + app.vault.adapter.basePath + "/" + dv.current().portrait}}) `

Note portrait now needs to be the full path within your vault. Not a link, just the full path, like portrait: "img/folder/Ryan Green Portrait.jpg"

5

Another variant, which might look a little nicer:

`$= dv.container = 
  '<img src="' + 
  app.vault.getResourcePath(
    dv.fileLink(dv.current().portrait) ) +
  '" />' `

You still need for portrait to contain the full path within the vault, for it to work (at least in my context).

6

There are several threads about this on the Dataview GitHub repository.

If all else fails, use a table or a list? Or wait for Datacore to see if things change for the better?

---
portrait: "![[test.png]]"
firstname: Woof
email: [email protected]
---
# Table
```dataview
TABLE WITHOUT ID
	portrait,
	firstname,
	email
WHERE
	file.path = this.file.path
```

# List
```dataview
LIST WITHOUT ID
	portrait
WHERE
	file.path = this.file.path
```
- `=this.firstname`  
- `=this.email`

table or a list
table or a list1734×1490 164 KB

7

Thanks for the suggestions everyone. Unfortunately, none of them seem to be working for me. I am working 100% on an iPad, which may affect some of it, but I wouldn’t think so.

Here’s a side by side of my various attempts and their output:

image
image2388×1620 449 KB

I think @eightning is right, and I might just hold out for datacore. In the mean time, I might try to learn css and write a small snippet to handle this specific task. I’m sure that skill could come in handy later.

1 Like
8

Line 7 could be working, but it seems but to have the full path to the image. Where in your vault is the image located?

Line 8 has some error, which I’m not sure why is there, so I’ve got to investigate that a little.

Line 9 uses a DQL query, not a dataview js query. In other words, you need to enclose it in either `= … ` or a full ```dataview block.