Fix admin route access and backend configuration
- 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
This commit is contained in:
Local Server
234
Sky_Art_shop/IMAGE-GUIDE.md
Normal file
234
Sky_Art_shop/IMAGE-GUIDE.md
Normal file
@@ -0,0 +1,234 @@
|
||||
# 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
|
||||
Reference in New Issue
Block a user