hero& sidebar modularity and configurability
This commit is contained in:
parent
ab761a59d7
commit
5e1ee38b9f
|
|
@ -14,9 +14,6 @@ class HomeController
|
|||
try {
|
||||
$data = [
|
||||
'title' => 'Home - Wizdom Networks',
|
||||
'showSlider' => [
|
||||
'type' => 'hero'
|
||||
],
|
||||
'content' => "<h1>Welcome to Wizdom Networks</h1><p>Your trusted partner for IT Consulting and Services.</p>"
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,32 @@
|
|||
/* About Page Styles (v1) */
|
||||
|
||||
.about-h1 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: bold;
|
||||
color: #003366;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.about-i {
|
||||
font-size: 1.25rem;
|
||||
font-style: italic;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.about-small {
|
||||
font-size: 1rem;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
#about-row {
|
||||
margin-top: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container h2 {
|
||||
text-align: center;
|
||||
font-size: 2rem;
|
||||
margin-bottom: 30px;
|
||||
color: #003366;
|
||||
}
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
/* Bootstrap Optimization for Mobile & Desktop Consistency */
|
||||
|
||||
/* Ensure proper grid scaling */
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
/* Navigation Fixes */
|
||||
.navbar {
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
/* Adjust button sizes for better touchscreen usability */
|
||||
.btn {
|
||||
padding: 0.75rem 1.5rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* Improve form inputs on mobile */
|
||||
.form-control {
|
||||
padding: 0.75rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* Ensure text scaling remains readable */
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
padding: 0 15px;
|
||||
}
|
||||
.navbar-nav {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,18 +1,18 @@
|
|||
/* Hero Slider Styles */
|
||||
.hero-slider, .carousel-inner, .carousel-item {
|
||||
/* Slider Styles */
|
||||
.slider, .carousel-inner, .carousel-item {
|
||||
width: 100%;
|
||||
height: 65vh;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.hero-image {
|
||||
.slider-image {
|
||||
width: 100%;
|
||||
height: 65vh;
|
||||
object-fit: cover;
|
||||
filter: grayscale(100%);
|
||||
transition: filter 0.5s ease-in-out;
|
||||
}
|
||||
.hero-image:hover {
|
||||
.slider-image:hover {
|
||||
filter: grayscale(0%);
|
||||
}
|
||||
.carousel-indicators {
|
||||
|
|
|
|||
|
|
@ -1,11 +1,10 @@
|
|||
<?php
|
||||
|
||||
/**
|
||||
* Head Partial
|
||||
* Head Partial (v4)
|
||||
*
|
||||
* This file includes metadata, stylesheets, and scripts necessary for rendering the site.
|
||||
*/
|
||||
|
||||
?>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
|
@ -17,7 +16,7 @@
|
|||
onerror="this.onerror=null;this.href='/assets/bootstrap/css/bootstrap.min.css';">
|
||||
|
||||
<!-- Main Stylesheet -->
|
||||
<link rel="stylesheet" href="/assets/css/styles.css">
|
||||
<link rel="stylesheet" href="/assets/css/main.css">
|
||||
|
||||
<!-- Conditionally Load Hero Stylesheet -->
|
||||
<?php if (isset($heroConfig)) : ?>
|
||||
|
|
@ -25,10 +24,24 @@
|
|||
<?php endif; ?>
|
||||
|
||||
<!-- Conditionally Load Slider Stylesheet -->
|
||||
<?php if (isset($showSlider)) : ?>
|
||||
<?php if (isset($sliderConfig)) : ?>
|
||||
<link rel="stylesheet" href="/assets/css/slider.css">
|
||||
|
||||
<?php if (!empty($sliderConfig['id'])) : ?>
|
||||
<!-- Load Page-Specific Slider Styles -->
|
||||
<link rel="stylesheet" href="/assets/css/slider-<?php echo htmlspecialchars($sliderConfig['id'], ENT_QUOTES, 'UTF-8'); ?>.css">
|
||||
<?php endif; ?>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- Conditionally Load Sidebar Stylesheet -->
|
||||
<?php if (isset($sidebarConfig)) : ?>
|
||||
<link rel="stylesheet" href="/assets/css/sidebar.css">
|
||||
|
||||
<?php if (!empty($sidebarConfig['id'])) : ?>
|
||||
<!-- Load Page-Specific Sidebar Styles -->
|
||||
<link rel="stylesheet" href="/assets/css/sidebar-<?php echo htmlspecialchars($sidebarConfig['id'], ENT_QUOTES, 'UTF-8'); ?>.css">
|
||||
<?php endif; ?>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="icon" type="image/png" href="/assets/images/favicon.png">
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,14 @@
|
|||
<?php
|
||||
|
||||
use WizdomNetworks\WizeWeb\Core\View;
|
||||
|
||||
/**
|
||||
* Main Layout
|
||||
* Main Layout (v2)
|
||||
*
|
||||
* This file defines the overall structure of the web pages, ensuring consistency across all views.
|
||||
* This file serves as the primary layout template for rendering pages.
|
||||
* It includes dynamic loading for sidebar, hero, and slider components.
|
||||
*/
|
||||
|
||||
use WizdomNetworks\WizeWeb\Core\View;
|
||||
|
||||
?>
|
||||
|
||||
?><!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
|
@ -17,21 +18,26 @@
|
|||
<body>
|
||||
<?php View::render('partials/navbar', $data); ?>
|
||||
|
||||
<!-- Render Hero Section if Defined -->
|
||||
|
||||
<?php if (isset($heroConfig)) : ?>
|
||||
<!-- Render Hero Section if Defined -->
|
||||
<?php View::render('partials/hero', compact('heroConfig')); ?>
|
||||
<?php endif; ?>
|
||||
|
||||
|
||||
<?php if (isset($sliderConfig)) : ?>
|
||||
<!-- Render Slider if Defined -->
|
||||
<?php if (isset($showSlider)) : ?>
|
||||
<?php View::render('partials/slider', $showSlider); ?>
|
||||
<?php View::render('partials/slider', compact('sliderConfig')); ?>
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<!-- Sidebar -->
|
||||
<?php if (isset($sidebarConfig) && $sidebarConfig['enabled']) : ?>
|
||||
<div class="col-md-3">
|
||||
<?php View::render('partials/sidebar', $data); ?>
|
||||
<?php WizdomNetworks\WizeWeb\Core\View::render('partials/sidebar', compact('sidebarConfig')); ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<div class="col-md-9">
|
||||
<!-- Main Page Content -->
|
||||
<?php echo $content ?? ''; ?>
|
||||
|
|
|
|||
|
|
@ -3,14 +3,55 @@
|
|||
use WizdomNetworks\WizeWeb\Core\View;
|
||||
|
||||
/**
|
||||
* About Page View
|
||||
* About Page (v1)
|
||||
*
|
||||
* This view dynamically renders the About page using data provided by the AboutController.
|
||||
* This page renders the "About Us" section, refactored from the reference site.
|
||||
*/
|
||||
|
||||
// Ensure data is available before rendering
|
||||
$title = $data['title'] ?? 'About Us - Wizdom Networks';
|
||||
$content = $data['content'] ?? '';
|
||||
$heroConfig = $data['heroConfig'] ?? [];
|
||||
$title = 'About Us - Wizdom Networks';
|
||||
$content = '<div class="container">
|
||||
<div id="about-row" class="row">
|
||||
<div class="col-lg-4">
|
||||
<h1 class="about-h1">WHO</h1>
|
||||
<p class="about-i">Wizdom is a preeminent business and information technology consultancy.</p>
|
||||
<p class="about-small">Established in 2002, with clients throughout North America, we are a creative and innovative, results-oriented group who isn\'t afraid to push boundaries and think outside the box when necessary, all while pragmatically adhering to industry best practices.</p>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<h1 class="about-h1">WHAT</h1>
|
||||
<p class="about-i">We align your IT systems and technology with your business strategy and goals.</p>
|
||||
<p class="about-small">Ultimately providing you with an optimal path toward success. If you already have business and IT strategy alignment covered, we also manage IT projects & initiatives, infrastructure, train staff or executives, and <a href="/services.html">more</a>. Basically, if it\'s IT-related, we can get it done for you!</p>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<h1 class="about-h1">WHY</h1>
|
||||
<p class="about-i">Those who have worked with us in the past know that our passion is infectious.</p>
|
||||
<p class="about-small">But in a good way. It\'s the kind of passion that sparks creativity and facilitates collaboration—the kind that enables us to overcome technical hurdles and perceived business boundaries.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>';
|
||||
|
||||
// Sidebar Configuration
|
||||
$sidebarConfig = [
|
||||
'enabled' => true,
|
||||
'id' => 'about',
|
||||
'width' => '25%',
|
||||
'position' => 'right',
|
||||
'widgets' => [
|
||||
'<h3>Company Values</h3><p>Innovation, Integrity, and Excellence.</p>',
|
||||
'<h3>Our Vision</h3><p>Empowering businesses with cutting-edge IT solutions.</p>'
|
||||
]
|
||||
];
|
||||
|
||||
// Page-Specific Hero Configuration
|
||||
$heroConfig = [
|
||||
//'title' => 'Who We Are',
|
||||
'height' => '65vh',
|
||||
'enabled' => 'true',
|
||||
//'description' => 'Wizdom Networks is a premier IT consultancy, providing innovative solutions since 2002.',
|
||||
'image' => '/assets/images/wizdom-about-definitions.jpg',
|
||||
];
|
||||
|
||||
// Page-Specific Slider Configuration
|
||||
|
||||
|
||||
View::render('layouts/main', compact('title', 'content', 'heroConfig'));
|
||||
|
|
|
|||
|
|
@ -1,10 +1,9 @@
|
|||
|
||||
<?php
|
||||
|
||||
use WizdomNetworks\WizeWeb\Core\View;
|
||||
|
||||
/**
|
||||
* Home Page View
|
||||
* Home Page View (v2)
|
||||
*
|
||||
* This view dynamically renders the homepage using data provided by the HomeController.
|
||||
*/
|
||||
|
|
@ -12,7 +11,75 @@ use WizdomNetworks\WizeWeb\Core\View;
|
|||
// Ensure data is available before rendering
|
||||
$title = $data['title'] ?? 'Home - Wizdom Networks';
|
||||
$content = $data['content'] ?? '';
|
||||
$heroConfig = $data['heroConfig'] ?? [];
|
||||
$showSlider = $data['showSlider'] ?? [];
|
||||
|
||||
View::render('layouts/main', compact('title', 'content', 'heroConfig', 'showSlider'));
|
||||
// Slider Configuration
|
||||
$sliderConfig = [
|
||||
'id' => 'home', // Unique identifier for home page slider styles
|
||||
'type' => 'standard',
|
||||
'height' => '65vh',
|
||||
'slides' => [
|
||||
[
|
||||
'src' => '/assets/images/information-light.jpg',
|
||||
'alt' => 'Information Light Banner',
|
||||
'title' => 'Innovative Solutions',
|
||||
'description' => 'Bringing technology and expertise together.',
|
||||
'cta_text' => 'Learn More',
|
||||
'cta_link' => '/services/technology',
|
||||
'cta_top' => '70%',
|
||||
'cta_left' => '30%'
|
||||
],
|
||||
[
|
||||
'src' => '/assets/images/cardcatalouge-banner.jpg',
|
||||
'alt' => 'Card Catalogue Banner',
|
||||
'title' => 'Effortless Organization',
|
||||
'description' => 'Streamline your workflow with our intuitive catalog system.',
|
||||
'cta_text' => 'Learn More',
|
||||
'cta_link' => '/services/catalogue-management',
|
||||
'cta_top' => '45%',
|
||||
'cta_left' => '75%'
|
||||
],
|
||||
[
|
||||
'src' => '/assets/images/rolodex-banner.jpg',
|
||||
'alt' => 'Rolodex Banner',
|
||||
'title' => 'Contact Management Made Easy',
|
||||
'description' => 'Keep track of important contacts and information in one place.',
|
||||
'cta_text' => 'Get Started',
|
||||
'cta_link' => '/services/contact-management',
|
||||
'cta_top' => '45%',
|
||||
'cta_left' => '70%',
|
||||
'text_color' => 'black'
|
||||
],
|
||||
[
|
||||
'src' => '/assets/images/oldmic.jpg',
|
||||
'alt' => 'Old Microphone',
|
||||
'title' => 'Broadcast Your Message',
|
||||
'description' => 'Reach your audience with high-quality audio and video solutions.',
|
||||
'cta_text' => 'Explore Options',
|
||||
'cta_link' => '/services/media-solutions',
|
||||
'cta_top' => '56%',
|
||||
'cta_left' => '65%'
|
||||
],
|
||||
[
|
||||
'src' => '/assets/images/ancient-library-shelf-crop1.jpg',
|
||||
'alt' => 'Library Archives',
|
||||
'title' => 'Knowledge Preservation',
|
||||
'description' => 'Store and manage your records securely and efficiently.',
|
||||
'cta_text' => 'Discover More',
|
||||
'cta_link' => '/services/data-archiving',
|
||||
'cta_top' => '50%',
|
||||
'cta_left' => '50%'
|
||||
],
|
||||
[
|
||||
'src' => '/assets/images/combosafedoor.jpg',
|
||||
'alt' => 'Combination Safe Door',
|
||||
'title' => 'Secure Your Data',
|
||||
'description' => 'Advanced encryption and security solutions for your digital assets.',
|
||||
'cta_text' => 'Protect Now',
|
||||
'cta_link' => '/services/cybersecurity',
|
||||
'cta_top' => '56%',
|
||||
'cta_left' => '35%'
|
||||
]
|
||||
]
|
||||
];
|
||||
|
||||
View::render('layouts/main', compact('title', 'content', 'sliderConfig'));
|
||||
|
|
|
|||
|
|
@ -1,43 +1,40 @@
|
|||
<?php
|
||||
|
||||
/**
|
||||
* Modular Hero Partial
|
||||
* Hero Partial (v2)
|
||||
*
|
||||
* This component is reusable and configurable for different pages.
|
||||
* This partial dynamically loads a hero section based on the provided configuration.
|
||||
* It allows pages to enable or disable the hero and define custom styles.
|
||||
*
|
||||
* Usage:
|
||||
* - Define `$heroConfig` as an array before rendering this partial.
|
||||
* - Example:
|
||||
* $heroConfig = [
|
||||
* 'title' => 'Our Services',
|
||||
* 'description' => 'Explore our IT consulting solutions.',
|
||||
* 'image' => '/assets/images/services-hero.jpg',
|
||||
* 'cta' => ['text' => 'Get Started', 'link' => '/contact'],
|
||||
* 'style' => 'default', // Can be 'default', 'compact', 'overlay'
|
||||
* 'position' => 'top' // Can be 'top', 'inline'
|
||||
* ];
|
||||
* ## Configuration Options:
|
||||
* - `enabled` (bool) - Determines whether the hero is displayed (default: false)
|
||||
* - `title` (string) - Hero title text
|
||||
* - `description` (string) - Hero subtitle or description text
|
||||
* - `image` (string) - Background image URL (default: 'wizdom-about-definitions.jpg')
|
||||
* - `height` (string) - Height of the hero section (default: '50vh')
|
||||
* - `text_align` (string) - Text alignment ('left', 'center', 'right') (default: 'center')
|
||||
* - `overlay` (bool) - Apply a dark overlay to improve text readability (default: true)
|
||||
*/
|
||||
|
||||
// Ensure heroConfig is defined before rendering
|
||||
$heroConfig = $heroConfig ?? [];
|
||||
// Ensure hero visibility is explicitly enabled
|
||||
if (!isset($heroConfig) || empty($heroConfig['enabled'])) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Assign default values
|
||||
$heroTitle = $heroConfig['title'] ?? "Welcome to Wizdom Networks";
|
||||
$heroDescription = $heroConfig['description'] ?? "Your trusted partner for IT Consulting and Services.";
|
||||
$heroImage = $heroConfig['image'] ?? "/assets/images/default-hero.jpg";
|
||||
$heroCTA = $heroConfig['cta'] ?? null;
|
||||
$heroStyle = $heroConfig['style'] ?? "default"; // 'default', 'compact', 'overlay'
|
||||
$heroPosition = $heroConfig['position'] ?? "top"; // 'top', 'inline'
|
||||
$heroTitle = htmlspecialchars($heroConfig['title'] ?? '', ENT_QUOTES, 'UTF-8');
|
||||
$heroDescription = htmlspecialchars($heroConfig['description'] ?? '', ENT_QUOTES, 'UTF-8');
|
||||
$heroImage = htmlspecialchars($heroConfig['image'] ?? '/assets/images/wizdom-about-definitions.jpg', ENT_QUOTES, 'UTF-8');
|
||||
$heroHeight = htmlspecialchars($heroConfig['height'] ?? '50vh', ENT_QUOTES, 'UTF-8');
|
||||
$textAlign = htmlspecialchars($heroConfig['text_align'] ?? 'center', ENT_QUOTES, 'UTF-8');
|
||||
$overlay = $heroConfig['overlay'] ?? false;
|
||||
?>
|
||||
|
||||
<section class="hero-section hero-<?php echo $heroStyle; ?> hero-<?php echo $heroPosition; ?>" style="background-image: url('<?php echo $heroImage; ?>');">
|
||||
<div class="hero-overlay">
|
||||
<div class="hero-content text-center">
|
||||
<section class="hero-section" style="background-image: url('<?php echo $heroImage; ?>'); height: <?php echo $heroHeight; ?>;">
|
||||
<?php if ($overlay) : ?>
|
||||
<div class="hero-overlay"></div>
|
||||
<?php endif; ?>
|
||||
<div class="hero-content" style="text-align: <?php echo $textAlign; ?>;">
|
||||
<h1><?php echo $heroTitle; ?></h1>
|
||||
<p><?php echo $heroDescription; ?></p>
|
||||
<?php if ($heroCTA): ?>
|
||||
<a href="<?php echo $heroCTA['link']; ?>" class="btn btn-primary"><?php echo $heroCTA['text']; ?></a>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,39 @@
|
|||
<aside class="col-md-3 bg-light p-3">
|
||||
<h4>Quick Links</h4>
|
||||
<ul class="list-unstyled">
|
||||
<li><a href="/services/it-consulting">IT Consulting</a></li>
|
||||
<li><a href="/services/emergency-support">Emergency Support</a></li>
|
||||
<li><a href="/services/managed-services">Managed Services</a></li>
|
||||
</ul>
|
||||
<?php
|
||||
|
||||
/**
|
||||
* Sidebar Partial (v1)
|
||||
*
|
||||
* This partial dynamically loads a sidebar based on the provided configuration.
|
||||
* It allows pages to enable or disable the sidebar and define custom styles.
|
||||
*
|
||||
* ## Configuration Options:
|
||||
* - `enabled` (bool) - Determines whether the sidebar is displayed (default: false)
|
||||
* - `width` (string) - Sidebar width percentage (default: '25%')
|
||||
* - `position` (string) - Sidebar alignment: 'left' or 'right' (default: 'right')
|
||||
* - `widgets` (array) - List of widgets or components to include in the sidebar
|
||||
*/
|
||||
|
||||
// Ensure sidebar visibility is explicitly enabled
|
||||
if (!isset($sidebarConfig) || empty($sidebarConfig['enabled'])) {
|
||||
return;
|
||||
}
|
||||
|
||||
$sidebarWidth = htmlspecialchars($sidebarConfig['width'] ?? '25%', ENT_QUOTES, 'UTF-8');
|
||||
$sidebarPosition = htmlspecialchars($sidebarConfig['position'] ?? 'right', ENT_QUOTES, 'UTF-8');
|
||||
$sidebarId = htmlspecialchars($sidebarConfig['id'] ?? 'default', ENT_QUOTES, 'UTF-8');
|
||||
$widgets = $sidebarConfig['widgets'] ?? [];
|
||||
?>
|
||||
|
||||
<aside class="sidebar sidebar-<?php echo $sidebarId; ?>" style="width: <?php echo $sidebarWidth; ?>; float: <?php echo $sidebarPosition; ?>;">
|
||||
<div class="sidebar-content">
|
||||
<?php if (!empty($widgets)) : ?>
|
||||
<?php foreach ($widgets as $widget): ?>
|
||||
<div class="sidebar-widget">
|
||||
<?php echo $widget; ?>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
<?php else: ?>
|
||||
<p>No widgets configured.</p>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</aside>
|
||||
|
|
|
|||
|
|
@ -1,39 +1,84 @@
|
|||
<?php
|
||||
|
||||
/**
|
||||
* Hero Slider Partial
|
||||
* Slider Partial (v12)
|
||||
*
|
||||
* This partial dynamically loads different types of sliders based on the provided configuration.
|
||||
* It supports multiple slider types, including hero and testimonial sliders, and only loads when required.
|
||||
* It supports multiple slider types, including standard and testimonial sliders, and only loads when required.
|
||||
*
|
||||
* ## Configuration Options:
|
||||
* - `id` (string) - Unique identifier for the slider (used for styling and debugging)
|
||||
* - `type` (string) - Allowed values: 'standard', 'testimonial'
|
||||
* - `height` (string) - Defines the slider height (default: '65vh')
|
||||
* - `object_fit` (string) - Image object-fit property ('cover', 'contain', etc.)
|
||||
* - `interval` (int) - Time in milliseconds between slides (default: 5000ms)
|
||||
* - `pause_on_hover` (bool) - Pauses autoplay when hovered (default: true)
|
||||
* - `controls` (bool) - Shows/hides navigation controls (default: true)
|
||||
* - `indicators` (bool) - Shows/hides carousel indicators (default: true)
|
||||
* - `animation` (string) - Allows 'slide' or 'fade' animation (default: 'slide')
|
||||
* - `cta_width` (string) - Defines CTA container width (default: 'auto')
|
||||
* - `cta_text_align` (string) - Text alignment within CTA (default: 'center')
|
||||
* - `lazy_load` (bool) - Enables lazy loading for images (default: true)
|
||||
*/
|
||||
|
||||
// Ensure slider visibility is explicitly enabled
|
||||
if (!isset($sliderConfig) || empty($sliderConfig['type'])) {
|
||||
error_log("[ERROR] Missing or invalid slider configuration.");
|
||||
return;
|
||||
}
|
||||
|
||||
$sliderType = $sliderConfig['type'];
|
||||
$validTypes = ['standard', 'testimonial'];
|
||||
$sliderType = in_array($sliderConfig['type'], $validTypes) ? $sliderConfig['type'] : 'standard';
|
||||
$sliderId = htmlspecialchars($sliderConfig['id'] ?? 'default', ENT_QUOTES, 'UTF-8');
|
||||
$sliderHeight = $sliderConfig['height'] ?? '65vh';
|
||||
$objectFit = htmlspecialchars($sliderConfig['object_fit'] ?? 'cover', ENT_QUOTES, 'UTF-8');
|
||||
$interval = $sliderConfig['interval'] ?? 5000; // Default to 5 seconds
|
||||
$pauseOnHover = isset($sliderConfig['pause_on_hover']) && $sliderConfig['pause_on_hover'] ? 'hover' : 'false';
|
||||
$showControls = $sliderConfig['controls'] ?? true;
|
||||
$showIndicators = $sliderConfig['indicators'] ?? true;
|
||||
$animationType = $sliderConfig['animation'] ?? 'slide';
|
||||
$ctaWidth = htmlspecialchars($sliderConfig['cta_width'] ?? 'auto', ENT_QUOTES, 'UTF-8');
|
||||
$ctaTextAlign = htmlspecialchars($sliderConfig['cta_text_align'] ?? 'center', ENT_QUOTES, 'UTF-8');
|
||||
$lazyLoad = isset($sliderConfig['lazy_load']) && $sliderConfig['lazy_load'] ? 'loading="lazy"' : '';
|
||||
$sliderImages = $sliderConfig['slides'] ?? [];
|
||||
|
||||
// Debugging logs for missing or incorrect configurations
|
||||
if (empty($sliderImages)) {
|
||||
error_log("[ERROR] Slider '$sliderId' has no slides defined.");
|
||||
}
|
||||
if (!in_array($sliderType, $validTypes)) {
|
||||
error_log("[ERROR] Invalid slider type '$sliderType' for slider '$sliderId'.");
|
||||
}
|
||||
?>
|
||||
|
||||
<section class="hero-slider slider-<?php echo $sliderType; ?>">
|
||||
<div id="heroCarousel" class="carousel slide" data-bs-ride="carousel">
|
||||
<section class="slider slider-<?php echo $sliderId; ?> slider-<?php echo htmlspecialchars($sliderType, ENT_QUOTES, 'UTF-8'); ?>"
|
||||
data-animation="<?php echo htmlspecialchars($animationType, ENT_QUOTES, 'UTF-8'); ?>"
|
||||
style="height: <?php echo htmlspecialchars($sliderHeight, ENT_QUOTES, 'UTF-8'); ?>; overflow: hidden; position: relative;">
|
||||
<div id="carousel" class="carousel <?php echo $animationType === 'fade' ? 'carousel-fade' : ''; ?> slide" data-bs-ride="carousel" data-bs-interval="<?php echo $interval; ?>" data-bs-pause="<?php echo $pauseOnHover; ?>">
|
||||
|
||||
<?php if ($showIndicators) : ?>
|
||||
<div class="carousel-indicators">
|
||||
<?php foreach ($sliderImages as $index => $image): ?>
|
||||
<button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="<?php echo $index; ?>"
|
||||
<button type="button" data-bs-target="#carousel" data-bs-slide-to="<?php echo $index; ?>"
|
||||
class="<?php echo $index === 0 ? 'active' : ''; ?> indicator-color-<?php echo $index + 1; ?>"
|
||||
aria-label="Slide <?php echo $index + 1; ?>"></button>
|
||||
aria-label="Slide <?php echo $index + 1; ?>" <?php echo $index === 0 ? 'aria-current="true"' : ''; ?>></button>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="carousel-inner">
|
||||
<?php foreach ($sliderImages as $index => $image): ?>
|
||||
<div class="carousel-item <?php echo $index === 0 ? 'active' : ''; ?>">
|
||||
<img src="<?php echo $image['src']; ?>" alt="<?php echo $image['alt']; ?>" class="d-block w-100 hero-image">
|
||||
<img src="<?php echo htmlspecialchars($image['src'], ENT_QUOTES, 'UTF-8'); ?>"
|
||||
alt="<?php echo htmlspecialchars($image['alt'], ENT_QUOTES, 'UTF-8'); ?>"
|
||||
class="d-block w-100 slider-image grayscale-effect"
|
||||
style="height: <?php echo htmlspecialchars($sliderHeight, ENT_QUOTES, 'UTF-8'); ?>; object-fit: <?php echo $objectFit; ?>; filter: grayscale(100%); transition: filter 0.5s ease-in-out;"
|
||||
<?php echo $lazyLoad; ?>>
|
||||
<div class="carousel-caption"
|
||||
style="color: <?php echo $image['text_color'] ?? 'white'; ?>; position: absolute; top: <?php echo $image['cta_top']; ?>; left: <?php echo $image['cta_left']; ?>; transform: translate(-50%, -50%);">
|
||||
<h2><?php echo $image['title']; ?></h2>
|
||||
<p><?php echo $image['description']; ?></p>
|
||||
<a href="<?php echo $image['cta_link']; ?>" class="btn btn-primary"> <?php echo $image['cta_text']; ?> </a>
|
||||
style="color: <?php echo htmlspecialchars($image['text_color'] ?? 'white', ENT_QUOTES, 'UTF-8'); ?>; position: absolute; top: <?php echo htmlspecialchars($image['cta_top'], ENT_QUOTES, 'UTF-8'); ?>; left: <?php echo htmlspecialchars($image['cta_left'], ENT_QUOTES, 'UTF-8'); ?>; transform: translate(-50%, -50%); width: <?php echo $ctaWidth; ?>; text-align: <?php echo $ctaTextAlign; ?>;">
|
||||
<h2><?php echo htmlspecialchars($image['title'], ENT_QUOTES, 'UTF-8'); ?></h2>
|
||||
<p><?php echo htmlspecialchars($image['description'], ENT_QUOTES, 'UTF-8'); ?></p>
|
||||
<a href="<?php echo htmlspecialchars($image['cta_link'], ENT_QUOTES, 'UTF-8'); ?>" class="btn btn-primary slider-cta"> <?php echo htmlspecialchars($image['cta_text'], ENT_QUOTES, 'UTF-8'); ?> </a>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
|
|
|
|||
Loading…
Reference in New Issue