# Image Grid

An [Obsidian](https://obsidian.md) 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:

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

### Configuration

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

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

| Option    | Default | Description                  |
| --------- | ------- | ---------------------------- |
| `columns` | `3`     | Number of grid columns       |
| `gap`     | `4`     | Gap between images in pixels |

### Per-image size

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

````markdown
```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](https://github.com/skydiver/obsidian-image-grid/releases/latest)
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

```bash
# 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:

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

## License

[MIT](LICENSE)