Wikipedia-style Infobox Plugin

Infobox Plugin for Obsidian

  • Initial problem : many notes contain properties that are unreadable (e.g. long URLs or images) or appear out of context). And high value properties, like [[links to related notes]], are often in an inconsistent order of sometimes long lists of different properties. This makes using the properties section inconsistent between notes, navigating the links within properties and reading useful property information cumbersome.
  • An Infobox Plugin would automatically standardise the display of a note’s high value properties and links in a clean, informative Wikipedia-style infobox.
  • Key uses:
    • standardised display of navigation to related or parent notes : e.g. Parent or Related notes, or in daily and weekly notes navigate to Yesterday or tomorrow notes, or Last week.
    • view important information relating to the note
    • display an image and its caption
  • Compelling reasons to develop this plugin
    • this plugin would standardise the ideas of Nick Milo who uses “Up” links at the top of his notes (Linking Notes Like a Pro - Linking Your Thinking)
    • this plugin would be broadly very popular, given Nick’s popularisation of Up links and community enthusiasm for aesthetic notes.
    • this plugin idea incorporates two of the core features of Obsidian - linking related notes and modulation of YAML properties.
    • the development of this pugin would be very modular, and an early version would be highly useful and likely to be stable. However, I can imagine that the planned release of dynamic table views using note properties may provide developers a more solid foundation from which to build this plugin.

Basic Functionality

  1. Infobox Display:
    • the plugin would parse YAML properties from a note and display them in an infobox.
  2. Default positioning:
    • default static positioning of the Infobox at the top-right of the note, not sticky.
  3. Settings Panel (suggestions for version1):
    • toggle on/off note infobox.
    • define which properties are navigation/link type properties. The plugin will display navigation type properties at the top of the Infobox (perhaps under a heading “Navigation”).
    • define globally which notes would display the Infobox (e.g. all notes, notes with specific property/ies, notes with specific tag)
  4. Advanced settings and features (suggestions for version 2+):
    • define which properties are included globally (e.g. all properties excluded by default and user defines included properties), and the order of display of the properties.
    • implement sidebar infobox and allow toggle on/off.
    • customise the infobox location (ie left, sticky to the top of the note).
    • customise the appearance of property name or property value (font size, bold, italics).
    • Note specific settings : rarely a user may want to define different settings to a specific note. e.g. disable Infobox on a specific note. This could be achieved by defining in the note’s properties an infobox property and nested values to apply different settings specifically to the active note, (e.g. include different properties). (Limitation, to my understanding, Obsidian.md doesn’t support nested YAML)

References:

I’m not opposing your idea, but I would like to mention two relevant things.

Long notes in Obsidian is partially loaded

I once tried making a info box using dataview, and found it to work for smaller notes, but soon discovered that for the longer notes Obsidian unloaded the part with the infobox in favor of the currently displayed parts of the file.

A plugin would have to counter that somehow. It can be done, but it’s something to be aware of.

Pinning a document to the side pane

I’ve got a few notes pinned in my right side pane. One which displays all my running tasks, and one displaying various info on the current file similar to your idea.

So while you are waiting for someone to implement your idea, you could consider doing the same and display all your wanted information in a separate note linked to the active note.

Not to shill, but I like JUST made a thread about a snippet that does this! A Snippet that steals the callout float functionality from BlueMoonDragon's wonderful Wikipedia Theme

It’s not quite everything you’ve laid out here, but its sorta close enough?

1 Like

Thanks for the replies :slight_smile:

I just realised that I can achieve half of what I want with CSS.

By turning off the display of specific property fields/keys. (Or rather, turning off all data-property-keys, then manually choosing which to turn back on). And then I bind this snippet to a hotkey using the Snippet Commands plugin.

The Prism theme has nice Properties appearance.

Limitations

  • adding a new property can sometimes be finicky - could switch to source mode.
  • order of properties is as per the text in the note, so “up” and “related” properties are not prioritised at the top of the list.
  • no image display
  • currently poor native obsidian handling of wikilink style links in the properties frontmatter [this style link](www.examplelink.com/doesnotrendernicelyinObsidian)
  • related to above, the Auto Link Fetcher plugin doesn’t function in properties Provide support for Obsidian 1.4 new Frontmatter · Issue #82 · zolrath/obsidian-auto-link-title · GitHub
  • needs testing in obsidian publish

Click here to go to the full CSS custom styling - GitHub

  • the basic turn off/on property keys is in the css below

.metadata-property{
    display: none;
}
.metadata-property:is(
    [data-property-key=""],
    [data-property-key="up"],
    [data-property-key="related"],
    [data-property-key="tags"], 
    [data-property-key="rating"],
    [data-property-key="priority"]
    ) {
        display: inherit;
    }

without the snippet, all properties are shown:

with the snippet and Prisum theme, the properties are cleaned up, “up” and “related” properties are large, and the last two “test property” properties are hidden


@holroy : thanks for the info re partially loading on big pages. I certainly wouldn’t want it to be as fragile like you think it may be.

@hu4d : thanks for the input. I am sorry, I must not have adequately described my idea, because that was not what I was seeking. Thanks anyway!

thanks to Prism

2 Likes

2 Likes