Search...Search plugins and themes...
⌘K
Sign in
  • Get started
  • Download
  • Pricing
  • Enterprise
  • Account
  • Obsidian
  • Overview
  • Sync
  • Publish
  • Canvas
  • Mobile
  • Web Clipper
  • CLI
  • Learn
  • Help
  • Developers
  • Changelog
  • About
  • Roadmap
  • Blog
  • Resources
  • System status
  • License overview
  • Terms of service
  • Privacy policy
  • Security
  • Community
  • Plugins
  • Themes
  • Discord
  • Forum / 中文论坛
  • Merch store
  • Brand guidelines
Follow us
DiscordTwitterBlueskyThreadsMastodonYouTubeGitHub
© 2026 Obsidian

Drag Image Auto Arrange

lishuai1993lishuai199330 downloads

Auto-arrange consecutive images into side-by-side rows with drag-to-reorder, resize handles, and draggable dividers, similar to Feishu documents.

Add to Obsidian
  • Overview
  • Scorecard
  • Updates3

Automatically arrange consecutive image embeds into side-by-side rows — like Feishu / Lark documents. Drag to reorder, drag the divider to resize, and each row keeps its own layout across sessions.

Features

  • Automatic rows — consecutive image embeds on adjacent lines are laid out side by side instead of stacking vertically.
  • Drag to reorder — drag an image within a row, or onto another row, to move it.
  • Draggable dividers — drag the divider between two images to shift the width split.
  • Height equalizer — double-click the row's top balance line to make every image in a multi-image row the same height.
  • Corner handles — drag a handle on an image's corner to change its size.
  • Per-image resize — resize a standalone image, or pick a percentage of its natural width from the right-click menu.
  • Alignment — align an image left, center, or right within its row.
  • Rotate / flip — rotate by 90° / 180° and flip horizontally or vertically. The orientation is stored as a parameter on the note line (a readable word such as r90 / fv), so the image file itself is never re-encoded and each change is a single undoable edit. Reset returns the image to its original orientation.
  • Right-click menu — one unified menu for alignment, rotation, resizing, copy, cut, and file operations. Copy and cut put the bitmap on the clipboard together with the image's in-vault reference: pasting inside this vault lands as a ![[…]] link instead of minting a duplicate attachment, while pasting into another vault or app yields the image itself — PNG and JPEG files go over byte-for-byte, lossy formats are re-encoded as JPEG. Cut additionally removes that one reference, and deletes the local file only when nothing else in the vault points at it.
  • Reading Mode support — rows render in Reading Mode too, including each image's rotate/flip orientation; editing operations are greyed out.
  • Vault-wide maintenance — two passes in the settings tab: clear everything the plugin wrote out of every note, or normalise every line it can host into the standard parameter form. Both scan the vault and show you the exact scope before writing.

Installation

From the community plugin directory

Search for Drag Image Auto Arrange in Settings → Community plugins → Browse, then install and enable it.

Manually

Copy main.js, manifest.json, and styles.css into <your vault>/.obsidian/plugins/drag-image-auto-arrange/, then enable the plugin in Settings → Community plugins.

Usage

Write image embeds on consecutive lines to place them in one row:

![[sunset.png]]
![[harbor.png]]
![[market.png]]

The plugin detects the run of image lines, renders them as one row, and writes each member's layout back to the embed parameters as you drag and resize. A row with a single image is sized from the plugin settings until you resize it by hand.

Layout parameters are stored on the embed line itself, so the arrangement survives re-opening the note, syncing, and switching between Live Preview and Reading Mode.

Settings

  • Max images per row — how many consecutive images share one row.
  • Default row height / gap size — base geometry for generated rows.
  • Image extensions — which file extensions count as images.
  • Enable drag reorder / resize / dividers — toggle individual interactions.
  • Log level and file logging — diagnostics for troubleshooting; the release build is silent by default.

Maintenance

