Find The Perfect Property Within Your Budget

You are just few clicks away from finding the perfect property that matches your budget.

Get Started

My Blog

Welcome to XTANAL BLOG

Eirmod sed ipsum dolor sit rebum labore magna erat. Tempor ut dolore lorem kasd vero ipsum sit eirmod sit. Ipsum diam justo sed rebum vero dolor duo.

Mobile views

very good

ebuka Ben - Owerri, World Bank
With our years of experience, we have understood the factors that influence the market and have guided many investors on how best to maximise the factors to their advantage. This is why our consultations are top notch.

8035151074

<?php
include '../includes/db.php';
session_start();

// Simple authentication
if (!isset($_SESSION['admin_logged_in'])) {
header("Location: login.php");
exit();
}

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$title = $_POST['title'];
$content = $_POST['content'];
$image_caption = $_POST['image_caption'];
$image_url = null;

// Handle image upload
if (isset($_FILES['image']) && $_FILES['image']['error'] === 0) {
// Validate file type and size
$allowedExtensions = ['jpg', 'jpeg', 'png', 'gif'];
$fileExtension = strtolower(pathinfo($_FILES['image']['name'], PATHINFO_EXTENSION));
$maxSize = 5 * 1024 * 1024; // 5MB limit

if (in_array($fileExtension, $allowedExtensions) && $_FILES['image']['size'] <= $maxSize) {
$imageName = basename($_FILES['image']['name']);
$imagePath = '../assets/uploads/' . $imageName;

if (move_uploaded_file($_FILES['image']['tmp_name'], $imagePath)) {
$image_url = $imageName; // Store the file name in the database
} else {
$error = "Failed to upload image.";
}
} else {
$error = "Invalid file type or size.";
}
}

// Insert post into database
if (empty($error)) {
$stmt = $pdo->prepare("INSERT INTO posts (title, content, image_url, image_caption) VALUES (?, ?, ?, ?)");
$stmt->execute([$title, $content, $image_url, $image_caption]);
header("Location: index.php");
exit();
}
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add New Post</title>
<link rel="stylesheet" href="../assets/css/style.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.js"></script>
<style>
/* Basic Styling */
body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
color: #333;
}

.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}

.page-title {
text-align: center;
margin-bottom: 30px;
}

.form-group {
margin-bottom: 20px;
}

.label {
font-weight: bold;
}

.input-field {
width: 100%;
padding: 10px;
font-size: 14px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}

.submit-button {
width: 100%;
padding: 12px;
font-size: 16px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}

.submit-button:disabled {
background-color: #cccccc;
}

.image-preview-container {
display: none;
text-align: center;
margin-top: 20px;
}

.cropped-image {
max-width: 100%;
height: auto;
border-radius: 8px;
margin-bottom: 10px;
}

#imageCaptionPreview {
font-style: italic;
color: #555;
}

/* Modal Styles */
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
padding-top: 60px;
}

.modal-content {
background-color: #fff;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
max-width: 600px;
}

.close-btn {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}

.close-btn:hover,
.close-btn:focus {
color: black;
text-decoration: none;
cursor: pointer;
}

/* Media Queries for Mobile Devices */
@media (max-width: 600px) {
.container {
padding: 10px;
}

.submit-button {
padding: 10px;
}

.modal-content {
width: 100%;
margin: 0 10px;
}
}

</style>
</head>
<body>

<?php include '../includes/header.php'; ?>

<div class="container">
<h1 class="page-title">Add New Post</h1>

<?php if (isset($error)): ?>
<div class="alert error"><?= $error ?></div>
<?php endif; ?>

<form action="post_add.php" method="POST" enctype="multipart/form-data" class="post-form" id="postForm">
<div class="form-group">
<label for="title" class="label">Post Title</label>
<input type="text" name="title" id="title" class="input-field" required>
</div>

<div class="form-group">
<label for="content" class="label">Content</label>
<textarea name="content" id="content" class="input-field" rows="6" required></textarea>
</div>

<div class="form-group">
<label for="image" class="label">Upload Image</label>
<input type="file" name="image" id="image" class="input-field" accept="image/*">
</div>

<div class="form-group">
<label for="image_caption" class="label">Image Caption</label>
<input type="text" name="image_caption" id="image_caption" class="input-field">
</div>

<button type="submit" class="submit-button">Add Post</button>
</form>


<div id="croppedImagePreviewContainer" class="image-preview-container">
<h3>Cropped Image Preview</h3>
<img id="croppedImagePreview" src="" alt="Cropped Image Preview" class="cropped-image">
<p id="imageCaptionPreview"></p>
</div>
</div>


<div class="modal" id="imageModal">
<div class="modal-content">
<span class="close-btn" id="closeModal">×</span>
<h2>Crop Your Image</h2>
<img id="imagePreview" src="" alt="Image Preview">
<button type="button" id="cropButton" class="submit-button" disabled>Crop and Preview</button>
</div>
</div>

<?php include '../includes/footer.php'; ?>

<script>
$(document).ready(function() {
var $image = $('#imagePreview');
var cropper;
var $croppedImagePreview = $('#croppedImagePreview');
var $imageCaptionPreview = $('#imageCaptionPreview');

// Open modal when image is selected
$('#image').on('change', function(e) {
var reader = new FileReader();
reader.onload = function(event) {
var imageUrl = event.target.result;
$('#imageModal').show();
$image.attr('src', imageUrl);
cropper = new Cropper($image[0], {
aspectRatio: 16 / 9,
viewMode: 1,
autoCropArea: 0.65
});

// Enable the crop button when image is loaded
$('#cropButton').prop('disabled', false);
};
reader.readAsDataURL(this.files[0]);
});

// Close the modal when the close button is clicked
$('#closeModal').on('click', function() {
$('#imageModal').hide();
if (cropper) {
cropper.destroy();
}
});

// Handle cropping and image preview on the page
$('#cropButton').on('click', function(event) {
event.preventDefault();

// Get cropped canvas
var canvas = cropper.getCroppedCanvas();

// Show the cropped image as a preview on the page
var croppedImageURL = canvas.toDataURL(); // Get the cropped image data URL
$croppedImagePreview.attr('src', croppedImageURL); // Display cropped image in preview container
$croppedImagePreview.show();

// Show the caption
var caption = $('#image_caption').val();
$imageCaptionPreview.text(caption);
$('#croppedImagePreviewContainer').show(); // Show the preview container

// Close the modal automatically after cropping
$('#imageModal').hide();
if (cropper) {
cropper.destroy(); // Clean up the cropper instance
}
});
});
</script>

</body>
</html>