# 06 — Media Assets

Migrate WordPress uploads to AM `/assets/images/`, convert to WebP, and
generate a media manifest for URL remapping during HTML build.

## Source location in wpress-extract

AIOIM extracts flat — uploads are at:
```
wpress-extract/uploads/          NOT wpress-extract/wp-content/uploads/
```

Organized by WordPress date-upload subdirs:
```
uploads/
├── 2026/
│   ├── 03/
│   │   ├── VibrantYouYogaLogo.png
│   │   ├── hero-studio.jpg
│   │   └── ...
│   └── 04/
│       └── ...
└── woocommerce-placeholder.png   ← skip
```

## Step 1 — Catalog all media

```bash
find .planning/wpress-extract/uploads -type f \
  \( -name "*.jpg" -o -name "*.jpeg" -o -name "*.png" -o -name "*.gif" -o -name "*.webp" -o -name "*.svg" \) \
  | sort > .planning/data/media-raw-list.txt

wc -l .planning/data/media-raw-list.txt
```

## Step 2 — Skip WordPress-generated size variants

WordPress auto-generates resized variants: `-150x150`, `-300x200`, `-768x512`, etc.
Skip these — they are redundant once we have the originals.

```bash
grep -v -E "\-[0-9]+x[0-9]+\.(jpg|jpeg|png|webp)$" \
  .planning/data/media-raw-list.txt > .planning/data/media-originals.txt

echo "Originals: $(wc -l < .planning/data/media-originals.txt)"
```

## Step 3 — Copy originals to src/assets/images/

Flatten the date-organized subdirs into a single flat directory.
Preserve filenames exactly (except extension will change to .webp).

```bash
mkdir -p src/assets/images/

while IFS= read -r src_path; do
  filename=$(basename "$src_path")
  cp "$src_path" "src/assets/images/$filename"
done < .planning/data/media-originals.txt

echo "Copied: $(ls src/assets/images/ | wc -l) files"
```

## Step 4 — Convert to WebP

Use the project's standard WebP conversion script (see `12-image-assets.md`).
If cwebp is available:

```bash
cd src/assets/images/
for img in *.jpg *.jpeg *.png; do
  [ -f "$img" ] || continue
  base="${img%.*}"
  cwebp -q 82 "$img" -o "${base}.webp" 2>/dev/null && rm "$img"
done
echo "WebP conversion done. Count: $(ls *.webp | wc -l)"
```

Or use the Python Pillow batch script if cwebp is not installed:

```bash
python3 /home/sirdrez/arisingmedia-websites/.am-webdesign-sops/wp-divi-pipeline/scripts/convert_images.py \
  src/assets/images/
```

## Step 5 — Generate media manifest

After conversion, build the URL remap table used during HTML build:

```bash
python3 -c "
import os, json
from pathlib import Path

uploads_dir = Path('.planning/wpress-extract/uploads')
site_url = 'https://vibrantyou.yoga'
am_path = '/assets/images'

manifest = []
for root, dirs, files in os.walk(uploads_dir):
    for f in files:
        full = Path(root) / f
        rel = full.relative_to(uploads_dir)
        # WordPress URL for this file
        wp_url = f'{site_url}/wp-content/uploads/{rel}'
        # Strip size variants from slug
        stem = Path(f).stem
        import re
        stem_clean = re.sub(r'-\d+x\d+$', '', stem)
        am_url = f'{am_path}/{stem_clean}.webp'
        manifest.append({'wp_url': wp_url, 'am_url': am_url, 'original': f})

Path('.planning/data/media-manifest.json').write_text(
    json.dumps(manifest, indent=2))
print(f'Manifest: {len(manifest)} entries')
"
```

## Step 6 — Apply manifest during HTML build

When writing HTML from extracted content, use the manifest to rewrite
every WordPress upload URL:

```python
import json, re

manifest = json.loads(open('.planning/data/media-manifest.json').read())
url_map = {m['wp_url']: m['am_url'] for m in manifest}

def rewrite_media_urls(html: str) -> str:
    for wp_url, am_url in url_map.items():
        html = html.replace(wp_url, am_url)
    # Also rewrite relative /wp-content/uploads/ paths
    html = re.sub(
        r'/wp-content/uploads/\d{4}/\d{2}/([^"\'>\s]+)',
        lambda m: f"/assets/images/{m.group(1).split('/')[-1].rsplit('.',1)[0]}.webp",
        html
    )
    return html
```

## Files to skip

Do not migrate these WordPress system images to `src/assets/images/`:
- `woocommerce-placeholder.png` and variants
- `wp-includes/` images (WordPress core UI)
- Plugin admin icons (anything from `plugins/` in uploads)
- Files in `wc-logs/`, `ithemes-security/`, `amcu-chunks/` subdirs

## Logo handling

The logo is typically at:
```
uploads/YYYY/MM/VibrantYouYogaLogo.png
```

Place the logo at:
- `src/assets/images/logo.webp` — standard WebP version
- `src/assets/svg/logo.svg` — if an SVG version exists (preferred)
- `src/assets/images/logo.png` — keep PNG fallback for email/OG use

Reference in header.html:
```html
<a href="/" class="nav__logo">
  <img src="/assets/images/logo.webp" alt="VibrantYou Yoga" width="160" height="48">
</a>
```

## OG image

Generate one 1200×630px OG image per `06-seo-meta.md` requirements.
Place at: `src/assets/images/og-default.jpg`

## Next step

Proceed to `07-seo-preservation.md` to build the redirect map and audit
every page's title, description, and canonical before the HTML build.