English | Deutsch

Bases Image Position

Control image positioning in Obsidian Bases Card Views via frontmatter properties.

✨ 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.

🎯 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:

1. Resolve – The note file is identified via multiple fallback methods
2. Read – Frontmatter is pulled from Obsidian's metadata cache
3. 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:

📦 Installation

From Obsidian Community Plugins (Recommended)

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

Manual Installation

1. Download the latest release from the GitHub releases page
2. Create folder: <vault>/.obsidian/plugins/bases-image-position/
3. Copy manifest.json and main.js into this folder
4. 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.

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

💡 Support

• 🐛 Report a bug
• 🎨 Share design feedback
• 💬 Start a discussion

📝 License

MIT – Free to use and modify.