> ## Documentation Index
> Fetch the complete documentation index at: https://docs.parvej.me/llms.txt
> Use this file to discover all available pages before exploring further.

# Photo Grids

> Create beautiful image layouts with 24 pre-designed templates

# Photo Grids

Insert stunning image galleries with professional layouts directly in your content.

## Overview

Photo grids allow you to display multiple images in visually appealing arrangements. Choose from 24 pre-designed layouts to showcase your work.

## Inserting a Photo Grid

<Steps>
  <Step title="Open Editor">
    Go to any content editor (Blog, Project, Product)
  </Step>

  <Step title="Click Grid Button">
    Click the **Grid** icon (Grid3x3) in the toolbar
  </Step>

  <Step title="Choose Layout">
    Browse 24 layout options and click your preferred one
  </Step>

  <Step title="Add Images">
    For each cell:

    1. Click the empty cell
    2. Choose **URL** or **Upload**
    3. Add your image
    4. Click **Add Image**
  </Step>

  <Step title="Insert">
    Click **Insert Grid** when all cells are filled
  </Step>
</Steps>

## Available Layouts

### Simple Grids (1-5)

| Layout    | Description       | Images |
| --------- | ----------------- | ------ |
| 2 Columns | Side by side      | 2      |
| 3 Columns | Three in a row    | 3      |
| 4 Columns | Four in a row     | 4      |
| 2×2 Grid  | Square grid       | 4      |
| 3×2 Grid  | Two rows of three | 6      |

**Best for:** Simple galleries, before/after comparisons, product showcases

### Asymmetric Layouts (6-10)

| Layout                   | Description             | Images |
| ------------------------ | ----------------------- | ------ |
| Large Left + 2 Right     | Featured image on left  | 3      |
| Large Right + 2 Left     | Featured image on right | 3      |
| 2 Top + 3 Bottom         | Wide top, small bottom  | 5      |
| 3 Top + 2 Bottom         | Small top, wide bottom  | 5      |
| Large Center + 4 Corners | Center focus            | 5      |

**Best for:** Highlighting a main image with supporting images

### Creative Layouts (11-15)

| Layout       | Description                   | Images |
| ------------ | ----------------------------- | ------ |
| Masonry 1    | Tall images on sides          | 4-6    |
| Masonry 2    | Alternating heights           | 4-6    |
| Featured + 3 | One large, three small        | 4      |
| Split + 4    | Two large top, 4 small bottom | 6      |
| Showcase     | Alternating sizes             | 5      |

**Best for:** Portfolio showcases, creative presentations

### Gallery Layouts (16-20)

| Layout      | Description                    | Images |
| ----------- | ------------------------------ | ------ |
| Gallery 1   | Tall left, wide right          | 4      |
| Gallery 2   | Large square with small images | 5      |
| Portfolio 1 | Wide top, tall right           | 4      |
| Portfolio 2 | Mixed sizes                    | 5      |
| Magazine    | Editorial style                | 5      |

**Best for:** Professional portfolios, editorial content

### Special Layouts (21-24)

| Layout      | Description                    | Images |
| ----------- | ------------------------------ | ------ |
| Hero + Grid | Hero image with thumbnails     | 5      |
| Spotlight   | Wide feature with small images | 4      |
| Collage 1   | Artistic arrangement           | 5      |
| Collage 2   | Creative mixed layout          | 6      |

**Best for:** Hero sections, artistic presentations

## Editing Photo Grids

### Change Images

1. Hover over the grid in the editor
2. Click **Settings** icon (gear)
3. Click on the image you want to change
4. Upload or enter new image URL
5. Click **Update Grid**

### Change Layout

1. Click **Settings** on the grid
2. Click **Change Layout**
3. Select new layout
4. Rearrange images if needed
5. Click **Update Grid**

### Delete Grid

1. Hover over the grid
2. Click **Delete** icon (trash)
3. Confirm deletion

## Image Recommendations

### Optimal Sizes

| Use Case         | Recommended Size |
| ---------------- | ---------------- |
| Thumbnail cells  | 400×400px        |
| Wide cells       | 800×400px        |
| Tall cells       | 400×800px        |
| Hero/Large cells | 1200×800px       |

### File Formats

| Format | Best For                           |
| ------ | ---------------------------------- |
| JPG    | Photos, complex images             |
| PNG    | Graphics, transparency             |
| WebP   | Best compression (modern browsers) |

### Tips for Best Results

<Tip>
  Use images with similar color tones for a cohesive look.
</Tip>

<Tip>
  Keep file sizes under 500KB per image for faster loading.
</Tip>

<Tip>
  Use consistent aspect ratios within the same grid when possible.
</Tip>

<Warning>
  Very large images (>2MB) will slow down page loading. Compress before uploading.
</Warning>

## Use Cases

### Portfolio Showcase

Use **Gallery** or **Portfolio** layouts to display your best work with a featured piece.

```
┌─────────────────┬─────────┐
│                 │    2    │
│       1         ├─────────┤
│   (Featured)    │    3    │
│                 ├─────────┤
│                 │    4    │
└─────────────────┴─────────┘
```

### Product Gallery

Use **2×2 Grid** or **3 Columns** for product photos from different angles.

```
┌─────────┬─────────┬─────────┐
│    1    │    2    │    3    │
└─────────┴─────────┴─────────┘
```

### Before/After

Use **2 Columns** for side-by-side comparisons.

```
┌─────────────┬─────────────┐
│   Before    │    After    │
└─────────────┴─────────────┘
```

### Photo Essay

Use **Magazine** or **Collage** layouts for storytelling.

```
┌─────────────────────────────┐
│            Hero             │
├─────────┬─────────┬─────────┤
│    2    │    3    │    4    │
└─────────┴─────────┴─────────┘
```

## Responsive Behavior

All photo grids are automatically responsive:

| Screen Size | Behavior                        |
| ----------- | ------------------------------- |
| Desktop     | Full grid layout                |
| Tablet      | Adjusted spacing, some stacking |
| Mobile      | Stacked or simplified layout    |

<Note>
  Complex layouts may simplify on mobile devices for better viewing experience.
</Note>

## Troubleshooting

### Grid Not Appearing

1. Ensure you clicked **Insert Grid** after adding images
2. Check that all cells have images
3. Refresh the editor

### Images Not Loading

1. Verify image URLs are correct and accessible
2. Check file upload completed successfully
3. Ensure images are publicly accessible

### Layout Looks Wrong

1. Check image aspect ratios match the cell shapes
2. Try a different layout better suited to your images
3. Ensure all cells are filled