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,142 @@
+# Foreground Layer Example
+
+## Overview
+The foreground layer adds depth and realism to product images by placing decorative elements (like plants, porch furniture, or architectural details) in front of the product.
+
+## Layer Stacking Order
+From back to front:
+1. **Base Layer** (z-index: 1) - Background/house/frame
+2. **Door Layer** (z-index: 2) - Door or window panel (changes with color)
+3. **Hardware Layer** (z-index: 3) - Handles, locks, hinges
+4. **Overlay Layer** (z-index: 4) - Glass views or decorative overlays
+5. **Foreground Layer** (z-index: 5) - Plants, decorative items that appear in front
+
+## Creating a Foreground Layer
+
+### Step 1: Prepare Your Image
+1. Take or create an image of decorative elements (plants, porch items, etc.)
+2. Remove the background completely (use Photoshop, GIMP, or Photopea)
+3. Save as PNG with transparency
+4. Ensure dimensions match your base layer image
+
+### Step 2: Position Elements
+When creating your foreground layer, position elements to:
+- Frame the product naturally
+- Not obscure critical product details
+- Add depth by having some elements extend beyond product edges
+- Consider perspective and lighting consistency
+
+### Step 3: Export Settings
+- Format: PNG-24
+- Transparency: Enabled
+- Color Profile: sRGB
+- Resolution: Match your base layer (typically 800-1200px width)
+
+## JSON Configuration Example
+
+```json
+{
+  "productCode": "600",
+  "description": "#600 PREMIUM ENTRY DOOR",
+  "image": "images/600.jpg",
+  "colors": ["White", "Black", "Bronze", "Sandstone"],
+  "materials": ["Aluminum", "Vinyl"],
+  "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",
+        "sandstone": "door-sandstone.png"
+      },
+      "hardware": "handle-silver.png",
+      "foreground": "front-plants.png"
+    }
+  }
+}
+```
+
+## File Structure
+
+```
+app/images/products/600/
+├── house-background.jpg        # Background layer with house/frame
+├── door-white.png             # White door (transparent background)
+├── door-black.png             # Black door (transparent background)
+├── door-bronze.png            # Bronze door (transparent background)
+├── door-sandstone.png         # Sandstone door (transparent background)
+├── handle-silver.png          # Hardware layer (transparent background)
+└── front-plants.png           # Foreground layer with plants (transparent background)
+```
+
+## Tips for Best Results
+
+### Foreground Elements to Consider
+- **Potted plants**: Add life and color to the scene
+- **Hanging baskets**: Create visual interest at different heights
+- **Porch railings**: Partial railings in foreground add depth
+- **Architectural details**: Columns, trim, or decorative elements
+- **Seasonal decorations**: Pumpkins, wreaths, holiday items (create variants)
+
+### Technical Tips
+- Keep file sizes reasonable (compress PNGs without losing quality)
+- Use soft shadows on foreground elements for realism
+- Match lighting direction across all layers
+- Consider blur/depth of field on very close foreground elements
+- Test on different screen sizes to ensure elements don't obscure product
+
+### Common Mistakes to Avoid
+- ❌ Foreground elements too large, obscuring product
+- ❌ Inconsistent lighting between layers
+- ❌ Mismatched image dimensions
+- ❌ Harsh edges on transparent elements
+- ❌ Too much foreground detail competing with product
+
+## Advanced: Multiple Foreground Variants
+
+You can create different foreground options for variety:
+
+```json
+{
+  "productCode": "600",
+  "description": "#600 PREMIUM ENTRY DOOR",
+  "imageConfig": {
+    "layered": true,
+    "basePath": "images/products/600/",
+    "layers": {
+      "base": "house-background.jpg",
+      "door": {
+        "white": "door-white.png",
+        "black": "door-black.png"
+      },
+      "hardware": "handle-silver.png",
+      "foreground": "plants-spring.png"
+      // Could add logic to swap between plants-spring.png, plants-summer.png, etc.
+    }
+  }
+}
+```
+
+## Testing Your Foreground Layer
+
+1. Load your product page
+2. Change door colors - foreground should stay visible on top
+3. Verify no important product details are obscured
+4. Check on mobile/tablet to ensure proper scaling
+5. Test with different browsers for compatibility
+
+## Performance Considerations
+
+- PNG files can be large - optimize them using tools like:
+  - TinyPNG (https://tinypng.com)
+  - ImageOptim (https://imageoptim.com)
+  - Photoshop "Export for Web"
+- Target file size: 50-200KB for foreground layer
+- Use appropriate resolution (no need for 4K if displaying at 800px)
+
+## Accessibility Note
+
+The foreground layer has `pointer-events: none` CSS property, meaning clicks pass through to the controls below. This ensures the decorative layer doesn't interfere with user interaction.