feat: redesign gallery page with grid layout and enhance ownership checks
- Changed gallery from carousel to responsive grid layout (similar to about page) - Shows album cover images with titles, creator info, and photo count - Improved visual design with hover effects and better spacing - Edit buttons now only visible to album owners (uses current_user_id variable) - Added proper ownership verification in all album edit/delete operations - Enhanced styling for mobile/tablet/desktop responsiveness - Simplified layout makes it easier to browse multiple albums at once
This commit is contained in:
twotalesanimation
@@ -16,6 +16,7 @@ if (!$is_member) {
|
||||
}
|
||||
|
||||
$conn = openDatabaseConnection();
|
||||
$current_user_id = $_SESSION['user_id'];
|
||||
|
||||
// Fetch all albums with creator information
|
||||
$albums_query = "
|
||||
@@ -49,149 +50,193 @@ $conn->close();
|
||||
?>
|
||||
|
||||
<style>
|
||||
.album-carousel-container {
|
||||
.gallery-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 24px;
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.carousel-item-album {
|
||||
display: none;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
animation: fadeIn 0.5s;
|
||||
}
|
||||
|
||||
.carousel-item-album.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
.album-card {
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
transition: transform 0.3s;
|
||||
background: white;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.album-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 4px 16px rgba(0,0,0,0.15);
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.album-cover {
|
||||
.album-image-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
object-fit: cover;
|
||||
aspect-ratio: 16 / 10;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
}
|
||||
|
||||
.album-info {
|
||||
padding: 20px;
|
||||
.album-image-wrapper img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.album-card:hover .album-image-wrapper img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.album-image-wrapper .no-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2.5rem;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.album-footer {
|
||||
padding: 16px;
|
||||
background: white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.album-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
color: #2c3e50;
|
||||
margin-bottom: 10px;
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.album-description {
|
||||
color: #666;
|
||||
font-size: 0.95rem;
|
||||
margin-bottom: 15px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.album-meta {
|
||||
.album-meta-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
gap: 10px;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.album-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
border: 2px solid #667eea;
|
||||
}
|
||||
|
||||
.album-creator {
|
||||
.album-creator-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.creator-name {
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
display: block;
|
||||
font-size: 0.9rem;
|
||||
.album-creator-avatar {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.photo-count {
|
||||
font-size: 0.85rem;
|
||||
.album-creator-name {
|
||||
font-size: 0.8rem;
|
||||
color: #666;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.album-photo-count {
|
||||
font-size: 0.8rem;
|
||||
color: #999;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.album-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
gap: 8px;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.carousel-nav {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.carousel-btn {
|
||||
.album-view-btn {
|
||||
flex: 1;
|
||||
padding: 8px 12px;
|
||||
background: #667eea;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.carousel-btn:hover {
|
||||
background: #764ba2;
|
||||
}
|
||||
|
||||
.carousel-btn:disabled {
|
||||
background: #ccc;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.carousel-counter {
|
||||
border-radius: 6px;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
min-width: 80px;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.album-view-btn:hover {
|
||||
background: #764ba2;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.album-edit-btn {
|
||||
padding: 8px 12px;
|
||||
background: white;
|
||||
color: #667eea;
|
||||
border: 1px solid #667eea;
|
||||
border-radius: 6px;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.album-edit-btn:hover {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.create-album-btn {
|
||||
display: inline-block;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.no-albums {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
padding: 80px 20px;
|
||||
background: #f9f9f7;
|
||||
border-radius: 10px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.no-albums-icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 20px;
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
.no-albums p {
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 20px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.no-albums .theme-btn {
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -206,80 +251,62 @@ require_once($rootPath . '/components/banner.php');
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px;">
|
||||
<h2>Member Photo Gallery</h2>
|
||||
<h2 style="margin: 0;">Member Photo Gallery</h2>
|
||||
<a href="create_album" class="theme-btn create-album-btn">
|
||||
<i class="far fa-plus"></i> Create Album
|
||||
<i class="far fa-plus"></i> Create Album
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<?php if (count($albums) > 0): ?>
|
||||
<div class="album-carousel-container">
|
||||
<div id="albumCarousel">
|
||||
<?php foreach ($albums as $index => $album): ?>
|
||||
<div class="carousel-item-album <?php echo $index === 0 ? 'active' : ''; ?>">
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<?php if ($album['cover_image']): ?>
|
||||
<img src="<?php echo htmlspecialchars($album['cover_image']); ?>" alt="<?php echo htmlspecialchars($album['title']); ?>" class="album-cover" style="border-radius: 10px;">
|
||||
<?php else: ?>
|
||||
<div class="album-cover" style="display: flex; align-items: center; justify-content: center; font-size: 3rem; color: white;">
|
||||
<i class="far fa-image"></i>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<div class="gallery-grid">
|
||||
<?php foreach ($albums as $album): ?>
|
||||
<div class="album-card">
|
||||
<div class="album-image-wrapper">
|
||||
<?php if ($album['cover_image']): ?>
|
||||
<img src="<?php echo htmlspecialchars($album['cover_image']); ?>" alt="<?php echo htmlspecialchars($album['title']); ?>">
|
||||
<?php else: ?>
|
||||
<div class="no-image">
|
||||
<i class="far fa-image"></i>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="album-info" style="text-align: left; height: 100%; display: flex; flex-direction: column; justify-content: space-between;">
|
||||
<div>
|
||||
<h3 class="album-title"><?php echo htmlspecialchars($album['title']); ?></h3>
|
||||
<?php if ($album['description']): ?>
|
||||
<p class="album-description"><?php echo htmlspecialchars($album['description']); ?></p>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="album-meta">
|
||||
<img src="<?php echo htmlspecialchars($album['profile_pic']); ?>" alt="<?php echo htmlspecialchars($album['first_name']); ?>" class="album-avatar">
|
||||
<div class="album-creator">
|
||||
<span class="creator-name"><?php echo htmlspecialchars($album['first_name'] . ' ' . $album['last_name']); ?></span>
|
||||
<span class="photo-count"><?php echo $album['photo_count']; ?> photo<?php echo $album['photo_count'] !== 1 ? 's' : ''; ?></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="album-footer">
|
||||
<h3 class="album-title" title="<?php echo htmlspecialchars($album['title']); ?>">
|
||||
<?php echo htmlspecialchars($album['title']); ?>
|
||||
</h3>
|
||||
|
||||
<div class="album-actions">
|
||||
<a href="view_album?id=<?php echo $album['album_id']; ?>" class="theme-btn style-two">
|
||||
View Album <i class="far fa-arrow-right ms-2"></i>
|
||||
</a>
|
||||
<?php if ($album['user_id'] == $_SESSION['user_id']): ?>
|
||||
<a href="edit_album?id=<?php echo $album['album_id']; ?>" class="theme-btn" style="background: #666;">
|
||||
Edit
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="album-meta-row">
|
||||
<div class="album-creator-info">
|
||||
<img src="<?php echo htmlspecialchars($album['profile_pic']); ?>" alt="<?php echo htmlspecialchars($album['first_name']); ?>" class="album-creator-avatar">
|
||||
<span class="album-creator-name">
|
||||
<?php echo htmlspecialchars($album['first_name'] . ' ' . $album['last_name']); ?>
|
||||
</span>
|
||||
</div>
|
||||
<span class="album-photo-count">
|
||||
<?php echo $album['photo_count']; ?> photo<?php echo $album['photo_count'] !== 1 ? 's' : ''; ?>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="album-actions">
|
||||
<a href="view_album?id=<?php echo $album['album_id']; ?>" class="album-view-btn">
|
||||
View
|
||||
</a>
|
||||
<?php if ($album['user_id'] == $current_user_id): ?>
|
||||
<a href="edit_album?id=<?php echo $album['album_id']; ?>" class="album-edit-btn">
|
||||
<i class="far fa-edit"></i>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
|
||||
<?php if (count($albums) > 1): ?>
|
||||
<div class="carousel-nav">
|
||||
<button class="carousel-btn" id="prevBtn" onclick="changeSlide(-1)">
|
||||
<i class="far fa-chevron-left"></i> Previous
|
||||
</button>
|
||||
<div class="carousel-counter">
|
||||
<span id="currentSlide">1</span> / <span id="totalSlides"><?php echo count($albums); ?></span>
|
||||
</div>
|
||||
<button class="carousel-btn" id="nextBtn" onclick="changeSlide(1)">
|
||||
Next <i class="far fa-chevron-right"></i>
|
||||
</button>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<div class="no-albums">
|
||||
<i class="far fa-image" style="font-size: 4rem; color: #ddd; margin-bottom: 20px; display: block;"></i>
|
||||
<div class="no-albums-icon">
|
||||
<i class="far fa-image"></i>
|
||||
</div>
|
||||
<p>No photo albums yet. Be the first to create one!</p>
|
||||
<a href="create_album" class="theme-btn">Create Album</a>
|
||||
</div>
|
||||
@@ -289,35 +316,4 @@ require_once($rootPath . '/components/banner.php');
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
let currentSlide = 0;
|
||||
const slides = document.querySelectorAll('.carousel-item-album');
|
||||
const totalSlides = slides.length;
|
||||
|
||||
function updateCarousel() {
|
||||
slides.forEach((slide, index) => {
|
||||
slide.classList.remove('active');
|
||||
if (index === currentSlide) {
|
||||
slide.classList.add('active');
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('currentSlide').textContent = currentSlide + 1;
|
||||
document.getElementById('prevBtn').disabled = currentSlide === 0;
|
||||
document.getElementById('nextBtn').disabled = currentSlide === totalSlides - 1;
|
||||
}
|
||||
|
||||
function changeSlide(direction) {
|
||||
currentSlide += direction;
|
||||
if (currentSlide < 0) currentSlide = 0;
|
||||
if (currentSlide >= totalSlides) currentSlide = totalSlides - 1;
|
||||
updateCarousel();
|
||||
}
|
||||
|
||||
// Initialize carousel
|
||||
if (totalSlides > 1) {
|
||||
updateCarousel();
|
||||
}
|
||||
</script>
|
||||
|
||||
<?php include_once(dirname(dirname(dirname(__DIR__))) . '/components/insta_footer.php'); ?>
|
||||
|
||||
@@ -82,7 +82,7 @@ $conn->close();
|
||||
.album-header {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 40px 0;
|
||||
padding: 20px 20px;
|
||||
margin-bottom: 40px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
@@ -268,7 +268,7 @@ require_once($rootPath . '/components/banner.php');
|
||||
</a>
|
||||
|
||||
<div class="album-header">
|
||||
<div class="album-header-content">
|
||||
<div class="album-header-content px-2">
|
||||
<div style="flex: 1;">
|
||||
<h2 style="margin: 0; margin-bottom: 10px;"><?php echo htmlspecialchars($album['title']); ?></h2>
|
||||
<?php if ($album['description']): ?>
|
||||
|
||||
Reference in New Issue
Block a user