File Manager

Editing:hero_images.php

<?php
require_once 'header.php';

$msg = '';
$upload_dir = '../uploads/hero/';
if (!is_dir($upload_dir)) mkdir($upload_dir, 0777, true);

// Auto-create hero_images table
try {
    $pdo->exec("CREATE TABLE IF NOT EXISTS `hero_images` (
      `id` int(11) NOT NULL AUTO_INCREMENT,
      `title` varchar(200) DEFAULT '',
      `subtitle` varchar(500) DEFAULT '',
      `image` varchar(255) NOT NULL,
      `sort_order` int(11) DEFAULT 0,
      `is_active` tinyint(1) DEFAULT 1,
      `created_at` timestamp NOT NULL DEFAULT current_timestamp(),
      PRIMARY KEY (`id`)
    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4");
} catch(Exception $e) {}

// Toggle active
if (isset($_GET['toggle'])) {
    $id = (int)$_GET['toggle'];
    try {
        $pdo->prepare("UPDATE hero_images SET is_active = 1 - is_active WHERE id=?")->execute([$id]);
        $msg = "<div class='alert alert-info'>Hero image status toggled.</div>";
    } catch(Exception $e) {}
}

// Delete
if (isset($_GET['delete'])) {
    $id = (int)$_GET['delete'];
    try {
        $stmt = $pdo->prepare("SELECT image FROM hero_images WHERE id=?");
        $stmt->execute([$id]);
        $row = $stmt->fetch();
        if ($row) @unlink($upload_dir . $row['image']);
        $pdo->prepare("DELETE FROM hero_images WHERE id=?")->execute([$id]);
        $msg = "<div class='alert alert-success'>Hero image deleted.</div>";
    } catch(Exception $e) {
        $msg = "<div class='alert alert-danger'>Error deleting image.</div>";
    }
}

// Add hero image
if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['action']) && $_POST['action'] == 'add') {
    $title      = $_POST['title'];
    $subtitle   = $_POST['subtitle'];
    $sort_order = (int)$_POST['sort_order'];
    $fname = '';

if (!empty($_FILES['image']['name']) && $_FILES['image']['error'] == 0) {
        $fname = time() . '_' . preg_replace('/[^a-zA-Z0-9._-]/', '_', basename($_FILES['image']['name']));
        move_uploaded_file($_FILES['image']['tmp_name'], $upload_dir . $fname);
    }

if ($fname) {
        try {
            $pdo->prepare("INSERT INTO hero_images (title, subtitle, image, sort_order) VALUES (?,?,?,?)")
                ->execute([$title, $subtitle, $fname, $sort_order]);
            $msg = "<div class='alert alert-success'>Hero image added successfully!</div>";
        } catch(Exception $e) {
            $msg = "<div class='alert alert-danger'>Error: " . e($e->getMessage()) . "</div>";
        }
    } else {
        $msg = "<div class='alert alert-warning'>Please select an image to upload.</div>";
    }
}

// Edit hero image
if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['action']) && $_POST['action'] == 'edit') {
    $id         = (int)$_POST['id'];
    $title      = $_POST['title'];
    $subtitle   = $_POST['subtitle'];
    $sort_order = (int)$_POST['sort_order'];

try {
        $fname = '';
        if (!empty($_FILES['image']['name']) && $_FILES['image']['error'] == 0) {
            // Remove old image
            $old = $pdo->prepare("SELECT image FROM hero_images WHERE id=?");
            $old->execute([$id]);
            $oldRow = $old->fetch();
            if ($oldRow) @unlink($upload_dir . $oldRow['image']);

$fname = time() . '_' . preg_replace('/[^a-zA-Z0-9._-]/', '_', basename($_FILES['image']['name']));
            move_uploaded_file($_FILES['image']['tmp_name'], $upload_dir . $fname);
            $pdo->prepare("UPDATE hero_images SET title=?, subtitle=?, image=?, sort_order=? WHERE id=?")
                ->execute([$title, $subtitle, $fname, $sort_order, $id]);
        } else {
            $pdo->prepare("UPDATE hero_images SET title=?, subtitle=?, sort_order=? WHERE id=?")
                ->execute([$title, $subtitle, $sort_order, $id]);
        }
        $msg = "<div class='alert alert-success'>Hero image updated!</div>";
    } catch(Exception $e) {
        $msg = "<div class='alert alert-danger'>Error updating.</div>";
    }
}

// Fetch all hero images
$heroes = [];
try {
    $stmt = $pdo->query("SELECT * FROM hero_images ORDER BY sort_order ASC, created_at DESC");
    $heroes = $stmt->fetchAll();
} catch(Exception $e) {}
?>

<div class="d-flex justify-content-between align-items-center mb-4">
    <h2><i class="fas fa-image text-gold me-2"></i> Hero Section Images</h2>
    <button class="btn btn-gold" data-bs-toggle="modal" data-bs-target="#addHeroModal">
        <i class="fas fa-plus me-2"></i> Add Hero Image
    </button>
</div>

<?= $msg ?>

<div class="alert alert-info d-flex align-items-center mb-4">
    <i class="fas fa-info-circle me-3 fs-5"></i>
    <div>These images appear as the <strong>background slideshow</strong> on the homepage hero section. Active images show on the website; inactive ones are hidden. Use <strong>Sort Order</strong> to control display sequence.</div>
</div>

