PROJECT_ASSETS_GUIDE.md

Project Assets Guide

This guide explains how to add images and YouTube videos for your projects.

Image Gallery Setup

Where to Place Images

Place all project images in the public/assets/projects/ directory, organized by project slug:

public/
  assets/
    projects/
      siddhesh-yashoda/
        card.jpg          (or .webp, .jpeg, .png)
        gallery-1.jpg
        gallery-2.jpg
        gallery-3.jpg
        ...
      jito-nagar/
        card.jpg
        gallery-1.jpg
        gallery-2.jpg
        ...

Supported Image Formats

The ImageFlex component automatically supports these formats (in order of preference):

• .webp
• .jpg or .jpeg
• .png

Important: Do NOT include the file extension in your code. The component will automatically find the correct file.

How to Add Gallery Images

In src/pages/Projects.jsx, add a gallery array to each project object:

{
  slug: 'siddhesh-yashoda',
  title: 'Siddhesh Yashoda',
  // ... other fields ...
  gallery: [
    '/assets/projects/siddhesh-yashoda/gallery-1',
    '/assets/projects/siddhesh-yashoda/gallery-2',
    '/assets/projects/siddhesh-yashoda/gallery-3',
    '/assets/projects/siddhesh-yashoda/gallery-4'
  ]
}

Note:

• Use paths relative to public/ (start with /assets/)
• Do NOT include file extensions (.jpg, .png, etc.)
• The component will automatically find the best available format

Image Slider Features

The image slider includes:

• ✅ Auto-advance every 3 seconds
• ✅ Pause on hover/focus
• ✅ Manual navigation with arrow buttons
• ✅ Fullscreen view
• ✅ Slide indicators (dots)
• ✅ Keyboard accessible

YouTube Walkthrough Videos

How to Add YouTube Links

In src/pages/Projects.jsx, add a youtubeUrl field to each project:

{
  slug: 'siddhesh-yashoda',
  title: 'Siddhesh Yashoda',
  // ... other fields ...
  youtubeUrl: 'https://www.youtube.com/watch?v=VIDEO_ID'
}

Supported YouTube URL Formats

The component accepts any of these formats:

1. Full YouTube URL:

   youtubeUrl: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'
   

2. Short YouTube URL:

   youtubeUrl: 'https://youtu.be/dQw4w9WgXcQ'
   

3. Direct Video ID:

   youtubeUrl: 'dQw4w9WgXcQ'
   

Walkthrough Section

• The walkthrough section only appears if a youtubeUrl is provided
• Videos are embedded using YouTube's iframe player
• No heavy video files needed - all videos are streamed from YouTube
• Videos load lazily for better performance

Complete Example

Here's a complete example of a project with gallery images and YouTube video:

{
  slug: 'example-project',
  title: 'Example Project',
  location: 'Pune, Maharashtra',
  categories: ['Residential'],
  section: 'Development',
  status: 'Ongoing',
  commencement: '2024',
  reraCompletion: '2026',
  reraNo: 'P52100012345',
  image: '/assets/projects/example-project/card',
  description: 'A beautiful residential project in the heart of Pune.',
  gallery: [
    '/assets/projects/example-project/gallery-1',
    '/assets/projects/example-project/gallery-2',
    '/assets/projects/example-project/gallery-3',
    '/assets/projects/example-project/gallery-4',
    '/assets/projects/example-project/gallery-5'
  ],
  youtubeUrl: 'https://www.youtube.com/watch?v=VIDEO_ID'
}

File Naming Conventions

Project Card Images

• Location: public/assets/projects/{project-slug}/card.{ext}
• Example: public/assets/projects/siddhesh-yashoda/card.jpg

Gallery Images

• Location: public/assets/projects/{project-slug}/gallery-{number}.{ext}
• Example:
  • public/assets/projects/siddhesh-yashoda/gallery-1.jpg
  • public/assets/projects/siddhesh-yashoda/gallery-2.webp
  • public/assets/projects/siddhesh-yashoda/gallery-3.png

Logo Files

• Location: public/assets/
• Files:
  • logo.{ext} (for header)
  • logo-white.{ext} (for footer)

Tips

1. Image Optimization: Use .webp format for best performance, with .jpg as fallback
2. Image Sizes:
   • Card images: ~800x600px recommended
   • Gallery images: ~1920x1080px recommended (will be scaled down)
3. YouTube Privacy: Use unlisted or public videos. Private videos won't embed.
4. Order Matters: Gallery images are displayed in the order they appear in the array