diff --git a/src/pages/gallery/create_album.php b/src/pages/gallery/create_album.php index 9cd0997f..a2a6c690 100644 --- a/src/pages/gallery/create_album.php +++ b/src/pages/gallery/create_album.php @@ -208,6 +208,27 @@ require_once($rootPath . '/components/banner.php'); color: #999; margin-top: 5px; } + + .cover-preview-area { + margin-bottom: 15px; + } + + .current-cover { + border-radius: 8px; + overflow: hidden; + margin-bottom: 15px; + } + + .current-cover img { + width: 100%; + max-height: 250px; + object-fit: cover; + display: block; + } + + #coverUploadArea { + cursor: pointer; + }
@@ -234,6 +255,27 @@ require_once($rootPath . '/components/banner.php');
Optional: Share details about when, where, or why you created this album
+
+ +
+ +
+ Current cover +

Current cover image

+
+ +
No cover image yet
+ +
+
+ +
🖼️
+

Click to select cover image

+
Image will be used as album thumbnail. Recommended: Square image (500x500px or larger)
+
+
+
+

Photos in Album

@@ -280,8 +322,60 @@ require_once($rootPath . '/components/banner.php'); const uploadArea = document.getElementById('uploadArea'); const fileInput = document.getElementById('photos'); const fileList = document.getElementById('fileList'); + const coverUploadArea = document.getElementById('coverUploadArea'); + const coverImageInput = document.getElementById('cover_image'); + const coverFileName = document.getElementById('coverFileName'); - // Drag and drop + // Cover image handling + coverUploadArea.addEventListener('click', () => { + coverImageInput.click(); + }); + + coverImageInput.addEventListener('change', (e) => { + if (e.target.files.length > 0) { + const file = e.target.files[0]; + const reader = new FileReader(); + + reader.onload = (event) => { + const preview = document.getElementById('currentCoverImg'); + if (preview.tagName === 'IMG') { + preview.src = event.target.result; + } else { + const img = document.createElement('img'); + img.src = event.target.result; + img.alt = 'Cover preview'; + preview.replaceWith(img); + img.id = 'currentCoverImg'; + } + }; + + reader.readAsDataURL(file); + + coverFileName.innerHTML = '

Selected: ' + file.name + ' (' + (file.size / 1024 / 1024).toFixed(2) + ' MB)

