# Visual Assets Creation Checklist

Use this checklist to track your progress creating all WordPress.org visual assets.

## Required Assets Status

### Icons (REQUIRED)
- [ ] `icon-128x128.png` - Standard resolution icon
- [ ] `icon-256x256.png` - Retina resolution icon

**Design Notes:**
- Simple map pin + route line concept
- Use brand colors: `#2C5F8D` (blue), `#FF6B35` (orange)
- Must be recognizable at 32×32px
- Flat design, 2-3 colors maximum

**Tools:** Canva (free), Figma, or Adobe Illustrator  
**Reference:** See `DESIGN-SPECS.md` Section 1

---

### Banners (REQUIRED + Recommended)
- [ ] `banner-772x250.png` - Standard resolution banner (REQUIRED)
- [ ] `banner-1544x500.png` - Retina resolution banner (RECOMMENDED)

**Design Notes:**
- Left 40%: Interactive map screenshot
- Right 60%: Plugin name, tagline, 3 key features
- Show plugin in action with real screenshot
- Professional, clean design

**Tools:** Canva template, Photoshop, or Figma  
**Reference:** See `DESIGN-SPECS.md` Section 2

---

### Screenshots
- [ ] `screenshot-1.png` - Backend route editor with GPX meta box
- [ ] `screenshot-2.png` - Frontend map with elevation profile
- [ ] `screenshot-3.png` - POI management screen (optional but recommended)
- [ ] `screenshot-4.png` - Settings page (optional but recommended)

**Capture Notes:**
- All must be at least 1200px wide (recommended 1280px)
- PNG format for sharp text
- Under 500KB file size each
- Show real plugin usage, not empty states

**Tools:** System screenshot tools + TinyPNG for compression  
**Reference:** See `SCREENSHOT-GUIDE.md`

---

## Step-by-Step Workflow

### Phase 1: Capture Screenshots (Easiest First)
These use real WordPress admin screens.

#### Step 1.1: Prepare WordPress Environment
- [ ] Start DDEV: `ddev start`
- [ ] Verify GTL Maps is active: `ddev exec wp plugin list --path=/var/www/html/web`
- [ ] Ensure test data exists:
  - [ ] At least 1 route with GPX uploaded
  - [ ] At least 3-5 POIs created
  - [ ] POI categories with custom icons (if available)
- [ ] Reset admin password if needed: `ddev exec wp user update admin --user_pass=password --path=/var/www/html/web`

#### Step 1.2: Screenshot 1 - Backend Route Editor
- [ ] Login to admin: https://gtl-wp.ddev.site/wp-admin
- [ ] Go to Routes → Edit existing route
- [ ] Capture GPX meta box with statistics visible
- [ ] Save as `screenshot-1.png` at 1280px wide
- [ ] Compress with TinyPNG (target: <500KB)
- [ ] Move to `.wordpress-org/screenshot-1.png`

#### Step 1.3: Screenshot 2 - Frontend Map
- [ ] Open route public URL in incognito/private window
- [ ] Wait for map to fully load
- [ ] Zoom to show route clearly
- [ ] Ensure elevation profile is visible
- [ ] Capture map + elevation chart together
- [ ] Save as `screenshot-2.png` at 1280px wide
- [ ] Compress with TinyPNG
- [ ] Move to `.wordpress-org/screenshot-2.png`

#### Step 1.4: Screenshot 3 - POI Management
- [ ] Go to POIs → All POIs in admin
- [ ] Ensure at least 3-5 POIs listed
- [ ] Show categories and custom icons
- [ ] Capture POI list table
- [ ] Save as `screenshot-3.png`
- [ ] Compress with TinyPNG
- [ ] Move to `.wordpress-org/screenshot-3.png`

#### Step 1.5: Screenshot 4 - Settings Page
- [ ] Go to Settings → GTL Maps
- [ ] Ensure settings have values (not empty)
- [ ] Capture settings panel
- [ ] Save as `screenshot-4.png`
- [ ] Compress with TinyPNG
- [ ] Move to `.wordpress-org/screenshot-4.png`

