Bases Image Position

✨ Features

By default, cover images in Bases card views are centered. This plugin lets you adjust the position per note — useful when the subject of an image is off-center and gets cropped out.

🖼️ Position Presets

Quickly set the focal point of cover images using simple preset values — no calculations required.

Preset	Description
`center`	Center (default)
`top`	Top center
`bottom`	Bottom center
`left`	Left center
`right`	Right center
`top left`	Top left corner
`top right`	Top right corner
`bottom left`	Bottom left corner
`bottom right`	Bottom right corner

🎯 Precise Offsets

For fine-grained control, position images using exact offset values:

---
image-offset-x: 30%
image-offset-y: 70%
---

Supported units: %, px, em, rem, vh, vw. Plain numbers are treated as pixels (30 → 30px).

Note: Offset properties take priority over image-position presets. If both are set, offsets win.

⚙️ Configurable Property Keys

Rename the frontmatter properties to fit your workflow — fully adjustable in plugin settings without touching your notes.

🧠 How It Works

The plugin uses a MutationObserver to watch for Bases card elements in the DOM. When a card appears:

Resolve – The note file is identified via multiple fallback methods
Read – Frontmatter is pulled from Obsidian's metadata cache
Apply – A background-position style is set on the card's cover element

File Path Resolution

Cards are resolved to vault files using these fallbacks in order:

1. data-path attribute     →  Direct attribute on card element
2. file.path property      →  Displayed property within the card
3. Internal link href      →  a.internal-link element
4. data-href attribute     →  Fallback link attribute
5. Title matching          →  Match against filenames or frontmatter titles

📑 Usage

Preset Positions

---
image-position: top
---

Precise Offsets

---
image-offset-x: 30%
image-offset-y: 70%
---

Both properties can be used independently or combined.

⚙️ Configuration

Open Settings → Community Plugins → Bases Image Position:

Setting	Description	Default
Image position property	Frontmatter key for preset positions	`image-position`
Image offset X property	Frontmatter key for horizontal offset	`image-offset-x`
Image offset Y property	Frontmatter key for vertical offset	`image-offset-y`
Debug mode	Enable console logging for troubleshooting	`false`

📦 Installation

From Obsidian Community Plugins (Recommended)

Open Settings → Community Plugins
Click Browse and search for "Bases Image Position"
Click Install, then Enable

Manual Installation

Download the latest release from the GitHub releases page
Create folder: <vault>/.obsidian/plugins/bases-image-position/
Copy manifest.json and main.js into this folder
Reload Obsidian and enable the plugin under Settings → Community Plugins

📋 Requirements

Obsidian 1.9.10 or later (Bases was introduced in this version)

🛠 Development

Setup

git clone https://github.com/LucEast/obsidian-bases-image-position.git
cd obsidian-bases-image-position
npm install

Build

npm run dev      # Watch mode – auto-rebuild on changes
npm run build    # Production build with type checking

Architecture

See CLAUDE.md for development guidelines and architecture overview.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Fork the repository
Create your feature branch (git checkout -b feature/amazing-feature)
Commit your changes using Conventional Commits (git commit -m 'feat: add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

💡 Support

📝 License

MIT – Free to use and modify.

Bases Image Position

Description

Reviews

Stats

Latest Version

Changelog

README file from