Files

T

2026-06-09 18:31:59 +02:00

4.9 KiB

Raw Blame History

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

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.

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).

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:

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:

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:

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:

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:

<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.

4.9 KiB Raw Blame History Unescape Escape