Screenshot Guide for Documentation

This guide explains how to add screenshots to the documentation pages.

Regenerating all media on demand

From the repository root:

./scripts/refresh_docs_media.sh           # static PNGs + WebM + manifest
./scripts/refresh_docs_media.sh --static  # PNGs only
./scripts/refresh_docs_media.sh --verify-only

See src/docs/SCREENSHOT_AUTOMATION.md for the full reproducibility workflow.

Screenshot Requirements

The documentation includes placeholder markers like:

:::info[Screenshot Needed]
**Screenshot 1:** Description of what to capture
:::

Each marker indicates:

Screenshot number - Reference number for the screenshot
Description - What should be captured in the screenshot

Where to Place Screenshots

Create screenshots directory:
```
src/docs/static/img/screenshots/
```
Name screenshots:
- Use descriptive names matching the screenshot number
- Format: screenshot-{number}-{description}.png
- Example: screenshot-1-case-card-overview.png

Add to documentation: Replace the placeholder marker with:

![Screenshot 1: Case card overview](@site/static/img/screenshots/screenshot-1-case-card-overview.png)

Screenshot Checklist

Gallery landing & intro

Screenshot 0: Gallery landing after login (header, Manage, filters, ≥2 case cards) — screenshot-0-gallery-landing.png

Case Card Documentation (`gallery/case-actions.md`)

Send Workflow Documentation (`send/send-workflow.md`)

Screenshot Guidelines

Quality Requirements

Resolution: Minimum 1920x1080, preferably higher
Format: PNG format for best quality
File Size: Optimize images (aim for < 500KB per screenshot)
Clarity: Ensure text is readable, UI elements are clear

Content Guidelines

Highlight Key Elements: Use arrows, boxes, or annotations to highlight important UI elements
Show Context: Include enough of the interface to provide context
Consistent Style: Use consistent browser/OS theme across screenshots
Remove Sensitive Data: Blur or remove any sensitive information (email addresses, container codes, etc.)

Annotation Tools

Consider using annotation tools to:

Add numbered callouts for key features
Highlight important buttons or fields
Add explanatory text overlays
Draw attention to specific UI elements

Tools for Screenshots

Taking Screenshots

Windows: Snipping Tool, Windows + Shift + S
macOS: Cmd + Shift + 4, or Screenshot app
Linux: Various tools (Flameshot, Shutter, etc.)
Browser Extensions: Full Page Screen Capture, Awesome Screenshot

Editing/Annotating

Free: GIMP, Paint.NET, Photopea (online)
Paid: Adobe Photoshop, Snagit
Online: Canva, Photopea, Remove.bg

Optimization

TinyPNG: Compress PNG files
ImageOptim: Batch optimize images
Squoosh: Google's image compression tool

Workflow

Review Documentation:
- Read the documentation page
- Identify all screenshot placeholders
- Understand what each screenshot should show
Prepare Environment:
- Use a clean test account
- Set up test data (cases, pictures, destinations)
- Use consistent browser/theme settings
Capture Screenshots:
- Follow the checklist above
- Capture in order (easier to track)
- Name files according to the convention
Edit and Annotate:
- Add annotations if needed
- Highlight key elements
- Remove sensitive data
Optimize:
- Compress images
- Ensure reasonable file sizes
- Verify quality is maintained
Add to Documentation:
- Place files in static/img/screenshots/
- Update markdown files with image references
- Remove placeholder markers
Test:
- Build the docs site: npm run build
- Verify all images load correctly
- Check image quality in the built site

Example Screenshot Workflow

Identify Need:

:::info[Screenshot Needed]
**Screenshot 1:** Case card overview showing header bar, terminal badge, container code, date, picture count, and Send button.
:::

Capture:
- Navigate to Gallery
- Find a case card
- Take screenshot (1920x1080 or higher)
- Save as screenshot-1-case-card-overview.png
Edit (if needed):
- Add annotations highlighting key elements
- Blur sensitive data
- Optimize file size
Place File:
- Save to src/docs/static/img/screenshots/screenshot-1-case-card-overview.png

Update Documentation:

![Screenshot 1: Case card overview](@site/static/img/screenshots/screenshot-1-case-card-overview.png)

The case card header contains essential information and quick actions.

Remove Placeholder:
- Delete the :::info Screenshot Needed block

Tips

Batch Capture: Take all screenshots in one session for consistency
Use Test Data: Create dedicated test cases/pictures for documentation
Consistent Browser: Use the same browser and zoom level for all screenshots
Clean State: Start with a clean UI state (no open modals, etc.)
Multiple Attempts: Take multiple versions and choose the best one
Version Control: Keep original screenshots before optimization

Maintenance

Update Screenshots: When UI changes, update corresponding screenshots
Review Regularly: Check that screenshots still match current UI
Remove Obsolete: Delete screenshots for removed features
Document Changes: Note UI changes that affect screenshots

For questions or assistance with screenshots, contact the documentation team.

Regenerating all media on demand​

Screenshot Requirements​

Where to Place Screenshots​

Screenshot Checklist​

Gallery landing & intro​

Case Card Documentation (gallery/case-actions.md)​

Send Workflow Documentation (send/send-workflow.md)​

Screenshot Guidelines​

Quality Requirements​

Content Guidelines​

Annotation Tools​

Tools for Screenshots​

Taking Screenshots​

Editing/Annotating​

Optimization​

Workflow​

Example Screenshot Workflow​

Tips​

Maintenance​