Screenshot audit and refresh program (master)

Summary

A repo-wide audit of every screenshot in static/img/ and every /img/... reference in docs/ revealed widespread problems:

• 147 image files are tracked, but only 98 unique paths are referenced from docs/ — and many of those single paths are reused for dozens of unrelated concepts.
• At least 32 files are byte-for-byte duplicates of each other (same MD5 hash) saved under different names.
• At least 4 walkthroughs (Zapier, Stripe, PayPal, Customer account page) currently use a single screenshot as a placeholder for every step.

This issue tracks the program of work. Each focused area has its own child issue (linked below).

Goal

Every screenshot in the docs should:

1. Show the actual UI being described.
2. Be unique per concept (no recycled placeholder).
3. Be cropped/sized to highlight the relevant control, not buried in chrome.
4. Be reasonably small (file size + image dimensions) so the docs site stays fast.

Capture environment

The dev WordPress used to take new screenshots:

• URL: http://wordpress.local:8080
• Username: admin
• Password: admin
• Plugin: Ultimate Multisite (current main build) active on the network.

Open the login page at http://wordpress.local:8080/wp-login.php, sign in, then go to My Sites → Network Admin → Ultimate Multisite to reach every screen referenced in the docs.

If wordpress.local:8080 is not reachable from your machine, ask in the issue thread for access (a staging clone can be provided).

Capture standards

Recommended capture tools

• Linux: Flameshot (flameshot gui), GNOME Screenshot, or gnome-screenshot -w for a window.
• macOS: Cmd + Shift + 4, then space, then click the browser window. To remove window shadows: defaults write com.apple.screencapture disable-shadow -bool true.
• Cross-platform: Playwright/Chromium headed: open http://wordpress.local:8080/wp-admin/network/admin.php?page=wp-ultimo, resize window to 1280 × 800 via the OS or DevTools device toolbar, then capture.

For full reproducibility you can drive the capture from a tiny Playwright script (1280 × 800 viewport, deviceScaleFactor 1) — useful if you’re doing many at once. Ask in this issue if you want a starter script.

Filename hygiene

• Never paste a screenshot with macOS’s default name Screenshot 2026-… PM.png into commits — rename to the target path first.
• On macOS, the AM/PM in the default filename contains a U+202F narrow no-break space which breaks many tools. Rename to ASCII before committing.

Audit findings

A. Exact byte-identical duplicates (same file content, different names)

These were verified with md5sum. The recycled name almost always implies a screenshot that was never actually captured.

Total: 32 files that should collapse to ~10 distinct shots.

B. One screenshot reused for many concepts inside one doc (placeholder pattern)

C. Cross-doc placeholder reuse (heaviest offenders)

Workflow per child issue

For each linked child issue:

1. Open wordpress.local:8080, log in as admin / admin.
2. Re-create / open the screen described in the doc text.
3. Capture per the standards table above (1280×800, tight crop, < 200 KB).
4. Save to the exact path listed in the issue (overwrite existing file — keep the filename).
5. If the issue says "split into N shots", add the new filenames to static/img/.../ and update the markdown references in the listed docs/... file accordingly.
6. Run npm start, visit the doc page, and confirm every shot renders and matches the surrounding text.
7. Commit with a message like docs(screenshots): refresh <area> per issue #<N> and open a PR referencing the issue.

Child issues

• #65 — Screenshots: Zapier integration walkthrough (14 placeholders)
• #66 — Screenshots: Stripe payment gateway walkthrough (13 placeholders)
• #67 — Screenshots: PayPal payment gateway walkthrough (5 placeholders)
• #68 — Screenshots: Customer account page (16 placeholders)
• #69 — Screenshots: Product limitation tabs (9 identical duplicates)
• #70 — Screenshots: Network admin dashboard widgets (7 identical duplicates)
• #71 — Screenshots: Settings → Payments tabs (3 identical duplicates)
• #72 — Screenshots: Checkout form editor flow (heavy reuse)
• #73 — Screenshots: Customizing the registration form (depends on #72)
• #74 — Screenshots: Webhooks setup walkthrough
• #75 — Screenshots: Installation wizard (1 duplicate + verify currency)
• #76 — Screenshots: UM analytics dashboard (1 duplicate)
• #77 — Screenshots: Site templates documentation

How this audit was done

# All tracked images
git ls-files | grep -iE '\.(png|jpg|jpeg|gif|webp)$'

# Exact-duplicate detection
find static/img -type f -name '*.png' -exec md5sum {} \; | sort | uniq -d -w 32

# Reference counts per image
grep -rohE '/img/[^)" ]+\.png' docs/ | sort | uniq -c | sort -rn

# Image dimensions / file sizes
find static/img -name '*.png' -exec file {} \;

Future work (not yet ticketed)

The audit also found heavy reuse in the following areas, which are smaller scope but still worth fixing:

• VAT / Tax handling (tax-handling.md) — settings-taxes.png used as the VAT add-on install screenshot.
• Discount codes (creating-discount-codes.md) — discount-codes-list.png re-used for save / active / advanced screens.
• Domain mapping (how-to-configure-domain-mapping.md) — domains-list.png used for several different screens.
• WooCommerce add-on (addons/woocommerce/index.mdx) — uses addons-page.png and settings-payment-gateways.png for different steps.
• GoCardless / PayFast / Language Selector / Site Exporter / Admin Page Creator add-on docs — each has 1–2 shots that could be more specific.
• Touring the admin panel (touring-the-admin-panel.md) — verify each linked screen still matches the current UI.

These can be ticketed as needed once the high-impact issues above are landed.

Start with one of the linked child issues (#65–#77), then read its listed docs file and inspect the referenced images under static/img/. Follow the capture standards and run npm start to verify the documentation page; the selected child issue is done when its screenshots, references, and rendering match the documented workflow.