I want to be able to render the values of frontmatter fields in the reading view of Obsidian as internal links. But it seems like there is no possibility doing this using the API, so I am looking for other solutions.
I think this can be done using CSS and the ::after selector. But every time I try to insert a pseudo element with the classes I extracted from the source code, the inserted code gets treated as text only.
Has anyone an idea on how to start or can hint me towards a solution? If it is not CSS based - also fine.
My idea is to convert the values of frontmatter fields in reading view into links. I use this cause I am doing a CRM in Obsidian. So far I wrote a script that changes the values to links everytime a note is reloaded. But it is hardcoded and changes the file.
This is what I want to do. Imagine you have the following frontmatter for an address:
Country: “Germany”
City: “Berlin”
Right now I have a script that changes it to the following on opening up the note:
Because 90% of the frontmatter fields also exist as notes, I want an easy way to jump from the frontmatter field directly to those notes. I ran in some problems with the projects plugin (which I need) handling links, so now I thought going for a pure CSS solution might be the way.
I also found out recently that Captivity uses objects instead as notes. They have it organized in a similar way but since it is web-based, I don’t consider using it.
So my idea is that I don’t change the actual content at all but just “render” it as links I can click using CSS. Any thoughts?
Yeah like I said, the project plugin does not support links at this stage. And I also run in minor difficulties in other parts of the projects that I can only solve running custom JS scripts. It would be the easiest to avoid this using CSS only.
There’s an option in the field’s settings to Enable rich text formatting … which I had to toggle On to have the links from Properties displayed as clickable links in Project
In the quote above, with some of my emphasizing, I’m illustrating how we talked passed each other. You want to keep the text as a non-link, and I said change it to a link.
Earlier on I stated that this can’t be done using pure CSS, and I stand by that statement, and here are two links further explaining that statement:
Both of these, and I, did however elude to the fact that you might indeed use javascript to do so. So my take on how to approach this from Obsidian would be:
Use Templater (or similar tool) to add a javascript command to the interface, and link this command to a hotkey.
Now, when you open up a document with none of the links in the properties section, you hit the hotkey and it transforms the properties into links
The gist of such a script would be:
Locate all (or a subset) of the properties in current document
Match the text value against the metadata list of current documents
Change the value element of the matching properties to a link to the given documents
It might be possible to automise this even further by hooking onto some on_load event, but we’re already borderlining writing a plugin, and I’ve not done that. Yet. The other parts I think Alan Grainger has done, and that there are some examples of within this forum. I can’t find them just now though.
Actually, I think you are right. I totally got you wrong and I guess you might be right stating that it cannot not be done with pure CSS. I will have a deeper dive into the links you provided though.
The approach with the templater script is something I actually do but a little different. I have a dataviewjs code block on the end of every note and it includes a footer. Using this method I can execute code in a centralized manner from scripts that I can change globally. This is how I deal with frontmatter currently because I automated editing of metadata quite a lot.
Just a question on the side because I am no developer (at least not a professional one). Is it okay to use the DOM model and change what I want in a part of Obsidian that is normally not accessible by the API? I mean, I wanted to do this with CSS. But I guess JS is definitely more “intrusive”…
@Pch : Thanks for the hint. I was sure I saw this feature before in the projects plugin but somehow I overlooked it all the time…
The DOM model is kind of volatile, as it gets generated each and every time you switch to viewing your markdown. As such you can change/modify it without too many regrets, as the next you want to view it it’s reset to the original (and you can change it again, and again, … ).
Just be a little careful with your modifications so as not to disturb other functionality, or other parts of the larger DOM model used by Obsidian in its entirety. So care should be taken, but just as CSS is applied when viewing, you could attach/use javascript for purposes like this.
…
.