feat: use album cover image as album header background
- Fetch cover_image in album query - Set album-header background-image with cover image - Add dark overlay (50% opacity) over cover for text readability - Increased padding for better header spacing with cover image - Improved visual design using cover image as backdrop - Fallback to overlay-only design if no cover image exists - Enhanced header layout with proper z-index for content layering
This commit is contained in:
BIN
assets/uploads/gallery/1/cover_69329485037df.jpg
Normal file
BIN
assets/uploads/gallery/1/cover_69329485037df.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 457 KiB |
@@ -171,7 +171,7 @@ $conn->close();
|
|||||||
background: #667eea;
|
background: #667eea;
|
||||||
color: white;
|
color: white;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 6px;
|
border-radius: 30px;
|
||||||
font-size: 0.85rem;
|
font-size: 0.85rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|||||||
@@ -29,6 +29,7 @@ $album_query = "
|
|||||||
pa.album_id,
|
pa.album_id,
|
||||||
pa.title,
|
pa.title,
|
||||||
pa.description,
|
pa.description,
|
||||||
|
pa.cover_image,
|
||||||
pa.created_at,
|
pa.created_at,
|
||||||
pa.user_id,
|
pa.user_id,
|
||||||
u.first_name,
|
u.first_name,
|
||||||
@@ -80,17 +81,34 @@ $conn->close();
|
|||||||
|
|
||||||
<style>
|
<style>
|
||||||
.album-header {
|
.album-header {
|
||||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
color: white;
|
color: white;
|
||||||
padding: 20px 20px;
|
padding: 60px 20px;
|
||||||
margin-bottom: 40px;
|
margin-bottom: 40px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.album-header::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.album-header-content {
|
.album-header-content {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.album-creator-info {
|
.album-creator-info {
|
||||||
@@ -267,7 +285,7 @@ require_once($rootPath . '/components/banner.php');
|
|||||||
<i class="far fa-arrow-left"></i> Back to Gallery
|
<i class="far fa-arrow-left"></i> Back to Gallery
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<div class="album-header">
|
<div class="album-header" <?php if ($album['cover_image']): ?>style="background-image: url('<?php echo htmlspecialchars($album['cover_image']); ?>');"<?php endif; ?>>
|
||||||
<div class="album-header-content px-2">
|
<div class="album-header-content px-2">
|
||||||
<div style="flex: 1;">
|
<div style="flex: 1;">
|
||||||
<h2 style="margin: 0; margin-bottom: 10px;"><?php echo htmlspecialchars($album['title']); ?></h2>
|
<h2 style="margin: 0; margin-bottom: 10px;"><?php echo htmlspecialchars($album['title']); ?></h2>
|
||||||
|
|||||||
Reference in New Issue
Block a user