Internal links that display note ``title`` property (or any other)

[jeetsukumaran]

Folks,

Objective

I would like to have internal links show the target note’s title property if an alias or display text is not defined.

So for example, given note1.md is a file with the property “title” defined:

---
title: >
  This is the Note's Title!
---

Hello, world.

I would like to see:

Source	Rendered
[[path/to/folder/note1.md|a link to the note]]	a link to the note
[[path/to/folder/note1.md]]	This is the Note’s Title!

If test1.md is:

---
title: Not All Who Wander Are Lost
---

Another note.

Source:

Rendered:

I figured out a way to do those with the fantastic Supercharged Links plugin, which I would like to share here.

Honestly, the plugin is so well designed and authored (thanks @Mat!), that most of it is very straightforward … EXCEPT detecting whether or not the link has any display text or alias given.

Track the Property

First, set up the plugin to track the property, “title” (or whatever you want):

Add the CSS Snippet

Thanks the supercharged plugin magic, all we need to do is add a few lines of CSS:

/* The following two blocks hide the link primary text
 * and swap in the title if the target not
 * has a ``title`` property.
 */

/* In reading view, hide link content */
.markdown-reading-view .data-link-text[data-link-title]
{
    font-size: 0px;
    visibility: hidden;
    font-weight: bold;
}

/* In reading view, show linked title */
.markdown-reading-view .data-link-text[data-link-title]::before
{
    font-size: 16px;
    content: "🖧 " attr(data-link-title);
    visibility: visible;
}

/* The following two blocks reverses the above if the link
 * has a display or alias attribute: ``[[link-path|display-text]]``.
 * From the inspector, it seems that any link with a display text
 * also has the following attributes set: ``data-tooltip-position``
 * and ``aria-label``.
 *
 * It seems to work?
 *
 */

/* In reading view, if there is aria-label/ tool-tip show normal link text */
/* Is this robust? non-empty tooltip means display / alias is given? */
.markdown-reading-view .data-link-text[aria-label]
{
    /* content: attr(data-link-title) !important; */
    /* font-size: 16px !important; */
    visibility: visible !important;
    font-size: 16px;
}
/* In reading view, if there is aria-label/ tool-tip hide title  */
/* Is this robust? non-empty tooltip means display / alias is given? */
.markdown-reading-view .data-link-text[aria-labe]::before
{
    content: none;
}

Remarks

1. The property name can, of course, be changed, and we can get creative/fancy with the rendering as desired.

2. I’ve set it to only do the magic in reading mode. I find it too confusing to use in editor/source mode.

3. I’m confident that the title being swapped in when we want it (i.e., if the alias/display is not given). However, I’m not so sure about the other way. I’m not sure how reliable is the use of the attributes aria-label (or data-tooltip-position) etc.? I don’t think that this is the design/purpose and I may be abusing it.

[PKMian]

Check out the plugin Front Matter Title as it specifically has features relating to displaying of the title: key’s value across Obsidian’s GUI, such as in the Files tab or graph. Its “Note Link” feature may be exactly what you’re looking for.

[jeetsukumaran]

Thanks! However, the plugin you reference changes the link text by adding an alias to the link reflecting the current title. This is not what I am looking for. I want to avoid “baking in” a title as an alias. I want the links to display the title property of the note “live”. So if the title is changed, the links change what they display.

[PKMian]

I see. The plugin doesn’t reflect the title: value in a live manner as it does bake the title into the link as display text, but it can automatically update it to the latest title: value. The benefit of updating the link’s display text is that it would look right if you published your notes online (since plugins aren’t supported by Obsidian Publish yet), or in another Markdown editor. Unfortunately, I don’t know of a way to do what you ask, but I can see some benefit of the link simply rendering the title: value rather than its display text being changed to it.

[a13ph]

If I understand correctly, this snippet could also be customized in following ways?

• work in live editor mode while link is not being edited (when line with link is not being focused)
• prepend the value of a property or dataview field before link text, probably even with space separator between them

The biggest gripe I’ve had with Supercharged links is dynamic display of field values without explicitly listing all possible values for a field using Style Settings. But I haven’t tried manual styling yet, since I’ve found info on that confusing.

[jeetsukumaran]

This is a valid concern. I’ve not found a satisfactory way to publish Obsidian notes directly even without this, though – the handling of internal links when going to pandoc etc. is extremely wonky, especially with citations – so for the time being keep Obsidian as “thought factory” and the actual production/publication is separate.

[jeetsukumaran]

You don’t need to use Style Settings or even create a selector. It’s enough just to install the plugin and ask it to track properties, and then rely on CSS for everything else. There is no need to list all the field values in either case, except if you do want to change styling based on the field value (as opposed to field type), though even then you might get away with expression pattern matching