178 lines
4.9 KiB
Markdown
178 lines
4.9 KiB
Markdown
# 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.
|