Files
4WDCSA.co.za/src/pages/blog/blog.php

241 lines
11 KiB
PHP

<?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'); ?>