45 lines
1.9 KiB
Markdown
45 lines
1.9 KiB
Markdown
# 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#风格画廊).
|