Obsidianでdataviewjsを使って特定のディレクトリにある画像をタイル表示する

上記の記事の方法で取得したpathの使い道として。

たとえば、Assetsに入っている画像の一覧をタイル表示したい場合、dataviewjsのコードブロックに以下のようなコードを入れると、画像がきれいに並びます。

```dataviewjs
const divElement = dv.el("div", "");
const exts = ["jpg", "jpeg", "png", "gif"];
const assetDir = "Assets";
const vaultDir = app.vault.adapter.getResourcePath("").match(new RegExp(`(.*${app.vault.getName()})`))[0];

function getSortedImgFilesInDirectory(directoryPath) {
  return app.vault.getFiles()
    .filter(file => file.path.startsWith(directoryPath) && exts.includes(file.extension))
    .sort((a, b) => b.stat.mtime - a.stat.mtime);
}

const assets = getSortedImgFilesInDirectory(assetDir);

divElement.innerHTML = `<div class=gallery-container style='display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));grid-gap:2px;'>
  ${assets.map(asset => `<div class=gallery-element style='max-height:90px'><a class=internal-link href='${asset.path}'><img src='${vaultDir}/${asset.path}' style='width:100%;height:100%;object-fit: cover;'></a></div>`).join("\n")}
</div>`;
```

こんな感じに。

画像の大きさを調整したいときは、

<div class=gallery-container style='display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));grid-gap:2px;'>

のminmaxのピクセルの部分で横幅を、

<div class=gallery-element style='max-height:90px'>

のmax-heightの部分で高さを調整できます。

画像が綺麗に並んだからといって、永遠の命を得られるわけではないですが、まあ、何かの役には立つんじゃないですか。