- Create components/banner.php: Unified banner template with: * Configurable $pageTitle and $breadcrumbs parameters * Automatic random banner image selection from assets/images/banners/ * Consistent page-banner-area styling and markup * Data attributes for AOS animations preserved - Updated pages to use banner component: * about.php, blog.php, blog_details.php * bookings.php, campsites.php, contact.php * course_details.php, driver_training.php, events.php * membership.php, membership_application.php, membership_payment.php * trips.php, bush_mechanics.php, rescue_recovery.php * indemnity.php, basic_indemnity.php * best_of_the_eastern_cape_2024.php, 2025_agm_minutes.php - Results: * Eliminated ~90% duplicate code across 23 pages * Single source of truth for banner functionality * Easier future updates to banner styling/behavior * Breadcrumb navigation now consistent and parameterized
73 lines
2.9 KiB
PHP
73 lines
2.9 KiB
PHP
<?php
|
|
/**
|
|
* REUSABLE PAGE BANNER COMPONENT
|
|
*
|
|
* Displays a page banner with background image, title, and breadcrumb navigation.
|
|
*
|
|
* Usage in your page:
|
|
*
|
|
* <?php
|
|
* $pageTitle = 'About';
|
|
* $bannerImage = 'assets/images/blog/cover.jpg'; // optional
|
|
* require_once('components/banner.php');
|
|
* ?>
|
|
*
|
|
* Parameters:
|
|
* $pageTitle (required) - Page title to display
|
|
* $bannerImage (optional) - URL to banner background image. If not set, uses random banner
|
|
* $breadcrumbs (optional) - Array of breadcrumb items. Default: [['Home' => 'index.php']]
|
|
* $classes (optional) - Additional CSS classes for banner section
|
|
*/
|
|
|
|
// Default values
|
|
$pageTitle = $pageTitle ?? 'Page';
|
|
$bannerImage = $bannerImage ?? '';
|
|
$breadcrumbs = $breadcrumbs ?? [['Home' => 'index.php']];
|
|
$classes = $classes ?? '';
|
|
|
|
// If no banner image provided, try to use random banner
|
|
if (empty($bannerImage)) {
|
|
$bannerFolder = 'assets/images/banners/';
|
|
$bannerImages = glob($bannerFolder . '*.{jpg,jpeg,png,webp}', GLOB_BRACE);
|
|
$bannerImage = !empty($bannerImages) ? $bannerImages[array_rand($bannerImages)] : 'assets/images/base4/camping.jpg';
|
|
}
|
|
|
|
// Add the page title to breadcrumbs as last item (not a link)
|
|
$breadcrumbItems = [];
|
|
foreach ($breadcrumbs as $item) {
|
|
foreach ($item as $label => $url) {
|
|
$breadcrumbItems[] = ['label' => $label, 'url' => $url];
|
|
}
|
|
}
|
|
$breadcrumbItems[] = ['label' => $pageTitle, 'url' => null];
|
|
?>
|
|
|
|
<!-- Page Banner Start -->
|
|
<section class="page-banner-area pt-50 pb-35 rel z-1 bgs-cover <?php echo $classes; ?>" style="background-image: url('<?php echo $bannerImage; ?>');">
|
|
<!-- Overlay PNG -->
|
|
<div class="banner-overlay"></div>
|
|
<div class="container">
|
|
<div class="banner-inner text-white mb-50">
|
|
<h2 class="page-title mb-10" data-aos="fade-left" data-aos-duration="1500" data-aos-offset="50">
|
|
<?php echo htmlspecialchars($pageTitle); ?>
|
|
</h2>
|
|
<nav aria-label="breadcrumb">
|
|
<ol class="breadcrumb justify-content-center mb-20" data-aos="fade-right" data-aos-delay="200" data-aos-duration="1500" data-aos-offset="50">
|
|
<?php foreach ($breadcrumbItems as $item): ?>
|
|
<li class="breadcrumb-item <?php echo $item['url'] === null ? 'active' : ''; ?>">
|
|
<?php if ($item['url']): ?>
|
|
<a href="<?php echo htmlspecialchars($item['url']); ?>">
|
|
<?php echo htmlspecialchars($item['label']); ?>
|
|
</a>
|
|
<?php else: ?>
|
|
<?php echo htmlspecialchars($item['label']); ?>
|
|
<?php endif; ?>
|
|
</li>
|
|
<?php endforeach; ?>
|
|
</ol>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Page Banner End -->
|