Image Grid

Image Grid

An Obsidian plugin that renders images in a responsive CSS grid layout using image-grid code blocks.

Usage

Create a fenced code block with the image-grid language tag and list your images using Obsidian's wiki-link syntax:

```image-grid
![[photo1.png]]
![[photo2.png]]
![[photo3.png]]
```

Configuration

Add optional key: value lines before the image list to customize the grid:

```image-grid
columns: 4
gap: 8
![[photo1.png]]
![[photo2.png]]
![[photo3.png]]
![[photo4.png]]
```

Per-image size

Use the pipe syntax to set a max-width on individual images:

```image-grid
![[photo1.png]]
![[photo2.png|600]]
![[photo3.png]]
```

This sets max-width: 600px on photo2.png.

Lightbox preview

Click any image in the grid to open a full-screen lightbox preview. Click the backdrop or press Escape to dismiss.

Installation

From Obsidian Community Plugins

1. Open Settings > Community plugins
2. Click Browse and search for Image Grid
3. Click Install, then Enable

Manual

1. Download main.js, manifest.json, and styles.css from the latest release
2. Create a folder at <vault>/.obsidian/plugins/image-grid/
3. Copy the downloaded files into that folder
4. Restart Obsidian and enable Image Grid in Settings > Community plugins

Development

# Install dependencies
pnpm install

# Build for production
pnpm run build

# Watch mode
pnpm run dev

# Lint
pnpm run lint

# Lint and auto-fix
pnpm run lint:fix

To test locally, symlink the plugin into a vault:

ln -s /path/to/obsidian-image-grid /path/to/vault/.obsidian/plugins/image-grid

License

MIT