280 lines
8.2 KiB
PHP
280 lines
8.2 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();
|
|
$current_user_id = $_SESSION['user_id'];
|
|
|
|
// Fetch all albums with creator information
|
|
$albums_query = "
|
|
SELECT
|
|
pa.album_id,
|
|
pa.title,
|
|
pa.description,
|
|
pa.cover_image,
|
|
pa.created_at,
|
|
u.user_id,
|
|
u.first_name,
|
|
u.last_name,
|
|
u.profile_pic,
|
|
COUNT(p.photo_id) as photo_count
|
|
FROM photo_albums pa
|
|
INNER JOIN users u ON pa.user_id = u.user_id
|
|
LEFT JOIN photos p ON pa.album_id = p.album_id
|
|
GROUP BY pa.album_id
|
|
ORDER BY pa.created_at DESC
|
|
";
|
|
|
|
$result = $conn->query($albums_query);
|
|
$albums = [];
|
|
if ($result && $result->num_rows > 0) {
|
|
while ($row = $result->fetch_assoc()) {
|
|
$albums[] = $row;
|
|
}
|
|
}
|
|
|
|
$conn->close();
|
|
?>
|
|
|
|
<style>
|
|
.gallery-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
gap: 24px;
|
|
margin: 30px 0;
|
|
}
|
|
|
|
.album-card {
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
background: white;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
border: 1px solid #e0e0e0;
|
|
}
|
|
|
|
.album-image-wrapper {
|
|
position: relative;
|
|
width: 100%;
|
|
aspect-ratio: 16 / 10;
|
|
overflow: hidden;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
}
|
|
|
|
.album-image-wrapper img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.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.1rem;
|
|
font-weight: 700;
|
|
color: #2c3e50;
|
|
margin: 0;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.album-meta-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
}
|
|
|
|
.album-creator-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
min-width: 0;
|
|
flex: 1;
|
|
}
|
|
|
|
.album-creator-avatar {
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.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: 8px;
|
|
margin-top: auto;
|
|
align-items: center;
|
|
}
|
|
|
|
.album-edit-icon {
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
color: inherit;
|
|
padding: 0;
|
|
font-size: 1.2rem;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.album-edit-icon:hover {
|
|
color: #667eea;
|
|
}
|
|
|
|
.create-album-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.no-albums {
|
|
text-align: center;
|
|
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>
|
|
|
|
<?php
|
|
$pageTitle = 'Photo Gallery';
|
|
$breadcrumbs = [['Home' => 'index.php'], ['Members Area' => '#']];
|
|
require_once($rootPath . '/components/banner.php');
|
|
?>
|
|
|
|
<section class="tour-list-page py-100 rel">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px;">
|
|
<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
|
|
</a>
|
|
</div>
|
|
|
|
<?php if (count($albums) > 0): ?>
|
|
<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>
|
|
<?php endif; ?>
|
|
</div>
|
|
|
|
<div class="album-footer">
|
|
<h3 class="album-title" title="<?php echo htmlspecialchars($album['title']); ?>">
|
|
<?php echo htmlspecialchars($album['title']); ?>
|
|
</h3>
|
|
|
|
<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="theme-btn" style="width: 100%;">
|
|
View
|
|
</a>
|
|
<?php if ($album['user_id'] == $current_user_id): ?>
|
|
<a href="edit_album?id=<?php echo $album['album_id']; ?>" class="album-edit-icon" title="Edit">
|
|
<i class="far fa-edit"></i>
|
|
</a>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
<?php else: ?>
|
|
<div class="no-albums">
|
|
<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>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<?php include_once(dirname(dirname(dirname(__DIR__))) . '/components/insta_footer.php'); ?>
|