Jason
114 lines
3.3 KiB
Markdown
114 lines
3.3 KiB
Markdown
# 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
|