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:
| Property | Type | Description |
| :--- | :--- | :--- |
| galleryType | String | Determines if the item is an 'Image' or 'Video'. |
| images | Array | A list of image URLs (used for image galleries). |
| videoUrl | String | The full YouTube link (used for video galleries). |
| status | Boolean | Visibility toggle (only true items are displayed). |
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>