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;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
border-radius: 30px;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
|
||||
@@ -29,6 +29,7 @@ $album_query = "
|
||||
pa.album_id,
|
||||
pa.title,
|
||||
pa.description,
|
||||
pa.cover_image,
|
||||
pa.created_at,
|
||||
pa.user_id,
|
||||
u.first_name,
|
||||
@@ -80,17 +81,34 @@ $conn->close();
|
||||
|
||||
<style>
|
||||
.album-header {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
color: white;
|
||||
padding: 20px 20px;
|
||||
padding: 60px 20px;
|
||||
margin-bottom: 40px;
|
||||
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 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.album-creator-info {
|
||||
@@ -267,7 +285,7 @@ require_once($rootPath . '/components/banner.php');
|
||||
<i class="far fa-arrow-left"></i> Back to Gallery
|
||||
</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 style="flex: 1;">
|
||||
<h2 style="margin: 0; margin-bottom: 10px;"><?php echo htmlspecialchars($album['title']); ?></h2>
|
||||
|
||||
Reference in New Issue
Block a user