5736757f19
- Added dedicated cover image upload field in create_album.php form - Display current cover image preview when editing - Drag-and-drop support for cover image with real-time preview - Shows filename and file size after selection - Updated save_album.php to handle cover image upload - Updated update_album.php to handle cover image replacement - Deletes old cover image when updating - Cover image optional - first photo in album used as fallback - Recommended cover dimensions: 500x500px or larger (square) - File validation: max 5MB, supports JPG, PNG, GIF, WEBP - All cover image changes included in transaction with rollback on error
456 lines
15 KiB
PHP
456 lines
15 KiB
PHP
<?php
|
|
$headerStyle = 'light';
|
|
$rootPath = dirname(dirname(dirname(__DIR__)));
|
|
include_once($rootPath . '/header.php');
|
|
|
|
// Check if user has active membership
|
|
if (!isset($_SESSION['user_id'])) {
|
|
header('Location: login');
|
|
exit;
|
|
}
|
|
|
|
$is_member = getUserMemberStatus($_SESSION['user_id']);
|
|
if (!$is_member) {
|
|
header('Location: index');
|
|
exit;
|
|
}
|
|
|
|
$conn = openDatabaseConnection();
|
|
$album = null;
|
|
|
|
// Check if editing existing album
|
|
$album_id = isset($_GET['id']) ? intval($_GET['id']) : 0;
|
|
if ($album_id > 0) {
|
|
$stmt = $conn->prepare("SELECT * FROM photo_albums WHERE album_id = ? AND user_id = ?");
|
|
$stmt->bind_param("ii", $album_id, $_SESSION['user_id']);
|
|
$stmt->execute();
|
|
$result = $stmt->get_result();
|
|
|
|
if ($result->num_rows > 0) {
|
|
$album = $result->fetch_assoc();
|
|
}
|
|
$stmt->close();
|
|
|
|
if (!$album) {
|
|
$conn->close();
|
|
header('Location: gallery');
|
|
exit;
|
|
}
|
|
}
|
|
|
|
$conn->close();
|
|
|
|
$pageTitle = $album ? 'Edit Album' : 'Create Album';
|
|
$breadcrumbs = [['Home' => 'index.php'], ['Gallery' => 'gallery']];
|
|
require_once($rootPath . '/components/banner.php');
|
|
?>
|
|
|
|
<style>
|
|
.form-container {
|
|
background: #f9f9f7;
|
|
border: 1px solid #d8d8d8;
|
|
border-radius: 10px;
|
|
padding: 40px;
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
.form-group label {
|
|
display: block;
|
|
font-weight: 600;
|
|
color: #2c3e50;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.form-group input[type="text"],
|
|
.form-group textarea {
|
|
width: 100%;
|
|
padding: 12px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 6px;
|
|
font-size: 14px;
|
|
font-family: inherit;
|
|
}
|
|
|
|
.form-group input[type="text"]:focus,
|
|
.form-group textarea:focus {
|
|
outline: none;
|
|
border-color: #667eea;
|
|
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
|
}
|
|
|
|
.form-group textarea {
|
|
resize: vertical;
|
|
min-height: 120px;
|
|
}
|
|
|
|
.form-actions {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.form-actions button,
|
|
.form-actions a {
|
|
flex: 1;
|
|
padding: 12px 20px;
|
|
border: none;
|
|
border-radius: 6px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
text-align: center;
|
|
transition: background 0.3s;
|
|
}
|
|
|
|
.btn-submit {
|
|
background: #667eea;
|
|
color: white;
|
|
}
|
|
|
|
.btn-submit:hover {
|
|
background: #764ba2;
|
|
}
|
|
|
|
.btn-cancel {
|
|
background: #ddd;
|
|
color: #333;
|
|
}
|
|
|
|
.btn-cancel:hover {
|
|
background: #ccc;
|
|
}
|
|
|
|
.photos-section {
|
|
margin-top: 40px;
|
|
padding-top: 40px;
|
|
border-top: 2px solid #d8d8d8;
|
|
}
|
|
|
|
.photos-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
|
gap: 15px;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.photo-item-edit {
|
|
position: relative;
|
|
aspect-ratio: 1;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
background: white;
|
|
border: 1px solid #ddd;
|
|
}
|
|
|
|
.photo-item-edit img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.photo-delete-btn {
|
|
position: absolute;
|
|
top: 5px;
|
|
right: 5px;
|
|
background: #f44336;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 50%;
|
|
width: 30px;
|
|
height: 30px;
|
|
cursor: pointer;
|
|
font-size: 18px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: background 0.3s;
|
|
}
|
|
|
|
.photo-delete-btn:hover {
|
|
background: #d32f2f;
|
|
}
|
|
|
|
.upload-area {
|
|
border: 2px dashed #667eea;
|
|
border-radius: 8px;
|
|
padding: 30px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
transition: background 0.3s;
|
|
}
|
|
|
|
.upload-area:hover {
|
|
background: rgba(102, 126, 234, 0.05);
|
|
}
|
|
|
|
.upload-area.dragover {
|
|
background: rgba(102, 126, 234, 0.1);
|
|
border-color: #764ba2;
|
|
}
|
|
|
|
.upload-input {
|
|
display: none;
|
|
}
|
|
|
|
.upload-text {
|
|
color: #667eea;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.helper-text {
|
|
font-size: 0.9rem;
|
|
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;
|
|
}
|
|
</style>
|
|
|
|
<section class="tour-list-page py-100 rel">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="form-container">
|
|
<h2 style="margin-top: 0; color: #2c3e50;"><?php echo $album ? 'Edit Album' : 'Create Album'; ?></h2>
|
|
|
|
<form id="albumForm" method="POST" action="<?php echo $album ? 'update_album' : 'save_album'; ?>" enctype="multipart/form-data">
|
|
<input type="hidden" name="csrf_token" value="<?php echo generateCSRFToken(); ?>">
|
|
<?php if ($album): ?>
|
|
<input type="hidden" name="album_id" value="<?php echo $album['album_id']; ?>">
|
|
<?php endif; ?>
|
|
|
|
<div class="form-group">
|
|
<label for="title">Album Title *</label>
|
|
<input type="text" id="title" name="title" required value="<?php echo $album ? htmlspecialchars($album['title']) : ''; ?>">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="description">Description</label>
|
|
<textarea id="description" name="description" placeholder="Add a description for your album..."><?php echo $album ? htmlspecialchars($album['description']) : ''; ?></textarea>
|
|
<div class="helper-text">Optional: Share details about when, where, or why you created this album</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="cover_image">Album Cover Image</label>
|
|
<div class="cover-preview-area">
|
|
<?php if ($album && $album['cover_image']): ?>
|
|
<div class="current-cover">
|
|
<img id="currentCoverImg" src="<?php echo htmlspecialchars($album['cover_image']); ?>" alt="Current cover">
|
|
<p style="margin-top: 10px; font-size: 0.9rem; color: #666;">Current cover image</p>
|
|
</div>
|
|
<?php else: ?>
|
|
<div id="currentCoverImg" style="width: 100%; height: 200px; background: #f0f0f0; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: #999; margin-bottom: 15px;">No cover image yet</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
<div class="upload-area" id="coverUploadArea" style="margin-top: 15px;">
|
|
<input type="file" id="cover_image" name="cover_image" accept="image/*" class="upload-input">
|
|
<div style="font-size: 1.5rem; margin-bottom: 10px;">🖼️</div>
|
|
<p class="upload-text">Click to select cover image</p>
|
|
<div class="helper-text">Image will be used as album thumbnail. Recommended: Square image (500x500px or larger)</div>
|
|
</div>
|
|
<div id="coverFileName" style="margin-top: 10px;"></div>
|
|
</div>
|
|
|
|
<?php if ($album): ?>
|
|
<div class="photos-section">
|
|
<h4>Photos in Album</h4>
|
|
<div class="photos-grid" id="photosGrid">
|
|
<!-- Photos will be loaded here -->
|
|
</div>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<div class="form-group">
|
|
<label for="photos">Upload Photos</label>
|
|
<div class="upload-area" id="uploadArea">
|
|
<input type="file" id="photos" name="photos[]" multiple accept="image/*" class="upload-input">
|
|
<div style="font-size: 2rem; margin-bottom: 10px;">📸</div>
|
|
<p class="upload-text">Drag and drop photos here or click to select</p>
|
|
<div class="helper-text">Supports JPG, PNG, GIF, WEBP. Max 5MB per image</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="fileList" style="margin-top: 15px;"></div>
|
|
|
|
<div class="form-actions">
|
|
<button type="submit" class="btn-submit">
|
|
<?php echo $album ? 'Update Album' : 'Create Album'; ?>
|
|
</button>
|
|
<a href="gallery" class="btn-cancel">Cancel</a>
|
|
</div>
|
|
</form>
|
|
|
|
<?php if ($album): ?>
|
|
<div style="margin-top: 40px; padding-top: 40px; border-top: 2px solid #d8d8d8;">
|
|
<button type="button" onclick="deleteAlbum(<?php echo $album['album_id']; ?>)" class="btn-delete" style="background: #f44336; color: white; padding: 10px 20px; border: none; border-radius: 6px; cursor: pointer; width: 100%;">
|
|
<i class="far fa-trash"></i> Delete Album
|
|
</button>
|
|
</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<script>
|
|
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');
|
|
|
|
// 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 = '<p style="color: #667eea; font-weight: 500;">Selected: ' + file.name + ' (' + (file.size / 1024 / 1024).toFixed(2) + ' MB)</p>';
|
|
}
|
|
});
|
|
|
|
// 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');
|
|
});
|
|
|
|
uploadArea.addEventListener('dragleave', () => {
|
|
uploadArea.classList.remove('dragover');
|
|
});
|
|
|
|
uploadArea.addEventListener('drop', (e) => {
|
|
e.preventDefault();
|
|
uploadArea.classList.remove('dragover');
|
|
fileInput.files = e.dataTransfer.files;
|
|
updateFileList();
|
|
});
|
|
|
|
uploadArea.addEventListener('click', () => {
|
|
fileInput.click();
|
|
});
|
|
|
|
fileInput.addEventListener('change', updateFileList);
|
|
|
|
function updateFileList() {
|
|
fileList.innerHTML = '';
|
|
if (fileInput.files.length > 0) {
|
|
fileList.innerHTML = '<p style="color: #667eea; font-weight: 500; margin-bottom: 10px;">Selected files:</p>';
|
|
const ul = document.createElement('ul');
|
|
ul.style.margin = '0';
|
|
ul.style.paddingLeft = '20px';
|
|
|
|
for (let file of fileInput.files) {
|
|
const li = document.createElement('li');
|
|
li.textContent = file.name + ' (' + (file.size / 1024 / 1024).toFixed(2) + ' MB)';
|
|
li.style.color = '#666';
|
|
li.style.marginBottom = '5px';
|
|
ul.appendChild(li);
|
|
}
|
|
fileList.appendChild(ul);
|
|
}
|
|
}
|
|
|
|
function deleteAlbum(albumId) {
|
|
if (confirm('Are you sure you want to delete this album and all its photos? This action cannot be undone.')) {
|
|
window.location.href = 'delete_album?id=' + albumId;
|
|
}
|
|
}
|
|
|
|
// Load existing photos if editing
|
|
<?php if ($album): ?>
|
|
fetch('get_album_photos?id=<?php echo $album['album_id']; ?>')
|
|
.then(r => r.json())
|
|
.then(photos => {
|
|
const grid = document.getElementById('photosGrid');
|
|
photos.forEach(photo => {
|
|
const div = document.createElement('div');
|
|
div.className = 'photo-item-edit';
|
|
div.innerHTML = `
|
|
<img src="${photo.file_path}" alt="Photo">
|
|
<button type="button" class="photo-delete-btn" onclick="deletePhoto(${photo.photo_id})">✕</button>
|
|
`;
|
|
grid.appendChild(div);
|
|
});
|
|
});
|
|
|
|
function deletePhoto(photoId) {
|
|
if (confirm('Delete this photo?')) {
|
|
fetch('delete_photo', {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
|
|
body: 'photo_id=' + photoId + '&csrf_token=<?php echo generateCSRFToken(); ?>'
|
|
}).then(() => location.reload());
|
|
}
|
|
}
|
|
<?php endif; ?>
|
|
</script>
|
|
|
|
<?php include_once(dirname(dirname(dirname(__DIR__))) . '/components/insta_footer.php'); ?>
|