# Screenshot Capture Guide

Quick reference for capturing the 4 required screenshots for WordPress.org.

## Prerequisites

- WordPress site running at: https://gtl-wp.ddev.site
- GTL Maps plugin active
- At least 1 route with GPX uploaded
- At least 2-3 POIs created
- Admin access ready

---

## Screenshot 1: Backend Route Editor

**File:** `screenshot-1.png`  
**Description:** Backend route editor showing GPX upload meta box with statistics

### Steps:
1. Login to WordPress admin: https://gtl-wp.ddev.site/wp-admin
2. Navigate to **Routes → All Routes**
3. Click **Edit** on an existing route (or create new one with GPX uploaded)
4. Scroll to show the **GPX Upload Meta Box**
5. Ensure these are visible:
   - GPX file name/upload field
   - Computed statistics (distance, elevation gain/loss)
   - Any map preview or route data
   - Route title and content area

### Screenshot Settings:
- **Browser:** Full screen or maximized window
- **Zoom:** 100% (or 90% if content doesn't fit)
- **What to include:** Main content area (can exclude WordPress admin sidebar if needed)
- **Tool:** Cmd+Shift+4 (Mac) or PrtScn (Windows), then select area

### Post-Capture:
- Crop to remove browser chrome (address bar, bookmarks)
- Ensure no personal data visible (email addresses, etc.)
- Save as `screenshot-1.png` at 1280px wide minimum

---

## Screenshot 2: Frontend Interactive Map

**File:** `screenshot-2.png`  
**Description:** Frontend map with elevation profile and POI markers

### Steps:
1. Navigate to public route URL (e.g., https://gtl-wp.ddev.site/route/sample-route/)
2. Wait for map to fully load
3. Adjust map zoom to show entire route clearly
4. Ensure elevation profile is visible below map
5. Check that POI markers appear on map (if configured)
6. Scroll to position map + elevation chart in viewport together

### Screenshot Settings:
- **Browser:** Incognito/private mode (shows visitor view without admin bar)
- **Zoom:** 100%
- **What to include:** 
  - Full interactive map
  - Route line clearly visible
  - Elevation profile chart
  - POI markers (if available)
  - Category filters (if visible)
- **Exclude:** Site header/footer if they distract from plugin content

### Ideal Composition:
```
┌────────────────────────────────┐
│                                │
│   [Interactive Map Area]       │ ← Route line visible
│   - Route path in color        │ ← 2-3 POI markers
│   - Zoom controls              │
│                                │
├────────────────────────────────┤
│   [Elevation Profile Chart]    │ ← Elevation graph
│   ▁▂▃▅▇▅▃▂▁                   │
└────────────────────────────────┘
```

### Post-Capture:
- Crop tightly around map and elevation chart
- Ensure route is prominent and colorful
- Save as `screenshot-2.png`

---

## Screenshot 3: POI Management Screen

**File:** `screenshot-3.png`  
**Description:** POI admin list showing categories, icons, and associations

### Steps:
1. Login to WordPress admin
2. Navigate to **POIs → All POIs**
3. Ensure at least 3-5 POIs are listed
4. Verify POI categories are assigned and visible
5. Check if custom category icons appear (if configured)
6. Scroll to show the POI list table clearly

### Screenshot Settings:
- **What to include:**
  - POI list table with columns:
    - Title
    - Categories (with icons if available)
    - Coordinates
    - Associated routes
    - Date
- **What to highlight:**
  - Custom category icons
  - Multiple POIs
  - Association with routes

### Alternative (if list view isn't interesting):
Capture the **Edit POI** screen showing:
- POI title and content editor
- Category selector with icon preview
- Coordinate input fields (lat/long)
- Custom fields or meta boxes
- Route association display

### Post-Capture:
- Crop to show main content table
- Ensure category icons are visible
- Save as `screenshot-3.png`

---

## Screenshot 4: Settings Page

**File:** `screenshot-4.png`  
**Description:** Plugin settings showing configuration options

### Steps:
1. Login to WordPress admin
2. Navigate to **Settings → GTL Maps** (or wherever your settings page is)
3. Scroll to show main configuration options
4. Ensure settings are filled out (not default/empty values)

### Screenshot Settings:
- **What to include:**
  - Map tile provider selection
  - POI association radius setting
  - Display options
  - Default map configuration
  - Any other key settings
- **Configuration tip:** Set some values first so page doesn't look empty

### Post-Capture:
- Crop to settings panel area
- Show at least 4-5 settings options
- Save as `screenshot-4.png`

---

## General Screenshot Tips

### Quality Standards:
- **Minimum width:** 1200px (recommended 1280px)
- **Aspect ratio:** 4:3 or 16:9
- **Format:** PNG (for sharp text) or JPG at 90% quality
- **File size:** Under 500KB each (use TinyPNG to compress)

### Taking Screenshots:

**macOS:**
- Full screen: `Cmd + Shift + 3`
- Selected area: `Cmd + Shift + 4`
- Window: `Cmd + Shift + 4`, then press `Space`, click window

**Windows:**
- Full screen: `PrtScn` (or `Win + PrtScn`)
- Selected area: `Win + Shift + S`
- Use Snipping Tool for more control

**Linux:**
- Full screen: `PrtScn`
- Selected area: `Shift + PrtScn`
- Use GNOME Screenshot or Spectacle

### Screenshot Tools (Optional):

**Free:**
- **CleanShot X** (Mac) - Best for annotations
- **Lightshot** (Win/Mac) - Quick and easy
- **ShareX** (Windows) - Powerful and free
- **Flameshot** (Linux) - Feature-rich

**Paid:**
- **Snagit** ($50) - Professional screenshots + editing
- **Droplr** - Screenshot + annotation + sharing

---

## Post-Processing Checklist

After capturing all 4 screenshots:

- [ ] All screenshots are at least 1200px wide
- [ ] File names match exactly: `screenshot-1.png` through `screenshot-4.png`
- [ ] No personal information visible (emails, names, etc.)
- [ ] Text is readable and sharp
- [ ] Plugin features are prominently displayed
- [ ] Consistent styling/theme across all screenshots
- [ ] File sizes are under 500KB each
- [ ] Screenshots show plugin in use (not empty/default state)

---

## Image Optimization

Before uploading, compress your screenshots:

1. **TinyPNG** (https://tinypng.com)
   - Drag and drop PNG files
   - Download compressed versions
   - Reduces file size by 50-70% without quality loss

2. **Squoosh** (https://squoosh.app)
   - More control over compression
   - Compare before/after
   - Works offline (PWA)

3. **Command Line (ImageMagick):**
   ```bash
   # Resize and optimize PNG
   convert screenshot-1.png -resize 1280x960 -quality 95 screenshot-1-optimized.png
   
   # Convert to optimized JPG
   convert screenshot-1.png -resize 1280x960 -quality 90 screenshot-1.jpg
   ```

---

## Final File Structure

After creating all screenshots, your directory should look like:

```
.wordpress-org/
├── README.md                    (existing)
├── DESIGN-SPECS.md             (existing)
├── SCREENSHOT-GUIDE.md         (this file)
├── banner-772x250.png          (to create)
├── banner-1544x500.png         (to create)
├── icon-128x128.png            (to create)
├── icon-256x256.png            (to create)
├── screenshot-1.png            ✓ Backend route editor
├── screenshot-2.png            ✓ Frontend map
├── screenshot-3.png            ✓ POI management
└── screenshot-4.png            ✓ Settings page
```

---

## Need Help?

**Can't access WordPress admin?**
```bash
# Start DDEV
ddev start

# Access site
open https://gtl-wp.ddev.site/wp-admin
```

**Forgot admin password?**
```bash
# Reset password via WP-CLI
ddev exec wp user update admin --user_pass=newpassword --path=/var/www/html/web
```

**Sample routes not showing?**
- Check that GTL Maps plugin is active
- Navigate to Routes → Add New
- Upload a sample GPX file from `/sample-data/` directory

---

**Next:** After capturing screenshots, proceed to icon and banner design using `DESIGN-SPECS.md`