Voyana Tourism Website - Image Management Guide

🖼️ How to Update Images in Voyana

This guide explains how to update and manage images throughout the Voyana tourism website.

📁 Image Types & Locations

1. Profile Pictures

• Location: src/pages/ProfilePage.tsx
• Component: ProfileImageUpload.tsx
• How to update: Click the camera icon on profile picture
• Supported formats: JPEG, PNG, WebP
• Max size: 2MB

2. Place/Destination Images

• Location: Various page files (HomePage, ExplorePage, PlaceDetailsPage)
• Current images: Stored as URLs in component data
• How to update: Modify the image URLs in the respective files

3. Memory/Experience Photos

• Location: src/components/MemoryUploadModal.tsx
• How to upload: Click "Share Memory" button on place details
• Supported formats: JPEG, PNG, WebP
• Max size: 5MB per image
• Max count: 5 images per memory

4. Review Images

• Location: src/pages/PlaceDetailsPage.tsx
• How to add: Through the memory upload system
• Display: Shows in review sections

🔧 Image Update Methods

Method 1: Direct URL Replacement

// In any component file, find the image URL and replace it
const place = {
  image: 'https://new-image-url.com/image.jpg' // Replace this URL
};

Method 2: Using Image Upload Components

// Use the ImageUpload component for user uploads
<ImageUpload
  onImageSelect={handleImageSelect}
  maxSize={5}
  acceptedTypes={['image/jpeg', 'image/png', 'image/webp']}
/>

Method 3: Profile Picture Update

// Use ProfileImageUpload component
<ProfileImageUpload
  currentImage={userAvatar}
  onImageUpdate={handleProfileImageUpdate}
  userName={user.name}
/>

📂 File Structure for Images

src/
├── components/
│   ├── ImageUpload.tsx          # Generic image upload component
│   ├── ProfileImageUpload.tsx   # Profile picture upload
│   └── MemoryUploadModal.tsx    # Memory/experience upload
├── pages/
│   ├── HomePage.tsx             # Hero & featured destination images
│   ├── ExplorePage.tsx          # Place listing images
│   ├── PlaceDetailsPage.tsx     # Place detail images & galleries
│   └── ProfilePage.tsx          # Profile & saved place images
└── utils/
    └── imageUtils.ts            # Image utility functions

🎯 Quick Image Updates

Update Homepage Hero Images

File: src/pages/HomePage.tsx

const destinations = [
  {
    id: 1,
    name: 'Jaipur, Rajasthan',
    image: 'YOUR_NEW_IMAGE_URL_HERE', // Update this
    // ... other properties
  }
];

Update Explore Page Place Images

File: src/pages/ExplorePage.tsx

const places = [
  {
    id: 1,
    name: 'Amber Fort',
    image: 'YOUR_NEW_IMAGE_URL_HERE', // Update this
    // ... other properties
  }
];

Update Place Detail Gallery

File: src/pages/PlaceDetailsPage.tsx

const places = {
  1: {
    images: [
      'YOUR_NEW_IMAGE_URL_1', // Update these
      'YOUR_NEW_IMAGE_URL_2',
      'YOUR_NEW_IMAGE_URL_3',
      'YOUR_NEW_IMAGE_URL_4'
    ],
    // ... other properties
  }
};

🛠️ Image Utilities

Validate Images

import { validateImageFile } from './utils/imageUtils';

const { isValid, error } = validateImageFile(file);
if (!isValid) {
  console.error(error);
}

Resize Images

import { resizeImage } from './utils/imageUtils';

const resizedBlob = await resizeImage(file, 800, 600, 0.8);

Create Preview

import { createImagePreview } from './utils/imageUtils';

const previewUrl = await createImagePreview(file);

🌐 Recommended Image Sources

1. Pexels (Free): https://www.pexels.com/
2. Unsplash (Free): https://unsplash.com/
3. Pixabay (Free): https://pixabay.com/

📝 Image Guidelines

For Place Images:

• Resolution: Minimum 1260x750px
• Aspect Ratio: 16:9 or 4:3
• Format: JPEG (for photos), PNG (for graphics)
• Quality: High quality, well-lit, clear

For Profile Pictures:

• Resolution: 400x400px minimum
• Aspect Ratio: 1:1 (square)
• Format: JPEG or PNG
• Content: Clear face photo, professional

For Memory Photos:

• Resolution: 800x600px minimum
• Format: JPEG, PNG, WebP
• Size: Under 5MB each
• Content: Travel experiences, places, food, culture

🔄 Backend Integration

When implementing with a real backend:

// Example API call for image upload
const uploadImage = async (file: File) => {
  const formData = new FormData();
  formData.append('image', file);
  
  const response = await fetch('/api/upload', {
    method: 'POST',
    body: formData
  });
  
  const data = await response.json();
  return data.imageUrl;
};

🚀 Getting Started

1. For immediate updates: Replace image URLs directly in component files
2. For user uploads: Use the provided upload components
3. For new features: Extend the existing image utilities

The image system is designed to be flexible and easily extensible for future enhancements!