obsidian-image-gallery:零配置 masonry 图片画廊,支持水平/垂直布局与灯箱预览

A zero setup masonry image gallery for Obsidian

Branch1Tags3
This repository is empty

奥斯迪安图像画廊

奥斯迪安图像画廊是专为奥斯迪安设计的一个无需设置的砖石布局图像画廊插件。

目录

需求

  • 奥斯迪安(版本 >= 1.1.8)
  • 存储在你的知识库某个位置的本地图片文件夹

安装

奥斯迪安图像画廊可以在奥斯迪安内部安装,与其它社区插件一样,按照社区插件的发现和安装指南操作

使用方法

要在笔记中创建动态画廊,向笔记中添加以下代码块之一(记得自定义路径!):

对于水平砖石布局:

```img-gallery
path: Attachments/Folder
type: horizontal
```

而对于垂直砖石布局:

```img-gallery
path: Attachments/Folder
type: vertical
```

查看设置了解如何微调画廊的一些属性;上述示例是最基本的配置。

在“实时预览”模式下,移动光标离开代码块后将生成画廊。在“源码模式”下,按下cmd+e(或ctrl+e)触发奥斯迪安的笔记预览功能。

奥斯迪安图像画廊动画

1.1.1开始,通过点击画廊中的任一图片可以进入灯箱视图。需要时,点击右上角按钮可在新标签页打开原图。

奥斯迪安图像画廊灯箱视图

设置

设置可在任意顺序下以yaml语法自定义。可选属性默认值如下表所示:

选项 默认值 备选值 必填 描述
path - - 相对于知识库根目录的路径
type horizontal vertical 砖石布局类型
gutter 8 任意数字 图片间的间距,单位像素
radius 0 任意数字 图片边框半径,单位像素
sortby ctime mtime, name 图片排序依据
sort desc asc 排序顺序

仅适用于type=horizontal的选项:

选项 默认值 备选值 必填 描述
height 260 任意数字 所有行的高度,单位像素

仅适用于type=vertical的选项:

选项 默认值 备选值 必填 描述
columns 3 任意数字 桌面视图的列数
mobile 1 任意数字 移动设备的列数

注意事项:

  • 对于path,不需要指定知识库的名称。
  • 需求所述,只接受本地图片。该插件针对特定场景设计:尽可能简单地从图片文件夹创建画廊。
  • 确保要嵌入的图片大小适中:用60张4K照片生成的砖石布局很可能会使应用运行缓慢!

关于画廊的布局方向与其内图片分布的额外说明:直到CSS提供真正的砖石布局,目前垂直版本的排序可能不太稳定。这是因为其元素流是从上到下的,具体见这篇文章了解更多信息。如果排序至关重要,请使用水平版本,尽管有时图片会被裁剪,但排列顺序更加直观。

示例:

奥斯迪安图像画廊示例

更新日志

1.1.1

  • 修复了"在新标签页打开图片"功能的bug

1.1.0

  • 修复了字母排序问题
    • 引入桌面和移动设备的灯箱视图
    • 在灯箱中增加“在新标签页打开图片”的按钮
    • 修正了README.md的大小写问题,确保奥斯迪安能正确获取文件

致谢

头部的所有照片由不同摄影师拍摄,并可在Unsplash找到。

许可协议

MIT许可协议

联系方式

Introduction

A zero setup masonry image gallery for Obsidian

Customize your domain