Consolidate: Create reusable banner component and update 23 pages

- 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
This commit is contained in:
twotalesanimation
2025-12-03 17:02:54 +02:00
parent 110c853945
commit 2f94c17c28
21 changed files with 259 additions and 478 deletions

View File

@@ -1,5 +1,5 @@
<?php
$headerStyle = 'light';
<?php
$headerStyle = 'light';
include_once('header.php');
$conn = openDatabaseConnection();
@@ -22,33 +22,14 @@ while ($row = $result->fetch_assoc()) {
.info-box img {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
</style>
<?php
$bannerFolder = 'assets/images/banners/';
$bannerImages = glob($bannerFolder . '*.{jpg,jpeg,png,webp}', GLOB_BRACE);
$randomBanner = 'assets/images/base4/camping.jpg'; // default fallback
if (!empty($bannerImages)) {
$randomBanner = $bannerImages[array_rand($bannerImages)];
}
$pageTitle = 'Campsites';
$breadcrumbs = [['Home' => 'index.php']];
require_once('components/banner.php');
?>
<section class="page-banner-area pt-50 pb-35 rel z-1 bgs-cover" style="background-image: url('<?php echo $randomBanner; ?>');">
<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">Campsites</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">
<li class="breadcrumb-item"><a href="index.php">Home</a></li>
<li class="breadcrumb-item active">Campsites</li>
</ol>
</nav>
</div>
</div>
</section>
<!-- Tour List Area start -->
<section class="tour-list-page py-100 rel z-1">