**Screenshots Complete!** ✓

---

### Phase 2: Design Icon (Second Priority)
The icon sets the visual direction for the banner.

#### Step 2.1: Choose Design Tool
- [ ] Option A: Canva (easiest, free) - https://canva.com
- [ ] Option B: Figma (professional, free) - https://figma.com
- [ ] Option C: Adobe Illustrator (professional, paid)
- [ ] Option D: Hire designer on Fiverr ($10-30)

#### Step 2.2: Create Icon Design
- [ ] Create 256×256px canvas/frame
- [ ] Add 20px padding on all sides (236×236px safe area)
- [ ] Design concept: Map pin + route line or elevation profile
- [ ] Use brand colors: 
  - Primary: `#2C5F8D` (blue)
  - Accent: `#FF6B35` (orange)
  - Optional: `#4A9F4D` (green)
- [ ] Keep design simple (must work at 32×32px)
- [ ] Test at small size (zoom out)

#### Step 2.3: Export Icon Files
- [ ] Export as PNG with transparency
- [ ] Export at 256×256px → save as `icon-256x256.png`
- [ ] Scale down to 128×128px → save as `icon-128x128.png`
- [ ] Verify file sizes (<50KB each)
- [ ] Move both to `.wordpress-org/` directory

**Icon Complete!** ✓

---

### Phase 3: Design Banner (Final, Most Complex)
Now that you have screenshots and icon, create the banner.

#### Step 3.1: Prepare Assets
- [ ] Have `screenshot-2.png` (frontend map) ready
- [ ] Have icon design available
- [ ] Decide on tagline: "Beautiful cycling routes with GPX elevation profiles" or customize

#### Step 3.2: Choose Design Tool
- [ ] Canva: Search "1544x500 banner" template
- [ ] Figma: Create 1544×500px frame
- [ ] Photoshop: New 1544×500px document, 72 DPI

#### Step 3.3: Design Banner Layout
- [ ] Create 1544×500px canvas
- [ ] Import screenshot as left background (0-617px)
- [ ] Add semi-transparent overlay on left if needed
- [ ] Create right section (617-1544px) with white/light background
- [ ] Add plugin name "GTL Maps" (72pt, bold)
- [ ] Add tagline below name (24pt)
- [ ] Add 3 key features with icons:
  - 🗺️ Interactive Leaflet Maps
  - 📈 Elevation Profiles & Stats
  - 📍 Points of Interest
- [ ] Ensure text is readable at small sizes
- [ ] Use brand colors for accents

#### Step 3.4: Export Banner Files
- [ ] Export at 1544×500px as PNG → `banner-1544x500.png`
- [ ] Scale down to 772×250px as PNG → `banner-772x250.png`
- [ ] Compress with TinyPNG (target: <200KB each)
- [ ] Verify text is still readable in 772×250 version
- [ ] Move both to `.wordpress-org/` directory

**Banner Complete!** ✓

---

## File Validation

After creating all files, run this checklist:

### File Naming
- [ ] All files named exactly (case-sensitive):
  - `banner-772x250.png`
  - `banner-1544x500.png`
  - `icon-128x128.png`
  - `icon-256x256.png`
  - `screenshot-1.png`
  - `screenshot-2.png`
  - `screenshot-3.png`
  - `screenshot-4.png`

### File Specifications
- [ ] All files are PNG format (not JPG, unless acceptable)
- [ ] Icons are 128×128 and 256×256 pixels
- [ ] Banners are 772×250 and 1544×500 pixels
- [ ] Screenshots are at least 1200px wide
- [ ] All file sizes are reasonable:
  - Icons: <50KB each
  - Banners: <200KB each
  - Screenshots: <500KB each

### Quality Check
- [ ] All images are sharp and clear
- [ ] Text is readable at display sizes
- [ ] No personal/sensitive information visible
- [ ] Colors are consistent across assets
- [ ] Plugin features are prominently shown
- [ ] Professional appearance

