# Gallery Images

Gallery images show the current source build. Historical release archives retain their original templates.

## Capture Settings

Use the same settings for every theme so images remain comparable:

| Setting | Value |
|---|---|
| Template | **Register Notify** |
| Language | **en-US** |
| View | **Modern** |
| Viewport | **Desktop** |
| Information panel | Collapsed |
| Output | PNG, 600px wide recommended |

Save images as `<theme-name>.png` in this directory, matching the directory name under `themes/`. Each file must be at most **50 KiB**; **10–20 KiB** is preferred. Optimize larger PNGs with tools such as `pngquant` or `optipng`.

## Automated Capture

Generate preview data from the repository root:

```bash
cd tools
go run . preview all
cd qa
npm install
npx playwright install chromium
npm test -- --update-gallery
```

To use installed Chrome or Edge, set `BROWSER_EXECUTABLE_PATH` instead of installing Chromium. The script checks language loading, controls and mobile overflow, saves captures in `build/screenshots/`, then copies them here after enforcing the size limit. Review the resulting images before committing.

Run `npm test` without `--update-gallery` to perform the checks and capture images without changing the committed gallery.

## Manual Capture

1. Run `go run . dev` from `tools/` and open [http://127.0.0.1:3456](http://127.0.0.1:3456). Alternatively, run `go run . preview all` and open [preview/index.html](../../preview/index.html) directly.
2. Select a theme and apply the capture settings above.
3. Capture the rendered email, excluding the preview toolbar and information panel.
4. Save the PNG as `<theme-name>.png`, check its size and repeat for the remaining themes.

When adding a theme, update its gallery entry in both the [English README](../../README.md#style-gallery) and [Simplified Chinese README](../README.zh-CN.md#风格画廊).