'; + } + }); + + // Drag and drop for cover + coverUploadArea.addEventListener('dragover', (e) => { + e.preventDefault(); + coverUploadArea.classList.add('dragover'); + }); + + coverUploadArea.addEventListener('dragleave', () => { + coverUploadArea.classList.remove('dragover'); + }); + + coverUploadArea.addEventListener('drop', (e) => { + e.preventDefault(); + coverUploadArea.classList.remove('dragover'); + if (e.dataTransfer.files.length > 0) { + coverImageInput.files = e.dataTransfer.files; + const event = new Event('change', { bubbles: true }); + coverImageInput.dispatchEvent(event); + } + }); + + // Regular photos drag and drop uploadArea.addEventListener('dragover', (e) => { e.preventDefault(); uploadArea.classList.add('dragover'); diff --git a/src/processors/save_album.php b/src/processors/save_album.php index 1638c00d..8338ea59 100644 --- a/src/processors/save_album.php +++ b/src/processors/save_album.php @@ -58,6 +58,43 @@ try { } } + // Handle cover image upload + $coverImagePath = null; + if (isset($_FILES['cover_image']) && $_FILES['cover_image']['error'] !== UPLOAD_ERR_NO_FILE) { + $allowedMimes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp']; + $maxSize = 5 * 1024 * 1024; // 5MB + + $fileName = $_FILES['cover_image']['name']; + $fileTmpName = $_FILES['cover_image']['tmp_name']; + $fileSize = $_FILES['cover_image']['size']; + $fileMime = mime_content_type($fileTmpName); + + // Validate file + if (!in_array($fileMime, $allowedMimes)) { + throw new Exception('Invalid cover image file type'); + } + + if ($fileSize > $maxSize) { + throw new Exception('Cover image file too large (max 5MB)'); + } + + // Generate unique filename + $ext = pathinfo($fileName, PATHINFO_EXTENSION); + $newFileName = 'cover_' . uniqid() . '.' . $ext; + $filePath = $albumDir . '/' . $newFileName; + $coverImagePath = '/assets/uploads/gallery/' . $album_id . '/' . $newFileName; + + if (!move_uploaded_file($fileTmpName, $filePath)) { + throw new Exception('Failed to upload cover image'); + } + + // Update cover image in album record + $updateCover = $conn->prepare("UPDATE photo_albums SET cover_image = ? WHERE album_id = ?"); + $updateCover->bind_param("si", $coverImagePath, $album_id); + $updateCover->execute(); + $updateCover->close(); + } + // Handle photo uploads if (isset($_FILES['photos']) && $_FILES['photos']['error'][0] !== UPLOAD_ERR_NO_FILE) { $allowedMimes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp']; @@ -95,8 +132,8 @@ try { throw new Exception('Failed to upload: ' . $fileName); } - // Set first photo as cover - if ($firstPhoto) { + // Set first photo as cover if no cover image was uploaded + if ($firstPhoto && !$coverImagePath) { $updateCover = $conn->prepare("UPDATE photo_albums SET cover_image = ? WHERE album_id = ?"); $updateCover->bind_param("si", $relativePath, $album_id); $updateCover->execute(); diff --git a/src/processors/update_album.php b/src/processors/update_album.php index 93b6b0e7..e225cac1 100644 --- a/src/processors/update_album.php +++ b/src/processors/update_album.php @@ -75,6 +75,60 @@ try { $updateStmt->execute(); $updateStmt->close(); + // Handle cover image upload if provided + if (isset($_FILES['cover_image']) && $_FILES['cover_image']['error'] !== UPLOAD_ERR_NO_FILE) { + $allowedMimes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp']; + $maxSize = 5 * 1024 * 1024; // 5MB + + $fileName = $_FILES['cover_image']['name']; + $fileTmpName = $_FILES['cover_image']['tmp_name']; + $fileSize = $_FILES['cover_image']['size']; + $fileMime = mime_content_type($fileTmpName); + + // Validate file + if (!in_array($fileMime, $allowedMimes)) { + throw new Exception('Invalid cover image file type'); + } + + if ($fileSize > $maxSize) { + throw new Exception('Cover image file too large (max 5MB)'); + } + + $albumDir = $rootPath . '/assets/uploads/gallery/' . $album_id; + + // Delete old cover if it exists + $oldCoverStmt = $conn->prepare("SELECT cover_image FROM photo_albums WHERE album_id = ?"); + $oldCoverStmt->bind_param("i", $album_id); + $oldCoverStmt->execute(); + $oldCoverResult = $oldCoverStmt->get_result(); + if ($oldCoverResult->num_rows > 0) { + $oldCover = $oldCoverResult->fetch_assoc(); + if ($oldCover['cover_image']) { + $oldCoverPath = $_SERVER['DOCUMENT_ROOT'] . $oldCover['cover_image']; + if (file_exists($oldCoverPath)) { + unlink($oldCoverPath); + } + } + } + $oldCoverStmt->close(); + + // Generate unique filename + $ext = pathinfo($fileName, PATHINFO_EXTENSION); + $newFileName = 'cover_' . uniqid() . '.' . $ext; + $filePath = $albumDir . '/' . $newFileName; + $coverImagePath = '/assets/uploads/gallery/' . $album_id . '/' . $newFileName; + + if (!move_uploaded_file($fileTmpName, $filePath)) { + throw new Exception('Failed to upload cover image'); + } + + // Update cover image in album record + $updateCover = $conn->prepare("UPDATE photo_albums SET cover_image = ? WHERE album_id = ?"); + $updateCover->bind_param("si", $coverImagePath, $album_id); + $updateCover->execute(); + $updateCover->close(); + } + // Handle photo uploads if any if (isset($_FILES['photos']) && $_FILES['photos']['error'][0] !== UPLOAD_ERR_NO_FILE) { $allowedMimes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];