recent updates

2026-06-09 18:31:59 +02:00
parent 398b94965c
commit 94f7a1f72a
42 changed files with 8686 additions and 0 deletions
@@ -0,0 +1,177 @@
+# 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.