---

## Git Commit

After all files are created and validated:

```bash
# Navigate to plugin directory
cd /Users/mario.perrotta/Development/gtl.ddev.site/web/wp-content/plugins/gtl-maps

# Check status
git status

# Add all assets
git add .wordpress-org/

# Commit with descriptive message
git commit -m "Add WordPress.org visual assets (icons, banners, screenshots)"

# Push to repository
git push origin main
```

---

## Deployment Verification

The assets will be deployed automatically via GitHub Actions to the WordPress.org SVN `/assets/` directory.

**Verify deployment configuration:**
- [ ] Check `.github/workflows/deploy.yml` includes asset deployment
- [ ] Verify `10up/action-wordpress-plugin-deploy` action is configured
- [ ] Ensure `.wordpress-org` directory is NOT in `.gitignore` exclusions

**After deployment:**
- Assets appear at: `https://ps.w.org/gtl-maps/assets/`
- Banner: `https://ps.w.org/gtl-maps/assets/banner-772x250.png`
- Icon: `https://ps.w.org/gtl-maps/assets/icon-128x128.png`
- Screenshots: `https://ps.w.org/gtl-maps/assets/screenshot-1.png`

---

## Alternative: Placeholder Assets

If you want to complete the submission structure first and add real assets later:

```bash
# Create placeholder files (1px transparent PNG)
cd .wordpress-org/

# Create placeholders (macOS/Linux)
convert -size 128x128 xc:transparent icon-128x128.png
convert -size 256x256 xc:transparent icon-256x256.png
convert -size 772x250 xc:transparent banner-772x250.png
convert -size 1544x500 xc:transparent banner-1544x500.png
convert -size 1280x960 xc:transparent screenshot-1.png
convert -size 1280x960 xc:transparent screenshot-2.png
convert -size 1280x960 xc:transparent screenshot-3.png
convert -size 1280x960 xc:transparent screenshot-4.png
```

**Note:** Placeholders let you complete the submission, but WordPress.org will look much better with real assets!

---

## Timeline Estimates

**Fast Track (Minimum Viable):**
- Screenshots: 30-60 minutes
- Icon: 1-2 hours (or $10-30 on Fiverr)
- Banner: 2-3 hours (or $30-50 on Fiverr)
**Total: 4-6 hours + designer fees**

**Professional Quality:**
- Screenshots: 1-2 hours (with editing/annotations)
- Icon: 2-4 hours (multiple iterations)
- Banner: 3-5 hours (professional design)
**Total: 6-11 hours**

**Designer Outsource:**
- Provide this spec document to designer
- Budget: $50-150 for complete asset package
- Timeline: 2-5 business days

---

## Resources

**Design Tools:**
- Canva: https://canva.com (free, easiest)
- Figma: https://figma.com (free, professional)
- Adobe Illustrator: (paid, most powerful)

**Image Optimization:**
- TinyPNG: https://tinypng.com
- Squoosh: https://squoosh.app

**Designer Marketplaces:**
- Fiverr: https://fiverr.com (search "WordPress plugin assets")
- Upwork: https://upwork.com
- 99designs: https://99designs.com

**Inspiration:**
- WordPress.org Popular Plugins: https://wordpress.org/plugins/browse/popular/
- WordPress.org Plugin Assets Guide: https://developer.wordpress.org/plugins/wordpress-org/plugin-assets/

---

## Current Status

**Plugin Submission Readiness:**
- [✅] Code complete and tested
- [✅] readme.txt updated (PHP 7.4, WP 6.9 tested)
- [✅] Test suite passing
- [✅] Deploy workflow configured
- [⏳] Visual assets (in progress - this checklist)
- [⏳] WordPress.org submission (after assets)

**You are here:** Creating visual assets → Then ready for WordPress.org submission!

---

**Questions?** Refer to:
- `DESIGN-SPECS.md` for detailed design specifications
- `SCREENSHOT-GUIDE.md` for screenshot capture instructions
- `README.md` for general asset information