Hey there.I would like to display images in dataview’s TASK, but it seems that I can only do so with 3. I am using a local image plugin and would like to display it with 2. .
Does anyone know how to do this?
Thank you.
- [ ] 1 ![[img-001.png]]
- [ ] 2 
- [ ] 3 <img src="file:\\S:img-001.png">
TASK
from ""
0.5.47
1.1.9
Windows
Only the last option allows for styling (aka CSS) in accordance with the task you’re displaying, but all three does provide images, so is it the styling you’re after, or something else?
And what do you mean you want it to function with a local plugin? Can’t that return the <img ... /> source also?
Lastly, the cleanest solution I know to do this would be to use dv.view(), which could allow for code like:
- [ ] My task `$= dv.view("js/img", {src: "img-001.png", class: "task-image"}`
Where you then could have a specific CSS class to do all your styling. Alternatively, you could do something like:
- [ ] My task `$= dv.view("js/img",
{src: "img-001.png",
style: "width: 50px; float: right"}`
Both of these cases would call for you writing a script, vault/js/img.js, which processes the input parameter, and builds the corresponding <img /> element.
I’m so glad you came up with a solution!
I mistakenly said that the local image plugin was meant to be the Constant Attachment and Links plugin.
To be honest, understanding the code you presented seems very advanced and difficult for me.
I didn’t even know that Obsidian had CSS until you told me, and the concept of CSS is another difficult one for me.
I thought it would be better if I could look at the HTML content and customize the internal-embed class.
Anyway, it seems to be a difficult problem to solve with my knowledge.
Still, I am very glad to have learned a lot of things. Thank you very much for taking the time to talk to me!
You could apply a CSS snippet for the second case, using a CSS selectors close to li span>div.internal-embed, but it would still require some CSS knowledge and fiddling about.
If allowed, can I ask why the use of a task format?
If you want only an output of the tasks with the embed images without a required interaction with checkbox, I suggest a table query.
- [ ] this is a task ![[Freud.jpg]] with more
- [ ] another task
- [ ] other ![[Marx.jpg]]
TABLE WITHOUT ID regexreplace(T.text, "(\!\[\[\S+)+", "") AS Task, default(link(T.outlinks, "150")[0], "") AS Image
WHERE file.path = this.file.path
FLATTEN file.tasks AS T
(I’m sure the regex expression isn’t the best… it’s an adaptation from another one, because I don’t know regex)
With the table query you taught me, I was able to successfully display the task images in a table!
- [ ] wikilinks👍 #yay ![[img-001.png]]
- [ ] markdown👍 #yay 
TABLE
without id regexreplace(T.text, "(\!\[\[\S+)+", "") AS Task, default(link(T.outlinks, "150")[0], "") AS Image
flatten file.tasks AS T
where contains(T.tags, "#yay")
The reason I use the task format is because I write out the ideas that come to mind as tasks in daily note, tag them, and finally let dataview collect them by tag.
chrsle in the link below explains it in detail and I do the exact same thing.
https://forum.obsidian.md/t/dataview-plugin-snippet-showcase/13673/679
This one seems to do the same thing with lists instead of tasks.
https://github.com/blacksmithgu/obsidian-dataview/discussions/1329
I sometimes write down ideas as images and wanted to solve the problem of displaying images.
holroy and mnvwvnm, thank you so much!
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.