# WordPress Plugin Assets System

The BaseCloud Shield includes a comprehensive asset management system for WordPress plugin deployment. This system automatically handles icons, banners, and screenshots for the WordPress.org plugin directory.

## 📁 Asset Structure

All WordPress plugin assets should be placed in the `/assets/` directory:

```
assets/
├── README.md                    # This documentation
├── icon-128x128.png            # Plugin icon (128x128px)
├── icon-256x256.png            # Plugin icon high-res (256x256px)
├── banner-772x250.png          # Plugin banner (772x250px)
├── banner-1544x500.png         # Plugin banner retina (1544x500px)
├── screenshot-1.png            # Primary screenshot
├── screenshot-2.png            # Secondary screenshot
└── screenshot-3.png            # Additional screenshots
```

## 🎨 Asset Requirements

### Icons
- **Formats**: PNG with transparency preferred
- **Sizes**: Exactly 128x128px and 256x256px
- **Content**: Should clearly represent security/2FA protection theme
- **Style**: Clean, professional, consistent with WordPress admin UI
- **Colors**: BaseCloud brand colors (navy #0f2c52, green #4bc46a)

### Banners
- **Formats**: PNG or JPG
- **Sizes**: Exactly 772x250px (standard) and 1544x500px (retina)
- **Content**: Plugin name, key features, professional appearance
- **Text**: Readable at small sizes, not too crowded
- **Branding**: Include BaseCloud logo/colors

### Screenshots
- **Formats**: PNG or JPG
- **Recommended Size**: 1200x900px (4:3 ratio)
- **Content**: Clear interface views, numbered sequentially
- **Quality**: High resolution with readable text
- **Captions**: Described in readme.txt screenshots section

## 🚀 Deployment Integration

The asset system is fully integrated into all deployment methods:

### PowerShell Deployment
```powershell
.\deploy.ps1 patch
```
- Automatically validates all assets
- Checks dimensions and formats
- Copies to SVN assets directory

### Manual SVN Deployment
```bash
cd svn-repo
xcopy ..\assets\*.png assets\ /Y
svn add --force assets/*
svn commit -m "Updated plugin assets"
```

## 📸 Current Assets

### Icons
- ✅ `icon-128x128.png` - Standard resolution icon
- ✅ `icon-256x256.png` - High resolution icon (retina)

### Banners
- ✅ `banner-772x250.png` - Standard banner
- ✅ `banner-1544x500.png` - Retina banner

### Screenshots
Add screenshots as needed:
- `screenshot-1.png` - Settings interface
- `screenshot-2.png` - OTP verification screen
- `screenshot-3.png` - Additional features

## 🎯 Design Guidelines

### Icon Design
- Use shield/lock imagery to represent security
- Incorporate BaseCloud green accent (#4bc46a)
- Maintain simplicity for small sizes
- Ensure visibility on light and dark backgrounds

### Banner Design
- Feature plugin name prominently
- Highlight key benefits:
  - "Enterprise 2FA Security"
  - "SendGrid Integration"
  - "Central Manager Routing"
- Use professional typography
- Include subtle BaseCloud branding

### Screenshot Guidelines
1. **Screenshot 1**: Main settings panel
2. **Screenshot 2**: OTP verification form
3. **Screenshot 3**: Advanced configuration
4. **Screenshot 4**: Security features in action

## 🔍 Quality Checklist

Before deploying assets:

- [ ] All icon sizes are exact (128x128, 256x256)
- [ ] All banner sizes are exact (772x250, 1544x500)
- [ ] Images are optimized (compressed but high quality)
- [ ] Transparency is used appropriately
- [ ] Colors match BaseCloud brand
- [ ] Text is readable at thumbnail size
- [ ] Screenshots show actual plugin interface
- [ ] All files use correct naming convention

## 📦 SVN Asset Directory

WordPress.org serves assets from a special `/assets/` directory in SVN:

```
https://plugins.svn.wordpress.org/basecloud-shield/
├── assets/           ← Assets served from here
│   ├── icon-128x128.png
│   ├── icon-256x256.png
│   ├── banner-772x250.png
│   ├── banner-1544x500.png
│   └── screenshot-*.png
├── trunk/
└── tags/
```

## 🛠️ Asset Tools & Resources

### Recommended Tools
- **Design**: Figma, Adobe Photoshop, Canva
- **Optimization**: TinyPNG, ImageOptim
- **Validation**: Image size checker tools

### WordPress.org References
- [Plugin Assets Guidelines](https://developer.wordpress.org/plugins/wordpress-org/plugin-assets/)
- [Header Image Requirements](https://developer.wordpress.org/plugins/wordpress-org/plugin-assets/#header-images)

## 📝 Asset Updates

To update assets after initial submission:

1. Update files in `/assets/` directory
2. Run deployment script or manually copy to SVN
3. Commit to SVN assets directory
4. Changes appear on WordPress.org within minutes

```bash
cd svn-repo
xcopy ..\assets\*.png assets\ /Y
svn commit -m "Updated plugin assets"
```

## 🎨 Brand Assets

### BaseCloud Colors
- **Primary Navy**: #0f2c52
- **Accent Green**: #4bc46a
- **Panel Background**: #163b6b
- **White**: #ffffff

### Typography
- **Headers**: Bold, professional sans-serif
- **Body**: Clean, readable fonts
- **Code**: Monospace for technical details

## 📞 Support

For asset design questions:
- Contact BaseCloud design team
- Review brand guidelines
- Check WordPress.org asset requirements

---

**Asset Management System v1.0**  
**BaseCloud Shield Plugin**