gjessing1/js-banner
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
A lightweight plugin to display a banner at the top of your notes.
6 commits 1 branch 0 tags 45 KiB
  • JavaScript 91.5%
  • CSS 8.5%
Find a file
Exact
Gjessing1 83dc5532a7 Sync with vault version: max width, local banner downloads 
- Add optional maximum banner width (for ultra-wide monitors)
- Download a banner from a URL into the vault, and a command to
  convert all remote banners in the vault to local files
- Hide properties only in Reading View (replaces "Hide note properties")
- Guard against stale renders when switching notes quickly
- Accept webp, avif and tiff in the image picker
2026-10-28 20:10:19 +00:00
LICENSE Initial commit 2025-06-18 14:06:05 +02:00
main.js Sync with vault version: max width, local banner downloads 2026-10-28 20:10:19 +00:00
manifest.json Add files via upload 2025-06-18 15:23:43 +02:00
README.md Sync with vault version: max width, local banner downloads 2026-10-28 20:10:19 +00:00
styles.css Sync with vault version: max width, local banner downloads 2026-10-28 20:10:19 +00:00

README.md

JS Banner

A lightweight plugin to display a banner image at the top of your Obsidian notes.

Features

  • Display banners from local vault images or remote URLs.
  • Visual, grid-based image selector for local files (png, jpg, gif, bmp, svg, webp, avif, tiff).
  • Download a remote banner into your vault when setting it from a URL.
  • "Download all remote banners to local files" command converts every remote banner in the vault to a local file.
  • Optional maximum banner width, useful on ultra-wide monitors.
  • Global customization via the settings menu.
  • Per-note styling overrides using YAML frontmatter.

Usage and Customization

To add a banner, run the "Set banner" command from the command palette or manually add the banner key to your note's frontmatter.

Plugin Settings

Configure these options globally in Settings > JS Banner.

Setting Description
Banner field name The YAML key for the banner link (default: banner).
Hide properties in Reading View Hides the note's properties section in Reading View when a banner is shown.
Enable rounded corners Applies rounded corners to the banner's frame.
Enable fade effect Applies a gradient fade at the bottom of the banner.
Fade intensity Sets the height of the fade effect.
Enable maximum banner width Constrains and centers the banner.
Maximum banner width Max width in pixels (default: 1720).
Banner download folder Vault folder for downloaded banners (default: banners).

Per-Note Customization (YAML)

Add these keys to a note's frontmatter for specific adjustments.

Key Description
banner-height Sets a custom banner height in pixels (e.g., 300).
banner-type Sets the image fit. cover (default) fills the frame, contain fits the image inside.
banner-x / banner-y Sets the image's focal point from 0 to 1. Affects cover type only.

Example:

---
banner: "[[image.png]]"
banner-height: 400
banner-y: 0.2
---

Installation