Editor Support

Co-authored-by: Copilot <copilot@github.com>
2026-05-05 15:42:30 -05:00
parent 9f7c078ccc
commit 29154bd651
32 changed files with 3698 additions and 17 deletions
@@ -0,0 +1,113 @@
+# Quick Start: Adding Foreground Layers to Your Products
+
+## Overview
+Your product finder now supports foreground layers - perfect for adding plants, decorative elements, or any items that should appear in front of the product.
+
+## Layer Order (back to front)
+1. **Base** (z-index: 1) - House/background
+2. **Door** (z-index: 2) - Door/window (changes with color)
+3. **Hardware** (z-index: 3) - Handles/locks
+4. **Overlay** (z-index: 4) - Glass views
+5. **Foreground** (z-index: 5) - Plants/decorative items ⭐ NEW!
+
+## Quick Implementation Steps
+
+### Step 1: Prepare Your Foreground Image
+1. Create/photograph decorative elements (plants, porch items, etc.)
+2. Remove background (make transparent)
+3. Save as PNG
+4. Match dimensions with your base layer image
+
+### Step 2: Save File to Correct Location
+```
+app/images/products/YOUR-PRODUCT-CODE/foreground.png
+```
+
+Example:
+```
+app/images/products/600/
+├── house-background.jpg
+├── door-white.png
+├── door-black.png
+├── handle-silver.png
+└── plants.png          ← Your new foreground layer
+```
+
+### Step 3: Update Product JSON
+Edit your product in `app/data/products.json`:
+
+```json
+{
+  "productCode": "600",
+  "description": "Your Product Name",
+  "colors": ["White", "Black", "Bronze"],
+  "imageConfig": {
+    "layered": true,
+    "basePath": "images/products/600/",
+    "layers": {
+      "base": "house-background.jpg",
+      "door": {
+        "white": "door-white.png",
+        "black": "door-black.png",
+        "bronze": "door-bronze.png"
+      },
+      "hardware": "handle-silver.png",
+      "foreground": "plants.png"     ← Add this line
+    }
+  }
+}
+```
+
+### Step 4: Test
+1. Save changes
+2. Refresh your browser
+3. Navigate to the product
+4. The foreground layer should now appear on top of everything
+
+## Tips for Best Results
+
+### Good Foreground Elements
+✅ Potted plants at corners of frame
+✅ Hanging baskets to the side
+✅ Partial porch railings
+✅ Seasonal decorations (wreaths, pumpkins)
+
+### Avoid
+❌ Obscuring important product details
+❌ Elements too large or too busy
+❌ Mismatched lighting/shadows
+❌ Low-quality or pixelated images
+
+## Example Products
+
+See these files for complete examples:
+- [information/FOREGROUND_LAYER_EXAMPLE.md](FOREGROUND_LAYER_EXAMPLE.md) - Detailed guide
+- [information/products-layered-example.json](products-layered-example.json) - Product #600 example
+- [information/LAYERED_IMAGES.md](LAYERED_IMAGES.md) - Full layered system guide
+
+## Troubleshooting
+
+**Foreground not showing?**
+- Check file path in JSON matches actual file location
+- Ensure `"layered": true` is set
+- Verify PNG has transparency
+- Check browser console for 404 errors
+
+**Foreground blocking clicks?**
+- This shouldn't happen - the layer has `pointer-events: none`
+- If it does, check CSS for `.layer-foreground`
+
+**Image quality issues?**
+- Use PNG-24 format
+- Match base layer dimensions
+- Optimize file size with TinyPNG or similar
+
+## File Sizes & Performance
+- Target: 50-200KB for foreground PNG
+- Optimize images before uploading
+- Browser caches layers after first load
+
+## Need Help?
+Check the detailed documentation:
+- `information/FOREGROUND_LAYER_EXAMPLE.md` - Complete guide with tips
+- `information/LAYERED_IMAGES.md` - Full layered system documentation