Gallery & Media

The Gallery and Media module provides a tabbed interface for showcasing campus life through high-quality image collections and embedded video content. It is designed to offer a responsive, visually engaging experience for students and visitors.

Media Overview

The system categorizes media into two primary types:

Image Gallery: Displays thematic albums or individual snapshots of campus events, facilities, and student activities.
Video Gallery: Integrates external YouTube content directly into the application, allowing for a seamless playback experience without leaving the site.

User Interface & Navigation

The primary entry point for users is the GalleryPage. This component utilizes a tabbed navigation system to switch between visual formats.

Tabbed Navigation

Users can toggle between "Image Gallery" and "Video Gallery" views. The interface supports deep-linking via URL parameters:

/gallery/image: Opens the gallery with the Image tab active.
/gallery/video: Opens the gallery with the Video tab active.

Image Display

Images are rendered in a responsive grid.

Grid Layout: Adjusts dynamically based on screen size (1 column on mobile, up to 4 columns on desktop).
Loading States: Features built-in skeleton loaders to provide visual feedback while high-resolution assets are being fetched.

Video Player Integration

The Video Gallery utilizes the react-youtube library to embed content.

URL Parsing: The system automatically extracts Video IDs from standard YouTube links (e.g., https://www.youtube.com/watch?v=...) using a utility parser.
Interactive Playback: Videos are presented in a clean interface that supports full-screen viewing and standard YouTube playback controls.

Data Integration

The frontend interacts with the Gallery API to fetch media dynamically.

Fetching Gallery Items

The getAllGallery function retrieves all media assets. The frontend then filters these locally based on the galleryType attribute ('Image' or 'Video').

import { getAllGallery } from '../api/galleryApi';

// Example: Fetching and filtering data
const fetchData = async () => {
    const data = await getAllGallery();
    
    // Media is filtered by type for the respective tabs
    const imageGallery = data.filter(item => item.galleryType === 'Image');
    const videoGallery = data.filter(item => item.galleryType === 'Video');
};

Media Object Structure

Each item in the gallery collection typically follows this structure:

Configuration

To ensure images and videos render correctly, the following environment variables must be configured in your .env file:

# Base URL for media assets
VITE_IMAGE_URL=https://your-api.com/uploads/images/

# Default placeholder if an image is missing
VITE_DEFAULT_IMG=https://your-api.com/uploads/default.png

Usage Example

To link to a specific gallery tab from another part of the application (e.g., the Homepage or a "Recent Events" section), use the standard Link component:

import { Link } from 'react-router-dom';

// Link specifically to the Video Gallery
<Link to="/gallery/video">
  View Campus Videos
</Link>