diff --git a/assets/css/frontend/header-components/search-keywords-row.css b/assets/css/frontend/header-components/search-keywords-row.css index efa82549..6f5d3279 100644 --- a/assets/css/frontend/header-components/search-keywords-row.css +++ b/assets/css/frontend/header-components/search-keywords-row.css @@ -58,7 +58,12 @@ /* zibll mobile (max-width: 767px) search / card offsets */ @media (max-width: 767px) { - .header-components { + .header-slider-container .new-swiper.slide-header .swiper-wrapper, + .new-swiper.slide-index.slide-header .swiper-wrapper { + height: var(--m-height); + } + + .header-components:not(.new-swiper) { height: var(--m-height); } diff --git a/assets/css/frontend/header-components/widget-device-visibility.css b/assets/css/frontend/header-components/widget-device-visibility.css index 9c2e7b41..8efec0ff 100644 --- a/assets/css/frontend/header-components/widget-device-visibility.css +++ b/assets/css/frontend/header-components/widget-device-visibility.css @@ -22,9 +22,61 @@ /* Fixed homepage hero under-nav is owned by nav/base.css (body.nav-fixed). */ /* ============================================================ - * Layer 1: Swiper shell + * Layer 1: Swiper shell — zibll .new-swiper.slide-header + * Height lives on CSS vars of .new-swiper; wrapper height = --pc-height / --m-height * ============================================================ */ -.header-components { +.header-slider-container .new-swiper.slide-header, +.new-swiper.slide-index.slide-header { + position: relative; + width: 100%; + overflow: hidden; + padding-top: 0; + border-radius: 0; + background: #111; + /* Defaults if PHP did not set style vars */ + --pc-height: 550px; + --m-height: 280px; +} + +.header-slider-container .new-swiper.slide-header .swiper-wrapper, +.new-swiper.slide-index.slide-header .swiper-wrapper { + height: var(--pc-height); + display: flex; +} + +.header-slider-container .new-swiper.slide-header .swiper-slide, +.new-swiper.slide-index.slide-header .swiper-slide { + position: relative; + height: 100%; + overflow: hidden; + width: 100%; + flex-shrink: 0; +} + +/* zibll: slide media fill wrapper height */ +.header-slider-container .new-swiper.slide-header .swiper-slide img, +.header-slider-container .new-swiper.slide-header .swiper-slide video, +.new-swiper.slide-index.slide-header .swiper-slide img, +.new-swiper.slide-index.slide-header .swiper-slide video { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 0 !important; + display: block; +} + +.header-slider-container .new-swiper.slide-header .swiper-slide > a, +.header-slider-container .new-swiper.slide-header .swiper-slide > span, +.new-swiper.slide-index.slide-header .swiper-slide > a, +.new-swiper.slide-index.slide-header .swiper-slide > span { + display: block; + width: 100%; + height: 100%; + position: relative; +} + +/* Keep legacy .header-components shell for gradient fallback only */ +.header-components:not(.new-swiper) { position: relative; width: 100%; --pc-height: 550px; @@ -35,7 +87,7 @@ background: #111; } -.header-components.slide-header { +.header-components.slide-header:not(.new-swiper) { padding-top: 0; border-radius: 0; } @@ -63,20 +115,21 @@ pointer-events: none; } -.header-components .swiper-wrapper { +.header-components:not(.new-swiper) .swiper-wrapper { position: absolute; inset: 0; height: 100%; width: 100%; } -.header-components .swiper-slide { +.header-components:not(.new-swiper) .swiper-slide { position: relative; height: 100%; overflow: hidden; cursor: pointer; } +/* Legacy BEM slide bg — only when old markup still present */ .header-components__slide-bg { position: absolute; inset: 0; diff --git a/inc/helpers/search/aksrt-search-box.php b/inc/helpers/search/aksrt-search-box.php index b86ea6db..ec5c5360 100644 --- a/inc/helpers/search/aksrt-search-box.php +++ b/inc/helpers/search/aksrt-search-box.php @@ -48,7 +48,7 @@ if (!function_exists('aksrt_get_search_keywords_but')) : if ($kw === '') { continue; } - $out .= '' . esc_html($kw) . ' '; } diff --git a/templates/parts/home-modules/module-hero.php b/templates/parts/home-modules/module-hero.php index 1aa5eef2..e530f284 100644 --- a/templates/parts/home-modules/module-hero.php +++ b/templates/parts/home-modules/module-hero.php @@ -225,138 +225,219 @@ if (!empty($hero_banners)) : echo ''; } + // zibll zib_new_slider defaults for header_slider_option. + $direction = in_array(($slider_cfg['direction'] ?? 'horizontal'), ['horizontal', 'vertical'], true) ? $slider_cfg['direction'] : 'horizontal'; + $effect = sanitize_key((string) ($slider_cfg['effect'] ?? 'slide')) ?: 'slide'; + $loop_on = $slide_count > 1 && (!isset($slider_cfg['loop']) || !empty($slider_cfg['loop'])); + $button_on = $slide_count > 1 && (!isset($slider_cfg['button']) || !empty($slider_cfg['button']) || !empty($slider_cfg['navigation'])); + $pag_on = $slide_count > 1 && (!isset($slider_cfg['pagination']) || !empty($slider_cfg['pagination'])); + $autoplay_on = $slide_count > 1 && (!isset($slider_cfg['autoplay']) || !empty($slider_cfg['autoplay']) || !empty($slider_cfg['autoplay_interval'])); + $interval_ms = max(1000, min(30000, (int) ($slider_cfg['autoplay_interval'] ?? 4000))); + // zibll stores interval in seconds sometimes (<999). + if ($interval_ms < 999) { + $interval_ms *= 1000; + } + $speed_ms = max(0, (int) ($slider_cfg['speed'] ?? 0)); + $space_between = max(0, (int) ($slider_cfg['space_between'] ?? 0)); + $scale_height = !empty($slider_cfg['scale_height']); + $scale_pct = max(10, min(100, (int) ($slider_cfg['scale'] ?? 40))); + + // Heights: demo uses style="--m-height :300px;--pc-height :560px;" on .new-swiper + $pc_h = trim((string) ($slider_cfg['pc_height'] ?? '')); + $m_h = trim((string) ($slider_cfg['mobile_height'] ?? '')); + // Defaults match zibll header_slider_option (550 / 280). + if ($pc_h === '') { + $pc_h = '550'; + } + if ($m_h === '') { + $m_h = '280'; + } + // Normalize to unitless px numbers for CSS vars. + $pc_h_num = (int) preg_replace('/[^0-9]/', '', $pc_h) ?: 550; + $m_h_num = (int) preg_replace('/[^0-9]/', '', $m_h) ?: 280; + + $swiper_class = 'swiper new-swiper slide-index slide-header'; + if ($scale_height && $direction !== 'vertical') { + $swiper_class .= ' scale-height'; + } + if ($slide_count === 1) { + $swiper_class .= ' swiper-container-initialized'; + } + + $style_vars = ''; + if ($scale_height && $direction !== 'vertical') { + $style_vars = '--scale-height :' . $scale_pct . '%'; + } else { + $style_vars = '--m-height :' . $m_h_num . 'px;--pc-height :' . $pc_h_num . 'px;'; + } + + // data-* attrs for zibll main.js / our slider.js dual path. + $data_attrs = ' data-direction="' . esc_attr($direction) . '"'; + $data_attrs .= ' data-effect="' . esc_attr($effect) . '"'; + $data_attrs .= $loop_on ? ' data-loop="true"' : ''; + $data_attrs .= $autoplay_on ? ' data-autoplay="1" data-interval="' . esc_attr((string) $interval_ms) . '"' : ''; + $data_attrs .= $speed_ms > 299 ? ' data-speed="' . esc_attr((string) $speed_ms) . '"' : ''; + $data_attrs .= ' data-spaceBetween="' . esc_attr((string) $space_between) . '"'; + $swiper_config = [ - 'effect' => $slider_cfg['effect'] ?? 'fade', - 'loop' => $slide_count > 1 && ($slider_cfg['loop'] ?? true), - 'speed' => 600, - 'autoplay' => $slide_count > 1 ? ['delay' => ($slider_cfg['autoplay_interval'] ?? 5000), 'disableOnInteraction' => false] : false, - 'keyboard' => ['enabled' => true], + 'effect' => $effect, + 'direction' => $direction, + 'loop' => $loop_on, + 'speed' => $speed_ms > 299 ? $speed_ms : 600, + 'spaceBetween' => $space_between, + 'autoplay' => $autoplay_on ? ['delay' => $interval_ms, 'disableOnInteraction' => false] : false, + 'keyboard' => ['enabled' => true], + 'autoHeight' => false, ]; - if (!empty($slider_cfg['pagination'])) { + if ($pag_on) { $swiper_config['pagination'] = ['clickable' => true]; + } else { + $swiper_config['pagination'] = false; } - if (!empty($slider_cfg['navigation'])) { + if ($button_on) { $swiper_config['navigation'] = true; - } - $pc_height = $slider_cfg['pc_height'] ?? ''; - $mobile_height = $slider_cfg['mobile_height'] ?? ''; - $height_style = ''; - if ($pc_height !== '') { - $height_style .= '--pc-height:' . esc_attr($pc_height) . ';'; - } - if ($mobile_height !== '') { - $height_style .= '--m-height:' . esc_attr($mobile_height) . ';'; + } else { + $swiper_config['navigation'] = false; } ?> -
style=""> +
-
+
data-swiper-config="" style="">
$slide) : - $device_vis = $slide['device_visibility'] ?? 'all'; + $is_mobile_now = function_exists('wp_is_mobile') && wp_is_mobile(); + $device_vis = (string) ($slide['device_visibility'] ?? ($slide['hide'] ?? 'all')); + // zibll hide / device_visibility: skip when current device is hidden. + if (in_array($device_vis, ['pc', 'only_pc'], true) && $is_mobile_now) { + continue; + } + if (in_array($device_vis, ['m', 'mobile', 'only_sm', 'm-only'], true) && !$is_mobile_now) { + continue; + } + $slide_classes = 'swiper-slide'; - if ($device_vis === 'pc') { - $slide_classes .= ' hero-slide--pc-only'; - } elseif ($device_vis === 'mobile') { - $slide_classes .= ' hero-slide--mobile-only'; + $video_url = (string) ($slide['video_url'] ?? $slide['background_video'] ?? ''); + $image_url = (string) ($slide['image'] ?? $slide['background'] ?? ''); + // Link may be string or zibll link array. + $link_raw = $slide['link'] ?? ''; + $link_url = ''; + $link_target = ''; + if (is_array($link_raw)) { + $link_url = (string) ($link_raw['url'] ?? ''); + $link_target = (string) ($link_raw['target'] ?? ''); + } else { + $link_url = (string) $link_raw; + $link_target = (string) ($slide['link_target'] ?? ''); } - if (!empty($slide['video_url'])) { - $slide_classes .= ' hero-slide--has-video'; + $blank = ($link_target === '_blank' || $link_target === '1') ? ' target="_blank"' : ''; + + // Video bg only on desktop (zibll). + $use_video = ($video_url !== '' && !$is_mobile_now); + if ($use_video) { + $slide_classes .= ' slide-background-video'; } - $link_target = !empty($slide['link_target']) ? $slide['link_target'] : '_self'; - $has_layers = !empty($slide['layers']) && is_array($slide['layers']); - $text_parallax = !empty($slide['text_parallax']); - // Align CSS vars with zibll --text-size-pc / --text-size-m. - $text_style = ''; - if (!empty($slide['text_size_pc'])) { - $text_style .= '--text-size-pc:' . esc_attr((int) $slide['text_size_pc']) . 'px;'; - $text_style .= '--hero-text-size-pc:' . esc_attr($slide['text_size_pc']) . ';'; + + $img_alt = (string) ($slide['title'] ?? ''); + if ($img_alt === '') { + $img_alt = get_bloginfo('name'); } - if (!empty($slide['text_size_m'])) { - $text_style .= '--text-size-m:' . esc_attr((int) $slide['text_size_m']) . 'px;'; - $text_style .= '--hero-text-size-m:' . esc_attr($slide['text_size_m']) . ';'; + + // Decorative text from slide (optional; main copy is search before_html). + $show_text = !isset($slide['show_text']) || $slide['show_text']; + $title = (string) ($slide['title'] ?? ($slide['text']['title'] ?? '')); + $desc = (string) ($slide['subtitle'] ?? $slide['description'] ?? ($slide['text']['desc'] ?? '')); + if (is_array($slide['text'] ?? null)) { + $title = (string) ($slide['text']['title'] ?? $title); + $desc = (string) ($slide['text']['desc'] ?? $desc); } - if ($text_parallax) { - $text_style .= '--hero-text-parallax:1;'; - } - ?> -
data-link="" data-target=""> -
- - - - - <?php echo esc_attr($slide['title'] ?: get_bloginfo('name')); ?> - -
- - - -
- - -
-
- ' . esc_html($title) . '
' : ''; + $s_text .= $desc !== '' ? '
' . esc_html($desc) . '
' : ''; + $s_text_class = 'abs-center slide-text'; + if ($text_align !== '') { + $s_text_class .= ' ' . sanitize_html_class($text_align); } - ?> - -
> - -
- - -
- - -
- -
+ $s_text_style = ''; + if ($text_size_pc > 0) { + $s_text_style .= '--text-size-pc:' . $text_size_pc . 'px;'; + } + if ($text_size_m > 0) { + $s_text_style .= '--text-size-m:' . $text_size_m . 'px;'; + } + $s_text = '
' . $s_text . '
'; + if ($text_parallax) { + $s_text = '
' . $s_text . '
'; + } + } + + // Background media (zibll order: video > image). + $s_background = ''; + if ($use_video) { + $poster = $image_url !== '' ? ' poster="' . esc_url($image_url) . '"' : ''; + $s_background = '
'; + } elseif ($image_url !== '') { + $s_background = ' 0 + ? ' data-src="' . esc_url($image_url) . '" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"' + : ' src="' . esc_url($image_url) . '"') + . ' alt="' . esc_attr($img_alt) . '">'; + } else { + continue; + } + + // Layers (image_layer). + $s_layers = ''; + $layers = $slide['layers'] ?? ($slide['image_layer'] ?? []); + if (is_array($layers)) { + foreach ($layers as $layer) { + if (!is_array($layer)) { + continue; + } + $layer_image = (string) ($layer['image'] ?? ''); + if ($layer_image === '') { + continue; + } + $layer_img = '' . esc_attr($img_alt) . ''; + $layer_parallax = isset($layer['parallax']) ? (int) $layer['parallax'] : 0; + $layer_attr = $layer_parallax ? ' data-swiper-parallax="' . $layer_parallax . '%"' : ''; + $layer_class = !empty($layer['free_size']) ? ' slide-layer' : ''; + if (!empty($layer['align'])) { + $layer_class .= ' text-' . sanitize_html_class((string) $layer['align']); + } + $s_layers .= '
' . $layer_img . '
'; + } + } + ?> +
+ + href=""> + + + + + + + + + +
+ +
+
+ + +
+