Note Banners

Uses an image from note frontmatter as a banner behind Obsidian's inline title. The banner begins at the top of the note and fades into the note background.

Example

Installation

Community plugins

Install Note Banners from Obsidian's Community plugins browser.

Manual installation

1. Create .obsidian/plugins/note-banners inside your vault.
2. Copy main.js, manifest.json, and styles.css into that folder.
3. Reload Obsidian.
4. Enable Note Banners under Settings > Community plugins.

Frontmatter

The default property is art:

---
banner-pos: 0
art: "[[Attachments/feldon.jpg]]"
---

Embedded notes

Embedded banners and embed titles are both disabled by default. Enable either one under Settings > Community plugins > Note Banners. When enabled, an embedded title follows compatible inline-title styling even when the embedded note has no banner. If both options are enabled and a banner is available, the title is displayed over the banner.

When they are enabled globally, use an embed alias to hide one for a particular embed:

![[Example note|no-t]]
![[Example note|no-title]]
![[Example note|no-b]]
![[Example note|no-banner]]
![[Example note|no-t no-b]]

• no-t or no-title hides the title for that embedded note.
• no-b or no-banner prevents the banner from appearing for that embedded note.

These aliases affect only that embed. They do not change the original note. Separate two aliases with a space when you want to hide both the title and banner.

banner-pos controls the crop for each note. It accepts values from -100 to 100: -100 shows the bottom of the image, 0 is centred, and 100 shows the top. Missing or invalid values use 0; values outside the range are clamped.

Both activation fields are blank by default, so every note with the configured image property can display a banner. Set Activation property to restrict banners to notes containing a particular property. Optionally set Activation value when that property must also contain a particular value. Lists and single values are supported, and tag values may optionally begin with #.

Leave Activation property blank to allow banners on every note. Leave only Activation value blank to activate whenever the selected property exists.

External URLs and Markdown image links are also supported. The first string is used when the property is a list. Notes without a valid image do not receive banner styling.

The main note banner works with Obsidian's inline titles enabled or disabled. When enabled, the title overlays the banner; when disabled, the banner keeps its own space above the note content.

Settings

Banner activation

• Activation property: Optional frontmatter property used to decide which notes receive banners.
• Activation value: Optional value required in the activation property.
• Image property: Frontmatter property containing the banner image. Defaults to art.

Banner appearance

• Banner height: Banner height from 100 to 500 pixels. Defaults to 220 pixels.
• Fade starting point: Where the image begins fading into the note background. Defaults to 48 percent.

Embedded notes

• Show banners in embeds: Disabled by default.
• Show inline titles in embeds: Disabled by default. Obsidian's native Show inline title option must also be enabled.