| .gitignore | ||
| README.md | ||
Media Layout (Obsidian)
A plugin that lets you freely arrange videos, images, and audio — and save reusable presets
Break out of Markdown’s linear flow: drag, resize, and position media anywhere on the page in Live Preview. Build galleries, dashboards, and magazine-style layouts. Save the whole composition as a preset, or reuse the same media via clones with independent size/position/background.
Features
- Free move & resize for videos, images, and audio (stable, no “jitter”) in Live Preview.
- Clones — place the same media multiple times with independent:
- position (x/y), size (w/h),
- background color & opacity,
- lock state.
- Presets — save the entire page layout (including clones, backgrounds, locks) and restore in one click.
- Backgrounds:
- Global background & opacity for all media,
- Local per-item background, with “Only for this file” switch to limit styling to the current note.
- Lock / Unlock any item to avoid accidental moves.
- Persistence — layouts (including clones) are restored after reload.
- Localization built-in: de, pl, es, fr, it, be, uk, uz, vi, zh-CN, zh-TW (and expandable).
- Audio UX — resize/position works; handles are invisible but active (clean look).
- Safety — designed to avoid text selection while dragging and to keep cursor behavior stable.
Why this exists
Plain Markdown keeps media glued to the text flow. Media Layout uses a dedicated floating layer and/or clones so you can compose pages visually while your note stays simple and portable.
How to use
-
Enable the plugin.
-
Insert media into a note (video / image / audio).
-
Clone (recommended) or Detach the item.
-
Drag & resize the element to place it precisely.
-
Open the item’s menu to set Background and Opacity; toggle Only for this file to keep styling local.
-
Lock items when the layout looks right.
-
Save a Preset to capture the whole page and Apply it later.
Core concepts
Detach vs Clone
- Detach moves the original media into a floating layer for absolute positioning.
- Clone creates an extra visual instance pointing to the same file, but with its own geometry and styling.
Recommendation: Prefer clones for complex layouts. They’re robust and won’t disturb surrounding text or other plugins.
Important notes & limitations
- Detaching originals can sometimes lead to incorrect placement or visual glitches depending on surrounding content or other plugins.
Best practice: use clones for production layouts — they are the most reliable. - Very heavy pages (many large videos/GIFs) can impact performance — keep file sizes reasonable.
- Aggressive custom CSS or third-party media enhancers may affect overlays/backgrounds.
Settings & options
- Global background & opacity (defaults for all media).
- Local (per-item) background & opacity with Only for this file switch.
- Clone management (create/remove; each clone is independent).
- Presets (save/apply; include clones and styling).
- Reset & restore helpers for quick cleanup.
- Language selection (localization).
Where data is stored
The plugin uses Obsidian’s standard plugin storage (inside your vault’s .obsidian/plugins/media-layout/), keeping:
- page layouts (positions/sizes),
- clone states,
- per-item/local backgrounds & opacity,
- preset definitions.
FAQ
Do clones duplicate files?
No. Clones reference the same media file; only geometry/styling is duplicated.
Will my layout persist after restart?
Yes. Layouts (including clones and presets) are restored automatically.
Can I edit in Reading Mode?
Editing is meant for Live Preview. Reading Mode shows the arranged result; interactions are limited.