Add Media Gallery Functionality
Budget: $10 – $30 CAD
My site is entirely hand-coded (HTML5, CSS3, vanilla JavaScript) with no CMS layer, and I want to keep it that way while adding rich media support. I need you to build a lightweight solution that lets me upload both HTML-compatible videos (mp4/webm) and audio files (mp3/ogg) through a simple, password-protected interface and have them appear automatically on the public site.
Here’s what I’m aiming for:
• Upload & Management – A small, self-hosted upload page that stores files in organised folders, writes the metadata to a JSON file or light database, and generates a poster frame/thumbnail for each video.
• Front-End Video Gallery – Responsive grid or masonry layout that pulls from the metadata and opens videos in a clean lightbox/player.
• Audio Section – HTML5 audio player with optional playlist view, matching the site’s existing look.
• Seamless Integration – No framework bloat; stick to vanilla JS or a minimal helper library so the rest of my static pages continue to load fast.
• Clear Handover – Well-commented code and a quick README so I can add or edit media in the future without touching the codebase.
If you prefer a Java back-end for the upload endpoint, that’s fine as long as it stays lightweight; otherwise a small Node or PHP script is equally acceptable. What matters is that the solution remains portable and easy to maintain.
Show me a couple of similar galleries or upload tools you’ve built, outline the approach you’d take, and let’s get this live.
Here’s what I’m aiming for:
• Upload & Management – A small, self-hosted upload page that stores files in organised folders, writes the metadata to a JSON file or light database, and generates a poster frame/thumbnail for each video.
• Front-End Video Gallery – Responsive grid or masonry layout that pulls from the metadata and opens videos in a clean lightbox/player.
• Audio Section – HTML5 audio player with optional playlist view, matching the site’s existing look.
• Seamless Integration – No framework bloat; stick to vanilla JS or a minimal helper library so the rest of my static pages continue to load fast.
• Clear Handover – Well-commented code and a quick README so I can add or edit media in the future without touching the codebase.
If you prefer a Java back-end for the upload endpoint, that’s fine as long as it stays lightweight; otherwise a small Node or PHP script is equally acceptable. What matters is that the solution remains portable and easy to maintain.
Show me a couple of similar galleries or upload tools you’ve built, outline the approach you’d take, and let’s get this live.