The foot of the plugin's settings tab holds two vault-wide passes. Both scan first and show the exact scope — how many notes were read, how many lines matched, how many files are involved — and only write after you confirm. Notes currently open are written through an editor transaction (a single cmd+z undoes the whole note); the rest go through vault.process. Files that fail are counted and named in log.txt.

  • Clear DIAA format (this vault) — puts every image reference the plugin wrote back into Obsidian's own form, so uninstalling leaves nothing behind. An image alone on its line loses its whole parameter run; a reference inside prose, a list or a quote only loses the orientation / alignment words the plugin added, keeping Obsidian's own |width and |widthxheight. Run this before uninstalling; after clearing, disable the plugin immediately.
  • Normalise to the standard form (this vault) — writes the two word slots (orientation, alignment) into every line the plugin can host, so a later rotate is a word-for-word replacement instead of the first write that grows the line's parameter run. Numeric slots are left untouched: a row's share follows from every member's natural pixel size and its fill ratio from the measured layout, neither of which exists before the row first renders, and a number invented here would be pinned as an explicit parameter. A hand-written |400 / |400x300 on a single-image row is kept as a manual width (|1|400).

Both passes are irreversible on notes already saved to disk. While the plugin is enabled, opening or editing a note writes its parameters back on the first frame — so to uninstall, close the open notes first, run Clear DIAA format, then disable the plugin immediately.

Development

npm install
npm run dev     # watch build
npm run build   # type-check + production bundle
npm test        # unit tests

Releases are built and published by the workflow in .github/workflows/release.yml, which runs on any pushed tag and attaches main.js, manifest.json, and styles.css to the created Release.

License

MIT — see LICENSE.


Drag Image Auto Arrange(中文)

自动把连续的图片嵌入排列成并排的多图行,效果类似飞书 / Lark 文档。可拖拽排序、拖拽分隔条调整宽度,每行都会各自记住布局。

功能

  • 自动成行:相邻行上的连续图片嵌入会自动并排显示,而不是逐张纵向堆叠。
  • 拖拽排序:可在行内拖动图片,也可拖到另一行,实现位置调整。
  • 可拖拽分隔条:拖动两张图之间的分隔条,即可改变宽度分配。
  • 顶部均衡线:双击多图行顶部的均衡线,即可快速让行内各图高度对齐。
  • 角点手柄:拖拽图像角点手柄即可改变图像大小。
  • 单图缩放:可缩放独立图片,也可在右键菜单中按原图宽度的百分比选择尺寸。
  • 对齐:可将图片在所在行内左对齐、居中或右对齐。
  • 旋转 / 翻转:支持 90° / 180° 旋转与水平、垂直翻转。朝向以行参数的形式写回笔记(可读词,如 r90 / fv),原图文件自始至终不被重编码,每次操作都是一步可撤销的编辑;重置后回到原始朝向。
  • 右键菜单:对齐、旋转、缩放、复制、剪切与文件操作收敛在同一个菜单中。复制与剪切会把位图写入剪贴板,并一并带上该图在库内的引用:在本库粘贴落成 ![[…]] 链接,而不是另存出一份重复附件;粘到其它仓库或 App 则落成图像本身 —— png / jpg 原样写入,webp、avif 等有损格式转码为 JPEG。剪切还会移除该处引用,并且仅当全库再无其他引用时才删除本地文件。
  • 阅读模式支持:多图行在阅读模式下同样渲染,旋转 / 翻转朝向一并呈现,编辑类操作置灰。
  • 全库格式维护:设置页提供两个全库动作 —— 把插件写入的参数从全部笔记中清除,或把所有可托管的图片行归一化为标准参数格式。两者都先扫描、把改动范围显示给你,确认之后才写入。

安装

从社区插件目录安装

在 设置 → 第三方插件 → 浏览 中搜索 Drag Image Auto Arrange,然后安装并启用。

手动安装

把 main.js、manifest.json、styles.css 复制到 <你的库>/.obsidian/plugins/drag-image-auto-arrange/,然后在 设置 → 第三方插件 中启用。

用法

把图片嵌入写在连续的行上,它们就会进入同一行:

![[sunset.png]]
![[harbor.png]]
![[market.png]]

插件会识别这一串连续的图片行,将其渲染为一行;在你拖拽与缩放的同时,把每个成员的布局写回该嵌入行的参数中。只有一张图的单图行在手动缩放之前,会按插件设置决定尺寸。

