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

2025-12-08 10:20:12 +02:00
parent 54bd98c5de
commit 0af0bd33f9
66 changed files with 2178 additions and 210 deletions
--- a/src/pages/blog/user_blogs.php
+++ b/src/pages/blog/user_blogs.php
@@ -0,0 +1,146 @@
+<?php
+$rootPath = dirname(dirname(dirname(__DIR__)));
+require_once($rootPath . "/src/config/env.php");
+require_once($rootPath . "/src/config/connection.php");
+require_once($rootPath . "/src/config/functions.php");
+require_once($rootPath . "/header.php");
+
+checkUserSession();
+
+$pageTitle = 'My Blog Posts';
+$breadcrumbs = [['Home' => 'index'], ['Blog' => 'blog']];
+require_once($rootPath . '/components/banner.php');
+
+$result = $conn->prepare("SELECT blog_id, title, description, status, date, image FROM blogs WHERE author = ? AND status != 'deleted' ORDER BY date DESC");
+
+$result->bind_param("i", $user_id);
+$result->execute();
+$posts = $result->get_result();
+?>
+
+<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
+$bannerFolder = 'assets/images/banners/';
+$bannerImages = glob($bannerFolder . '*.{jpg,jpeg,png,webp}', GLOB_BRACE);
+
+
+?>
+
+<!-- Blog List Area start -->
+<section class="blog-list-page py-100 rel z-1">
+    <div class="container">
+        <div class="row">
+            <div class="col-lg-12">
+
+            <h2>My Posts</h2>
+            <?php if (isset($_SESSION['message'])): ?>
+                    <div class="alert alert-warning message-box">
+                        <?php echo $_SESSION['message']; ?>
+                        <span class="close-btn" onclick="this.parentElement.style.display='none'">&times;</span>
+                    </div>
+                    <?php unset($_SESSION['message']); ?>
+                <?php endif; ?>
+                <a href="blog_create.php">+ New Post</a>
+
+                <?php while ($post = $posts->fetch_assoc()):
+                    // Determine cover image - use provided image or fallback placeholder
+                    $coverImage = $post["image"] ? $post["image"] : 'assets/images/placeholder.jpg';
+                    // Output the HTML structure with dynamic data
+                        echo '
+                    <div class="destination-item style-three bgc-lighter booking" data-aos="fade-up" data-aos-duration="1500" data-aos-offset="50">
+                        <div class="image" style="width:200px;height:200px;"><img src="' . htmlspecialchars($coverImage) . '" alt="' . htmlspecialchars($post["title"]) . '"></div>
+                        <div class="content" style="width:100%;">
+
+                        <div class="destination-header">
+                            <span class="badge bg-dark"> ' . strtoupper($post["status"]) . '</span>
+                         </div>
+                        
+                            <h5>' . $post["title"] . '</a></h5>
+                            <p>' . $post["description"] . '</p>
+                            <div class="destination-footer">
+                                <div class="btn-group" style="display:flex; justify-content:flex-end; gap:10px;">
+                                    <a href="blog_edit.php?token='.encryptData($post["blog_id"], $salt).'" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><span class="material-icons">edit</span></a>   
+                                    <a href="blog_read.php?token='.encryptData($post["blog_id"], $salt).'" data-bs-toggle="tooltip" data-bs-placement="top" title="Preview"><span class="material-icons">visibility</span></a>
+                                    <button type="button" class="publish-btn" data-blog-id="' . $post["blog_id"] . '" data-status="' . $post["status"] . '" data-bs-toggle="tooltip" data-bs-placement="top" title="' . ($post["status"] == "published" ? "Unpublish" : "Publish") . '" style="background:none; border:none; cursor:pointer; color:inherit;"><span class="material-icons">' . ($post["status"] == "published" ? "cloud_off" : "cloud_upload") . '</span></button>
+                                    <a href="blog_delete.php?token='.encryptData($post["blog_id"], $salt).'" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete"><span class="material-icons">delete</span></a>                  
+                                </div>
+
+                            </div>
+                        </div>
+                    </div>';                
+                endwhile; ?>
+
+                               
+            </div>
+            
+        </div>
+    </div>
+</section>
+<!-- Blog List Area end -->
+ <script>
+  const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
+  tooltipTriggerList.forEach(el => new bootstrap.Tooltip(el));
+
+  // Handle publish/unpublish button clicks
+  document.querySelectorAll('.publish-btn').forEach(btn => {
+    btn.addEventListener('click', function() {
+      const blogId = this.dataset.blogId;
+      const status = this.dataset.status;
+      const action = status === 'published' ? 'unpublish' : 'publish';
+      const endpoint = status === 'published' ? 'blog_unpublish' : 'publish_blog';
+
+      const formData = new FormData();
+      formData.append('id', blogId);
+
+      fetch(endpoint, {
+        method: 'POST',
+        body: formData
+      })
+      .then(response => {
+        if (response.ok) {
+          alert(action.charAt(0).toUpperCase() + action.slice(1) + ' successful!');
+          location.reload();
+        } else {
+          alert(action + ' failed.');
+          console.error('Error:', response.statusText);
+        }
+      })
+      .catch(err => {
+        console.error('Error:', err);
+        alert(action + ' failed due to network error.');
+      });
+    });
+  });
+</script>
+
+
+<?php include_once($rootPath . '/components/insta_footer.php'); ?>