📸 Photo Gallery Web App

📋 Overview

Photo Gallery Web App is a sleek, responsive web application for viewing and uploading photos. Built with PHP, styled with CSS, and enhanced with JavaScript, it leverages the powerful PhotoSwipe library to provide a professional gallery experience. This project was developed as an educational exercise to demonstrate web development skills and best practices for image management applications.

🚀 Features

📊 Gallery Display

• Responsive Grid Layout: Automatically adjusts to different screen sizes
• Thumbnail Generation: Creates optimized thumbnails for faster loading
• Lazy Loading: Only loads images as they enter the viewport
• Categories/Albums: Organize photos into custom categories
• Sorting Options: Arrange photos by date, name, or custom order

🔍 Image Viewing

• Full-Screen Mode: Immersive viewing experience
• Touch Gestures: Swipe, pinch-to-zoom on mobile devices
• Keyboard Navigation: Arrow keys for desktop browsing
• Slideshow Mode: Auto-advancing display with customizable timing
• Image Details: Display metadata like capture date, size, and location

📤 Upload Functionality

• Drag & Drop: Easy uploading interface
• Multi-File Upload: Add multiple photos at once
• Basic Editing: Rotate, crop, or adjust brightness before saving
• Metadata Preservation: Keeps EXIF data intact
• Progress Indicator: Visual feedback during upload

⚙️ Management Tools

• User Authentication: Secure login system
• Image Organization: Move photos between albums
• Batch Operations: Select and modify multiple images
• Search Function: Find photos by filename or metadata
• Permissions: Control who can view and upload photos

🛠️ Technology Stack

• Backend: PHP 7.4+
• Frontend: HTML5, CSS3, JavaScript
• Gallery Library: PhotoSwipe 5
• Image Processing: GD Library/ImageMagick
• Deployment: Compatible with Apache/Nginx

🚀 Getting Started

Prerequisites

• PHP 7.4 or higher
• Web server (Apache/Nginx)
• GD Library or ImageMagick (for image processing)
• Modern web browser

Installation

1. Clone the repository

   git clone https://github.com/amormul/photo-gallery-web-app.git
   cd photo-gallery-web-app

2. Configure web server

   Point your web server's document root to the project's public directory.

   Apache example (.htaccess):

   <Directory /path/to/photo-gallery-web-app/public>
       Options Indexes FollowSymLinks
       AllowOverride All
       Require all granted
   </Directory>

3. Create upload directory

   mkdir -p public/uploads
   chmod 755 public/uploads

4. Configure settings

   cp config/config.example.php config/config.php
   # Edit config.php with your specific settings

5. Access the application

   Open http://localhost/photo-gallery-web-app in your browser
   

📁 Project Structure

photo-gallery-web-app/
├── public/                # Web accessible files
│   ├── index.php          # Entry point
│   ├── css/               # Stylesheets
│   ├── js/                # JavaScript files
│   ├── uploads/           # User uploaded images
│   └── thumbnails/        # Generated thumbnails
├── app/                   # Application code
│   ├── controllers/       # Control logic
│   ├── models/            # Data models
│   ├── views/             # Templates
│   └── helpers/           # Utility functions
├── config/                # Configuration files
├── vendor/                # Dependencies
└── README.md              # This file

💻 Usage Examples

Viewing the Gallery

Navigate to different albums using the sidebar menu. Click on any thumbnail to open the full-size image in PhotoSwipe viewer.

Uploading Photos

1. Click the "Upload" button in the navigation bar
2. Drag and drop images or click to select files
3. Add titles or descriptions if desired
4. Select an album or create a new one
5. Click "Upload" to process the files

🔧 Configuration

Key settings in config/config.php:

// Storage settings
define('UPLOAD_DIR', 'uploads/');
define('THUMBNAIL_DIR', 'thumbnails/');
define('MAX_UPLOAD_SIZE', 10485760); // 10MB

// Thumbnail settings
define('THUMB_WIDTH', 250);
define('THUMB_HEIGHT', 250);
define('THUMB_QUALITY', 85);

// Gallery settings
define('ITEMS_PER_PAGE', 20);
define('ENABLE_DOWNLOAD', true);
define('ENABLE_SLIDESHOW', true);

🧩 Extending the Application

The application is designed to be easily extended:

1. Custom Themes: Add new CSS files in the public/css/themes/ directory
2. Plugins: Extend functionality by adding PHP scripts to the app/plugins/ directory
3. API Integration: Connect with external services via the app/integrations/ directory

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📚 Learning Resources

This project demonstrates several web development concepts:

• Responsive image galleries
• File uploads and processing
• MVC architecture in PHP
• Client-side image manipulation
• Progressive enhancement

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👏 Acknowledgments

• PhotoSwipe for the excellent gallery library
• All contributors who have helped improve this application
• The web development community for inspiration and resources

---

Developed with ❤️ by amormul — Last updated: June 8, 2025