Blog system enhancements: fix publish/unpublish permissions, add action buttons to blog listings, update gallery to show only published blog images, improve blog card layout and description truncation
This commit is contained in:
twotalesanimation
241
src/pages/blog/blog.php
Normal file
241
src/pages/blog/blog.php
Normal file
@@ -0,0 +1,241 @@
|
||||
<?php
|
||||
$headerStyle = 'light';
|
||||
$rootPath = dirname(dirname(dirname(__DIR__)));
|
||||
include_once($rootPath . '/header.php');
|
||||
?>
|
||||
|
||||
<style>
|
||||
.image {
|
||||
width: 400px;
|
||||
/* Set your desired width */
|
||||
height: 350px;
|
||||
/* Set your desired height */
|
||||
overflow: hidden;
|
||||
/* Hide any overflow */
|
||||
display: block;
|
||||
/* Ensure proper block behavior */
|
||||
}
|
||||
|
||||
.image img {
|
||||
width: 100%;
|
||||
/* Image scales to fill the container */
|
||||
height: 100%;
|
||||
/* Image scales to fill the container */
|
||||
object-fit: cover;
|
||||
/* Fills the container while maintaining aspect ratio */
|
||||
object-position: top;
|
||||
/* Aligns the top of the image with the top of the container */
|
||||
display: block;
|
||||
/* Prevents inline whitespace issues */
|
||||
|
||||
|
||||
}
|
||||
</style><?php
|
||||
$pageTitle = 'Blogs';
|
||||
$breadcrumbs = [['Home' => 'index.php']];
|
||||
require_once($rootPath . '/components/banner.php');
|
||||
?>
|
||||
|
||||
|
||||
<!-- Blog List Area start -->
|
||||
<section class="blog-list-page py-100 rel z-1">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-8">
|
||||
<?php
|
||||
// Query to retrieve data from the trips table
|
||||
$result = $conn->prepare("
|
||||
SELECT
|
||||
b.blog_id,
|
||||
b.title,
|
||||
b.description,
|
||||
b.category,
|
||||
b.status,
|
||||
b.date,
|
||||
b.image,
|
||||
b.members_only,
|
||||
CONCAT(u.first_name, ' ', u.last_name) AS author_name,
|
||||
u.email AS author_email,
|
||||
u.profile_pic
|
||||
FROM blogs b
|
||||
JOIN users u ON b.author = u.user_id
|
||||
WHERE b.status = 'published'
|
||||
ORDER BY b.date DESC
|
||||
");
|
||||
|
||||
$result->execute();
|
||||
$posts = $result->get_result();
|
||||
|
||||
if ($posts->num_rows > 0) {
|
||||
// Loop through each row
|
||||
while ($post = $posts->fetch_assoc()):
|
||||
$blog_id = $post['blog_id'];
|
||||
$blog_title = $post['title'];
|
||||
$blog_date = $post['date'];
|
||||
$blog_category = $post['category'];
|
||||
$blog_image = $post['image'];
|
||||
$blog_description = $post['description'];
|
||||
$members_only = $post['members_only'];
|
||||
if ($members_only) {
|
||||
if (!isset($_SESSION['user_id'])) {
|
||||
$blog_link = "login";
|
||||
$button_hover = "Members Only";
|
||||
$icon = "fa-lock";
|
||||
} else {
|
||||
if (getUserMemberStatus($_SESSION['user_id'])) {
|
||||
$blog_link = "blog_read?token=" . encryptData($blog_id, $salt);
|
||||
$button_hover = "Read More";
|
||||
$icon = "fa-arrow-right";
|
||||
} else {
|
||||
$blog_link = "membership";
|
||||
$button_hover = "Members Only";
|
||||
$icon = "fa-lock";
|
||||
}
|
||||
}
|
||||
} else {
|
||||
$blog_link = "blog_read?token=" . encryptData($blog_id, $salt);
|
||||
$button_hover = "Read More";
|
||||
$icon = "fa-arrow-right";
|
||||
}
|
||||
|
||||
// Output the HTML structure with dynamic data
|
||||
echo '
|
||||
<div class="blog-item style-three" data-aos="fade-up" data-aos-duration="1500" data-aos-offset="50">
|
||||
<div class="image" style="border-radius:20px; width:300px;height: 250px;margin-right:0px;">
|
||||
<img src="' . htmlspecialchars($blog_image) . '" alt="' . htmlspecialchars($post["title"]) . '">
|
||||
</div>
|
||||
<div style="padding: 10px; height: 100%; width:100%;">
|
||||
<div class="destination-header d-flex align-items-start gap-3" style="width:100%; align-items: flex-start;">
|
||||
<img src="' . $post["profile_pic"] . '" alt="Author" class="rounded-circle border" width="60" height="60">
|
||||
<div>
|
||||
<span class="badge bg-dark mb-1">' . strtoupper($post["category"]) . '</span>
|
||||
<h5 class="mb-0">' . $post["title"] . '</h5>
|
||||
<small class="text-muted">' . $post["author_name"] . '</small>
|
||||
</div>
|
||||
</div>
|
||||
<p>' . $post["description"] . '</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
';
|
||||
endwhile;
|
||||
} else {
|
||||
echo '<p>No blog posts found.</p>';
|
||||
}
|
||||
?>
|
||||
|
||||
|
||||
<!-- <ul class="pagination pt-15 flex-wrap" data-aos="fade-up" data-aos-duration="1500" data-aos-offset="50">
|
||||
<li class="page-item disabled">
|
||||
<span class="page-link"><i class="far fa-chevron-left"></i></span>
|
||||
</li>
|
||||
<li class="page-item active">
|
||||
<span class="page-link">
|
||||
1
|
||||
<span class="sr-only">(current)</span>
|
||||
</span>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">...</a></li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#"><i class="far fa-chevron-right"></i></a>
|
||||
</li>
|
||||
</ul> -->
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-8 col-sm-10 rmt-75">
|
||||
<div class="blog-sidebar">
|
||||
|
||||
<div class="widget widget-search" data-aos="fade-up" data-aos-duration="1500" data-aos-offset="50">
|
||||
<form action="#" class="default-search-form" onsubmit="return false;">
|
||||
<input type="text" id="blog-search" placeholder="Search" required="">
|
||||
<button type="submit" class="searchbutton far fa-search"></button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="widget widget-gallery" data-aos="fade-up" data-aos-duration="1500" data-aos-offset="50">
|
||||
<h5 class="widget-title">Gallery</h5>
|
||||
<div class="gallery">
|
||||
<?php
|
||||
// Get IDs of published blogs
|
||||
$published_blogs = $conn->query("SELECT blog_id FROM blogs WHERE status = 'published'");
|
||||
$blog_ids = [];
|
||||
while ($blog = $published_blogs->fetch_assoc()) {
|
||||
$blog_ids[] = $blog['blog_id'];
|
||||
}
|
||||
|
||||
// Display images from published blogs only
|
||||
if (!empty($blog_ids)) {
|
||||
foreach ($blog_ids as $bid) {
|
||||
$folder = $rootPath . '/uploads/blogs/' . $bid . '/';
|
||||
if (is_dir($folder)) {
|
||||
$files = glob($folder . '*.{jpg,jpeg,png,webp}', GLOB_BRACE);
|
||||
if (!empty($files)) {
|
||||
foreach ($files as $file) {
|
||||
// Skip cover images
|
||||
if (basename($file) !== 'cover.' . pathinfo($file, PATHINFO_EXTENSION)) {
|
||||
$relativePath = '/uploads/blogs/' . $bid . '/' . basename($file);
|
||||
echo '<a href="' . $relativePath . '" style="width: 110px; height: 110px; overflow: hidden; display: inline-block; margin: 2px;">';
|
||||
echo '<img src="' . $relativePath . '" alt="Gallery" style="width: 100%; height: 100%; object-fit: cover; display: block;">';
|
||||
echo '</a>';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="widget widget-cta" data-aos="fade-up" data-aos-duration="1500" data-aos-offset="50">
|
||||
<div class="content text-white">
|
||||
<span class="h6">Explore The World</span>
|
||||
<h3>Become a Member</h3>
|
||||
<a href="membership" class="theme-btn style-two bgc-secondary">
|
||||
<span data-hover="Explore Now">Join Now</span>
|
||||
<i class="fal fa-arrow-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="image">
|
||||
<img src="assets/images/logos/weblogo.png" alt="CTA">
|
||||
</div>
|
||||
<div class="cta-shape"><img src="assets/images/widgets/cta-shape.png" alt="Shape"></div>
|
||||
</div> -->
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Blog List Area end -->
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const searchInput = document.getElementById('blog-search');
|
||||
const blogItems = document.querySelectorAll('.blog-item');
|
||||
|
||||
if (searchInput) {
|
||||
searchInput.addEventListener('keyup', function() {
|
||||
const searchTerm = this.value.toLowerCase();
|
||||
|
||||
blogItems.forEach(function(item) {
|
||||
const title = item.querySelector('h5').textContent.toLowerCase();
|
||||
const category = item.querySelector('.category').textContent.toLowerCase();
|
||||
const description = item.querySelector('p').textContent.toLowerCase();
|
||||
const author = item.querySelector('.blog-meta li:nth-child(2)').textContent.toLowerCase();
|
||||
|
||||
if (title.includes(searchTerm) || category.includes(searchTerm) || description.includes(searchTerm) || author.includes(searchTerm)) {
|
||||
item.style.display = '';
|
||||
} else {
|
||||
item.style.display = 'none';
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<?php include_once(dirname(dirname(dirname(__DIR__))) . '/components/insta_footer.php'); ?>
|
||||
Reference in New Issue
Block a user