<?php if (empty($heroes)): ?>
<div class="card">
    <div class="card-body text-center py-5 text-muted">
        <i class="fas fa-images fs-1 d-block mb-3"></i>
        <p>No hero images added yet. Click <strong>Add Hero Image</strong> to upload your first slide.</p>
    </div>
</div>
<?php else: ?>
<div class="row g-4">
    <?php foreach($heroes as $h): ?>
    <div class="col-md-6 col-lg-4">
        <div class="card h-100 border-0 shadow-sm overflow-hidden">
            <div class="position-relative">
                <img src="../uploads/hero/<?= e($h['image']) ?>" alt="Hero" class="w-100" style="height:200px;object-fit:cover;">
                <div class="position-absolute top-0 start-0 m-2">
                    <span class="badge <?= $h['is_active'] ? 'bg-success' : 'bg-secondary' ?>">
                        <?= $h['is_active'] ? 'Active' : 'Inactive' ?>
                    </span>
                    <span class="badge bg-dark ms-1">Order: <?= $h['sort_order'] ?></span>
                </div>
                
                <div class="position-absolute top-0 end-0 m-2 d-flex gap-1">
                    <a href="hero_images.php?toggle=<?= $h['id'] ?>" class="btn btn-sm <?= $h['is_active'] ? 'btn-warning' : 'btn-success' ?>" title="<?= $h['is_active'] ? 'Deactivate' : 'Activate' ?>">
                        <i class="fas fa-<?= $h['is_active'] ? 'eye-slash' : 'eye' ?>"></i>
                    </a>
                    <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#editHeroModal<?= $h['id'] ?>" title="Edit">
                        <i class="fas fa-edit"></i>
                    </button>
                    <a href="hero_images.php?delete=<?= $h['id'] ?>" class="btn btn-sm btn-danger" onclick="return confirm('Delete this hero image?')" title="Delete">
                        <i class="fas fa-trash"></i>
                    </a>
                </div>
            </div>
            <div class="card-body">
                <h6 class="mb-1"><?= e($h['title']) ?: '<span class="text-muted fst-italic">No title</span>' ?></h6>
                <p class="small text-muted mb-0"><?= e($h['subtitle']) ?: '<span class="fst-italic">No subtitle</span>' ?></p>
            </div>
        </div>
    </div>

<div class="modal fade" id="editHeroModal<?= $h['id'] ?>" tabindex="-1">
        <div class="modal-dialog">
            <form class="modal-content" method="POST" enctype="multipart/form-data">
                <div class="modal-header">
                    <h5 class="modal-title text-dark">Edit Hero Image</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="action" value="edit">
                    <input type="hidden" name="id" value="<?= $h['id'] ?>">
                    <div class="mb-3">
                        <label class="form-label text-dark">Slide Title</label>
                        <input type="text" name="title" class="form-control" value="<?= e($h['title']) ?>" placeholder="e.g. Premium Aluminium Designs">
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-dark">Slide Subtitle</label>
                        <textarea name="subtitle" class="form-control" rows="2" placeholder="Short description..."><?= e($h['subtitle']) ?></textarea>
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-dark">Sort Order</label>
                        <input type="number" name="sort_order" class="form-control" value="<?= $h['sort_order'] ?>" min="0">
                        <small class="text-muted">Lower numbers display first</small>
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-dark">Replace Image (optional)</label>
                        <input type="file" name="image" class="form-control" accept="image/*">
                        <div class="mt-2">
                            <img src="../uploads/hero/<?= e($h['image']) ?>" alt="Current" class="img-thumbnail" style="height:80px;object-fit:cover;">
                            <small class="text-muted d-block mt-1">Current image</small>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Update</button>
                </div>
            </form>
        </div>
    </div>
    <?php endforeach; ?>
</div>
<?php endif; ?>

<div class="modal fade" id="addHeroModal" tabindex="-1">
    <div class="modal-dialog">
        <form class="modal-content" method="POST" enctype="multipart/form-data">
            <div class="modal-header">
                <h5 class="modal-title"><i class="fas fa-image me-2 text-gold"></i>Add Hero Image</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" name="action" value="add">
                <div class="mb-3">
                    <label class="form-label">Upload Image *</label>
                    <input type="file" name="image" class="form-control" accept="image/*" required id="heroImgInput">
                    <small class="text-muted">Recommended: 1920×1080px or wider. JPG/PNG/WEBP.</small>
                    <div id="heroPreview" class="mt-2" style="display:none;">
                        <img id="heroPreviewImg" src="" alt="Preview" class="img-thumbnail" style="height:120px;object-fit:cover;width:100%;">
                    </div>
                </div>
                <div class="mb-3">
                    <label class="form-label">Slide Title</label>
                    <input type="text" name="title" class="form-control" placeholder="e.g. Elevate Your Space With Luxury Aluminium">
                </div>
                <div class="mb-3">
                    <label class="form-label">Slide Subtitle</label>
                    <textarea name="subtitle" class="form-control" rows="2" placeholder="Short tagline or description for this slide..."></textarea>
                </div>
                <div class="mb-3">
                    <label class="form-label">Sort Order</label>
                    <input type="number" name="sort_order" class="form-control" value="0" min="0">
                    <small class="text-muted">0 = first, 1 = second, etc.</small>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-gold px-4"><i class="fas fa-upload me-2"></i>Upload & Save</button>
            </div>
        </form>
    </div>
</div>

<?php require_once 'footer.php'; ?>

Cancel

🤩 File Manager - Mr.X

Editing:hero_images.php