Skip to content

README.md

Latest commit

 

History

History
72 lines (52 loc) · 2.08 KB

README.md

File metadata and controls

72 lines (52 loc) · 2.08 KB

Blursco

VSCO clone number three from yours truly. This time with Medium-style lazy loading.

Stack

ReactJS with AWS S3 "backend". Small placeholder images are blurred until site fetches full-size images from S3.

Adding New Images

To add a batch of new images to your site:

1. Process Images Locally

# Navigate to utils directory
cd utils

# Install dependencies (first time only)
pip install -r requirements.txt

# Add your images to the source_images folder
# The script will create utils/source_images/ if it doesn't exist

# Process your images (this clears previous processed images)
python process_images.py

Folder Structure:

  • Input: utils/source_images/ - Put your raw images here (any format)
  • Output: utils/to_upload/ - Processed full-size JPEGs ready for S3
  • Output: public/placeholders/ - Small thumbnails for local development (also copies to utils/thumbnails for S3 upload)

This will:

  • Convert all images to JPEG format
  • Create optimized full-size versions (max 1920px width) in to_upload/ folder
  • Generate small thumbnails (max 80px width) in thumbnails/ folder for artistic blur effect
  • Use simple sequential naming (0.jpg, 1.jpg, 2.jpg...)
  • Create a manifest.json with image metadata
  • Clear previous processed images each time you run it

2. Upload to S3

# Upload to your S3 bucket (requires AWS CLI configured)
python upload_to_s3.py your-bucket-name

This will:

  • Clear the existing site_photos/ folder in S3
  • Upload full-size images to site_photos/ folder
  • Clear and upload thumbnails to placeholders/ folder
  • Upload manifest.json to bucket root for the app to load

3. Update Your Site

Copy the manifest.json from the to_upload/ folder to your public/ folder, or the app will try to fetch it from your S3 bucket root.

AWS Setup

Make sure you have AWS credentials configured:

# Install AWS CLI and configure
aws configure

Or set environment variables:

export AWS_ACCESS_KEY_ID=your_access_key
export AWS_SECRET_ACCESS_KEY=your_secret_key
export AWS_DEFAULT_REGION=us-east-1