# Sprint G004 & G005 — Media Engine & Image Processing · Walkthrough

## Sprint G005 — Image Processing Engine

The **Image Processing Engine** is now live and builds on the foundation laid in G004. Images are processed transparently, compressed, and converted to WebP on the fly, with client-side interactive cropping.

---

## Files Created & Modified

### New Files
- [ImageProcessor.php](file:///c:/xampp/htdocs/inveetaire/app/services/ImageProcessor.php): Reusable service that corrects orientation from EXIF headers, resizes without upscaling (maintaining aspect ratio), crops (optional server-side fallback), strips metadata automatically, and saves as compressed WebP.

### Modified Files
- [config/storage.php](file:///c:/xampp/htdocs/inveetaire/config/storage.php): Added maximum dimension limit constraints per slot and set default WebP compression quality (`webp_quality` => 80).
- [MediaService.php](file:///c:/xampp/htdocs/inveetaire/app/services/MediaService.php): Integrated `ImageProcessor` into the upload pipeline. Dynamically targets `.webp` extensions for all images, while leaving audio files (MP3) untouched.
- [media.php (view)](file:///c:/xampp/htdocs/inveetaire/app/views/invitation/media.php): Included `Cropper.js` (CSS/JS) via CDN. Created an interactive crop modal styled with modern Tailwind CSS. Added sequential queue processing for multiple image drops, visual uploading/processing overlays, and crop controls.

---

## Image Processing Pipeline

```
[User Uploads Image]
   ↓
[Client-Side Crop Modal Opens] (Aspect ratio locked for Music Cover, freeform for others)
   ↓
[Client Resizes Canvas to Slot Limits] (Reduces upload bandwidth)
   ↓
[Uploads via AJAX]
   ↓
[MediaService Receives Upload]
   ↓
[ImageProcessor Corrects EXIF Orientation] (Keeps correct rotation before stripping metadata)
   ↓
[Resizes and Compresses as WebP] (Transparency & orientation preserved)
   ↓
[Saves to Disk and Updates JSON]
```

---

## Dimension Limits

- **Hero**: 1920px
- **Couple**: 1600px
- **Gallery**: 1600px
- **Story**: 1600px
- **Gift / QRIS**: 1200px
- **Music Cover**: 1200px

---

## Validation & Testing Results

- ✅ `ImageProcessor.php` — No syntax errors
- ✅ `MediaService.php` — No syntax errors
- ✅ `media.php` (view) — No syntax errors
- ✅ `config/storage.php` — No syntax errors
- ✅ PHP GD extension successfully enabled in php.ini