- Added new Stock Photos tab in Media Library for searching and importing Unsplash photos - Implemented search functionality with preview thumbnails and attribution info - Added one-click import feature to save photos directly to user's library - Created detailed setup documentation (STOCK_PHOTOS_QUICK_START.md and STOCK_PHOTOS_SETUP.md) - Added UNSPLASH_ACCESS_KEY configuration to .env.example - Enhanced MediaLibrary component with tabs,
5.1 KiB
Stock Photos Feature Setup
Overview
The Media Library now includes a Stock Photos tab that lets you search and import free high-quality photos from Unsplash directly into your library.
Features
✅ Search stock photos - Search Unsplash's library of millions of free photos ✅ Import to library - One-click import to your media library ✅ Proper attribution - Photographer credits included ✅ No manual download - Photos are fetched and uploaded automatically ✅ Seamless integration - Imported photos appear in your library instantly
Setup Instructions
1. Get Unsplash API Key
- Go to Unsplash Developers
- Sign up or log in
- Click "New Application"
- Accept the API terms
- Fill in application details:
- Application name: VoxBlog (or your blog name)
- Description: Blog content management system
- Copy your Access Key
2. Add API Key to Environment
Add the Unsplash API key to your .env file:
UNSPLASH_ACCESS_KEY=your_unsplash_access_key_here
3. Rebuild and Restart
docker-compose up -d --build
Usage
Search Stock Photos
- Go to Assets step in post editor
- Click Stock Photos tab in Media Library
- Enter search term (e.g., "mountain sunset", "office desk", "coffee")
- Click Search
Import Photos
- Browse search results
- Click Import to Library on any photo
- Photo is downloaded and uploaded to your S3 storage
- Automatically switches to My Library tab
- Imported photo appears in your library
Use Imported Photos
Once imported, stock photos work exactly like your uploaded photos:
- Insert into content
- Set as feature image
- Copy URL
- Delete if needed
API Limits
Unsplash Free Tier
- 50 requests per hour (demo/development apps)
- 5,000 requests per hour (production apps - requires approval)
Rate Limit Guidelines
- Search requests count toward your limit
- Import requests count toward your limit
- Unsplash tracks downloads for photographer attribution
Production Approval
For production use with higher limits:
- Go to your Unsplash app dashboard
- Click "Request Production Access"
- Provide app details and screenshots
- Usually approved within 24-48 hours
Attribution
Unsplash requires attribution for photos. The feature automatically:
- ✅ Displays photographer name with link
- ✅ Tracks download for Unsplash analytics
- ✅ Includes UTM parameters for proper attribution
When using imported photos in your blog, consider adding photographer credit in the caption.
Technical Details
API Endpoints
Search:
GET /api/stock-photos/search?query=mountain&per_page=30
Import:
POST /api/stock-photos/import
Body: {
photoId: string,
downloadUrl: string,
downloadLocation: string,
photographer: string,
photographerUrl: string
}
Storage
Imported photos are stored in S3 with the naming pattern:
images/YYYY-MM-DD/unsplash-{photoId}-{randomId}.{ext}
File Formats
Supported formats:
- JPEG (most common)
- PNG
- WebP
- GIF
Troubleshooting
"Unsplash API key not configured"
Solution: Add UNSPLASH_ACCESS_KEY to .env and rebuild containers
"Failed to search stock photos"
Possible causes:
- Invalid API key
- Rate limit exceeded
- Network connectivity issue
Solution: Check API key, wait if rate limited, verify network
"Failed to import photo"
Possible causes:
- S3 storage not configured
- Network timeout
- Invalid photo URL
Solution: Verify S3 credentials, check logs for details
Rate Limit Exceeded
Solution:
- Wait for rate limit to reset (hourly)
- Request production access for higher limits
- Cache search results on frontend
Best Practices
Search Tips
- Be specific: "laptop on wooden desk" vs "laptop"
- Use keywords: "minimal", "modern", "vintage", etc.
- Try variations: If no results, try synonyms
Import Strategy
- Import only what you need: Don't bulk import
- Review before importing: Check photo quality and relevance
- Organize after import: Use descriptive filenames
Attribution
- Add captions: Include photographer name in image captions
- Link to photographer: Use the provided photographer URL
- Follow Unsplash guidelines: https://unsplash.com/license
Example Searches
Good search terms:
coffee cup workspacemountain landscape sunsetmodern office interiorperson working laptopfood photography minimalabstract geometric patternnature forest treescity skyline night
Future Enhancements
Potential improvements:
- Pagination for search results
- Filter by orientation (landscape/portrait)
- Filter by color
- Save favorite photographers
- Bulk import
- Search history
- Integration with other stock photo services (Pexels, Pixabay)
Resources
Status: ✅ Ready to use Last Updated: 2025-10-27 Version: 1.0