布局参数保存在嵌入行本身,因此重新打开笔记、同步、以及在实时预览与阅读模式之间切换后,排版都能保持。

设置项

  • 每行最多图片数:一行最多容纳多少张连续图片。
  • 默认行高 / 间距:生成多图行时的基础几何参数。
  • 图片扩展名:哪些扩展名的文件被识别为图片。
  • 启用拖拽排序 / 缩放 / 分隔条:逐项开关各类交互。
  • 日志级别与文件日志:排障用的诊断开关;发布版默认静默。

维护

插件设置页底部有两个全库动作。两者都是先扫描、把改动范围显示给你(读过多少笔记、命中多少行、涉及多少文件),确认之后才写入。正在编辑器里打开的笔记走编辑器事务(该笔记一次 cmd+z 可整体撤销),其余文件走 vault.process;写失败的文件会计数并在 log.txt 中留痕。

  • 清除 DIAA 格式(本库):把插件写入的图片参数还原为 Obsidian 原生形式,卸载插件后不在笔记里留痕。独处一行的图片清掉整个参数段;正文、列表、引用块里的图片只清插件加上的朝向 / 对齐词,Obsidian 原生的 |宽度、|宽x高 保留。卸载前先执行本动作,清除完成后立即停用插件。
  • 归一化为标准格式(本库):为所有可托管的图片行补上两个词槽(朝向、对齐),此后旋转都是等长替换,而不是首次撑开参数段的那一次写入。数值槽一律不动 —— 份额取决于各成员的自然像素尺寸、填充比取决于实测布局,两者在行首次渲染前都不存在,在这里硬写一个数会被固定为显式参数。单图行手写的 |400 / |400x300 会保留为手动宽度(|1|400)。

两个动作对已保存到磁盘的笔记都不可撤销。插件启用期间,笔记只要被打开或编辑,参数就会在第一帧被重新写回 —— 若要卸载,请先关闭所有打开的笔记,执行「清除 DIAA 格式」,然后立即停用插件。

开发

npm install
npm run dev     # 监听式构建
npm run build   # 类型检查 + 生产构建
npm test        # 单元测试

发布由 .github/workflows/release.yml 中的工作流完成:推送任意 Tag 即触发构建,并把 main.js、manifest.json、styles.css 作为附件上传到新建的 Release。

许可

MIT,详见 LICENSE。

HealthExcellent
ReviewSatisfactory
About
Arrange consecutive image embeds into side-by-side rows and preserve each row's layout across sessions. Drag images to reorder or move between rows, drag dividers and corner handles to resize or equalize heights, and use the right-click menu to align, rotate, flip, copy, cut or edit image files; rows render in Reading Mode.
ImagesEditing
Details
Current version
1.0.2
Last updated
3 days ago
Created
3 months ago
Updates
3 releases
Downloads
30
Compatible with
Obsidian 1.5.0+
Platforms
Desktop only
License
MIT
Report bugRequest featureReport plugin
Author
lishuai1993lishuai1993
GitHublishuai1993
  1. Community
  2. Plugins
  3. Images
  4. Drag Image Auto Arrange

Related plugins

Imagine

A comprehensive image management plugin for managing, inserting, resizing, viewing, and batch processing images.

LanguageTool Integration

Advanced grammar and spell checking, powered by LanguageTool.

Meta Bind

Make your notes interactive with inline input fields, metadata displays, and buttons.

Advanced Tables

Improved table navigation, formatting, and manipulation.

Thino

Quickly capture memos and display them in the sidebar with a heatmap. (Closed source)

Editing Toolbar

The Editing Toolbar is modified from cMenu, which provides more powerful customization settings and has many built-in editing commands to be a MS Word-like toolbar editing experience.

Ink

Handwriting and drawing directly between paragraphs using a digital pen, stylus, or Apple pencil.

Outliner

Work with your lists like in Workflowy or Roam Research.

Hover Editor

Transform the Page Preview hover popover into a fully working editor instance.

Image Captions

Add captions to images with inline Markdown and link support. The caption format is compatible with the Commonmark spec and other Markdown applications.