# WordPress.org Plugin Assets

This folder contains assets for the WordPress.org plugin repository.

## Current Assets

- `icon-128x128.png` - Plugin icon
- `icon-256x256.png` - Retina plugin icon (2x)

## Banner Images (To Be Created)

The banner HTML templates need to be converted to PNG images:

- `banner-772x250.html` → `banner-772x250.png`
- `banner-1544x500.html` → `banner-1544x500.png` (Retina version)

### How to Create Banner Images

#### Option 1: Browser Screenshot (Easiest)
1. Open the HTML file in your browser (Chrome/Firefox/Safari)
2. Take a full-page screenshot:
   - **Mac**: Press `Cmd + Shift + 4`, then `Space`, then click the browser window
   - **Windows**: Use Snipping Tool or Win + Shift + S
3. Save as PNG with the correct filename

#### Option 2: Using Command Line Tools
```bash
# Using Chrome/Chromium headless
chromium --headless --screenshot=banner-772x250.png --window-size=772,250 banner-772x250.html
chromium --headless --screenshot=banner-1544x500.png --window-size=1544,500 banner-1544x500.html

# Using wkhtmltoimage (install via brew/apt)
wkhtmltoimage --width 772 --height 250 banner-772x250.html banner-772x250.png
wkhtmltoimage --width 1544 --height 500 banner-1544x500.html banner-1544x500.png
```

#### Option 3: Online Tools
- Use online HTML to image converters like:
  - https://htmlcsstoimage.com/
  - https://hcti.io/
  - https://www.site-shot.com/

## WordPress.org Asset Requirements

- **Banner**: 772x250px (optional) - Displays at top of plugin page
- **Banner (Retina)**: 1544x500px (optional) - High-DPI version
- **Icon**: 128x128px (or 256x256px) - Square icon/jpg/png

## After Creating Banners

1. Verify the images are exactly the correct dimensions
2. Add them to your Git repository
3. They will be automatically deployed to WordPress.org via the GitHub Actions workflow

## Banner Design

The banner design features:
- **Gradient**: Purple to pink gradient (#667eea → #764ba2 → #f093fb)
- **Pattern**: Subtle geometric pattern overlay
- **Icon**: Image icon in white rounded container
- **Typography**: Clean, modern sans-serif font
- **Badge**: "by ultraDevs" badge at bottom right

You can customize the colors, text, or layout by editing the HTML files.