703ab57984
- Added /admin redirect to login page in nginx config - Fixed backend server.js route ordering for proper admin handling - Updated authentication middleware and routes - Added user management routes - Configured PostgreSQL integration - Updated environment configuration
235 lines
6.9 KiB
Markdown
235 lines
6.9 KiB
Markdown
# Sky Art Shop - Image Requirements Guide
|
||
|
||
This document outlines all the images needed for the Sky Art Shop website. Use this as a checklist when gathering or creating images.
|
||
|
||
## 📸 Image Specifications
|
||
|
||
### General Guidelines
|
||
|
||
- **Format**: JPG for photos, PNG for logos/graphics
|
||
- **Quality**: High resolution (minimum 1200px wide for hero images)
|
||
- **Optimization**: Compress images to reduce file size without losing quality
|
||
- **Naming**: Use descriptive, lowercase names with hyphens (e.g., `washi-tape-collection.jpg`)
|
||
|
||
## 🏠 Home Page Images
|
||
|
||
### Hero Section
|
||
|
||
- **hero-craft.jpg** (1920x1080px recommended)
|
||
- Main hero image showing scrapbooking/crafting
|
||
- Should be bright, inviting, and showcase products
|
||
|
||
### Inspiration Section
|
||
|
||
- **craft-supplies.jpg** (800x600px)
|
||
- Display of craft supplies, journals, stickers, etc.
|
||
|
||
### Collection Grid (4 images)
|
||
|
||
- **washi-tape.jpg** (400x400px)
|
||
- **stickers.jpg** (400x400px)
|
||
- **journals.jpg** (400x400px)
|
||
- **cardmaking.jpg** (400x400px)
|
||
|
||
### Top Sellers (4 product images)
|
||
|
||
- **products/product-1.jpg** (500x500px)
|
||
- **products/product-2.jpg** (500x500px)
|
||
- **products/product-3.jpg** (500x500px)
|
||
- **products/product-4.jpg** (500x500px)
|
||
|
||
## 🎨 Portfolio Page Images
|
||
|
||
### Category Thumbnails (4 images)
|
||
|
||
- **portfolio/displays.jpg** (600x800px)
|
||
- Show display boards or craft fair setups
|
||
- **portfolio/personal-crafts.jpg** (600x800px)
|
||
- Personal craft projects, decorated journals
|
||
- **portfolio/card-making.jpg** (600x800px)
|
||
- Handmade cards collection
|
||
- **portfolio/scrapbook-albums.jpg** (600x800px)
|
||
- Scrapbook album pages
|
||
|
||
### Category Projects
|
||
|
||
#### Displays (4 images)
|
||
|
||
- **portfolio/displays/project-1.jpg** (800x600px)
|
||
- **portfolio/displays/project-2.jpg** (800x600px)
|
||
- **portfolio/displays/project-3.jpg** (800x600px)
|
||
- **portfolio/displays/project-4.jpg** (800x600px)
|
||
|
||
#### Personal Craft Projects (6 images)
|
||
|
||
- **portfolio/personal-crafts/project-1.jpg** (800x600px)
|
||
- **portfolio/personal-crafts/project-2.jpg** (800x600px)
|
||
- **portfolio/personal-crafts/project-3.jpg** (800x600px)
|
||
- **portfolio/personal-crafts/project-4.jpg** (800x600px)
|
||
- **portfolio/personal-crafts/project-5.jpg** (800x600px)
|
||
- **portfolio/personal-crafts/project-6.jpg** (800x600px)
|
||
|
||
#### Card Making (6 images)
|
||
|
||
- **portfolio/card-making/project-1.jpg** (800x600px)
|
||
- **portfolio/card-making/project-2.jpg** (800x600px)
|
||
- **portfolio/card-making/project-3.jpg** (800x600px)
|
||
- **portfolio/card-making/project-4.jpg** (800x600px)
|
||
- **portfolio/card-making/project-5.jpg** (800x600px)
|
||
- **portfolio/card-making/project-6.jpg** (800x600px)
|
||
|
||
#### Scrapbook Albums (6 images)
|
||
|
||
- **portfolio/scrapbook-albums/project-1.jpg** (800x600px)
|
||
- **portfolio/scrapbook-albums/project-2.jpg** (800x600px)
|
||
- **portfolio/scrapbook-albums/project-3.jpg** (800x600px)
|
||
- **portfolio/scrapbook-albums/project-4.jpg** (800x600px)
|
||
- **portfolio/scrapbook-albums/project-5.jpg** (800x600px)
|
||
- **portfolio/scrapbook-albums/project-6.jpg** (800x600px)
|
||
|
||
## 🛍️ Shop Page Images (12 product images)
|
||
|
||
### Washi Tape
|
||
|
||
- **products/washi-tape-1.jpg** (500x500px) - Floral set
|
||
- **products/washi-tape-2.jpg** (500x500px) - Geometric patterns
|
||
- **products/washi-tape-3.jpg** (500x500px) - Pastel collection
|
||
|
||
### Stickers
|
||
|
||
- **products/sticker-pack-1.jpg** (500x500px) - Vintage stickers
|
||
- **products/sticker-pack-2.jpg** (500x500px) - Nature themed
|
||
- **products/sticker-pack-3.jpg** (500x500px) - Kawaii bundle
|
||
|
||
### Journals
|
||
|
||
- **products/journal-1.jpg** (500x500px) - Dotted journal
|
||
- **products/journal-2.jpg** (500x500px) - Travel journal
|
||
- **products/journal-3.jpg** (500x500px) - Gratitude journal
|
||
|
||
### Other Products
|
||
|
||
- **products/card-kit-1.jpg** (500x500px) - Card making kit
|
||
- **products/card-paper-1.jpg** (500x500px) - Card stock
|
||
- **products/scrapbook-kit-1.jpg** (500x500px) - Scrapbook album kit
|
||
|
||
## ℹ️ About Page Images (2 images)
|
||
|
||
- **about-1.jpg** (600x400px) - Crafting supplies or workspace
|
||
- **about-2.jpg** (600x400px) - Creative workspace or products
|
||
|
||
## 📝 Blog Page Images (6 images)
|
||
|
||
- **blog/blog-1.jpg** (800x600px) - Washi tape ideas
|
||
- **blog/blog-2.jpg** (800x600px) - Journal setup
|
||
- **blog/blog-3.jpg** (800x600px) - Card making
|
||
- **blog/blog-4.jpg** (800x600px) - Mental health/crafting
|
||
- **blog/blog-5.jpg** (800x600px) - Scrapbooking techniques
|
||
- **blog/blog-6.jpg** (800x600px) - Collage art
|
||
|
||
## 🎯 Tips for Creating/Selecting Images
|
||
|
||
### Photography Tips
|
||
|
||
1. **Lighting**: Use natural light when possible, avoid harsh shadows
|
||
2. **Composition**: Keep main subject centered or follow rule of thirds
|
||
3. **Background**: Use clean, uncluttered backgrounds
|
||
4. **Colors**: Vibrant but not oversaturated colors work best
|
||
5. **Focus**: Ensure images are sharp and in focus
|
||
|
||
### Stock Photo Resources (Free)
|
||
|
||
- Unsplash.com
|
||
- Pexels.com
|
||
- Pixabay.com
|
||
- Freepik.com (some free options)
|
||
|
||
### Search Terms for Stock Photos
|
||
|
||
- "scrapbooking supplies"
|
||
- "washi tape collection"
|
||
- "bullet journal"
|
||
- "craft supplies flat lay"
|
||
- "handmade cards"
|
||
- "stationery collection"
|
||
- "journaling desk"
|
||
- "creative workspace"
|
||
|
||
### Image Optimization Tools
|
||
|
||
- **TinyPNG.com** - Compress JPG/PNG files
|
||
- **Squoosh.app** - Google's image compression tool
|
||
- **ImageOptim** - Mac app for optimization
|
||
- **GIMP** - Free image editing software
|
||
|
||
## 📦 Placeholder Images
|
||
|
||
Until you have your own images, you can use placeholder services:
|
||
|
||
- **Lorem Picsum**: <https://picsum.photos/800/600>
|
||
- **Unsplash Source**: <https://source.unsplash.com/800x600/?crafts>
|
||
- **Placeholder.com**: <https://via.placeholder.com/800x600>
|
||
|
||
Example usage in HTML:
|
||
|
||
```html
|
||
<img src="https://picsum.photos/800/600" alt="Placeholder">
|
||
```
|
||
|
||
## ✅ Image Checklist
|
||
|
||
Use this checklist to track your progress:
|
||
|
||
### Home Page
|
||
|
||
- [ ] Hero image
|
||
- [ ] Craft supplies image
|
||
- [ ] 4 Collection grid images
|
||
- [ ] 4 Product images
|
||
|
||
### Portfolio
|
||
|
||
- [ ] 4 Category thumbnails
|
||
- [ ] 4 Displays projects
|
||
- [ ] 6 Personal craft projects
|
||
- [ ] 6 Card making projects
|
||
- [ ] 6 Scrapbook album projects
|
||
|
||
### Shop
|
||
|
||
- [ ] 12 Product images
|
||
|
||
### About
|
||
|
||
- [ ] 2 About page images
|
||
|
||
### Blog
|
||
|
||
- [ ] 6 Blog post images
|
||
|
||
**Total: 59 images needed**
|
||
|
||
## 🔄 Updating Images
|
||
|
||
To update images in the website:
|
||
|
||
1. Place your images in the appropriate folder under `assets/images/`
|
||
2. Ensure the filename matches what's referenced in the HTML
|
||
3. Optimize the image for web (compress, resize if needed)
|
||
4. Clear browser cache to see changes
|
||
|
||
## 📝 Adding Alt Text
|
||
|
||
For accessibility, add descriptive alt text to all images:
|
||
|
||
```html
|
||
<img src="path/to/image.jpg" alt="Colorful washi tape collection on wooden desk">
|
||
```
|
||
|
||
Good alt text:
|
||
|
||
- Describes the image content
|
||
- Is concise (under 125 characters)
|
||
- Includes relevant keywords naturally
|
||
- Helps visually impaired users understand the content
|