fix(header): align header-slider DOM/height with zibll demo
Match demo.zibll.com slide markup (a/span wrap, data-* attrs, --pc/--m height on .new-swiper), keyword chip classes, and height CSS so the top multifunc block renders like the official demo.
This commit is contained in:
kate522 committed
1 parent
96bd9d949d
commit
a25feb4161
4 files changed
+258
-119
No files matched your search
@@ -58,7 +58,12 @@
|
|||||||
|
|
||||||
/* zibll mobile (max-width: 767px) search / card offsets */
|
/* zibll mobile (max-width: 767px) search / card offsets */
|
||||||
@media (max-width: 767px) {
|
@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);
|
height: var(--m-height);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -22,9 +22,61 @@
|
|||||||
/* Fixed homepage hero under-nav is owned by nav/base.css (body.nav-fixed). */
|
/* 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;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
--pc-height: 550px;
|
--pc-height: 550px;
|
||||||
@@ -35,7 +87,7 @@
|
|||||||
background: #111;
|
background: #111;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-components.slide-header {
|
.header-components.slide-header:not(.new-swiper) {
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
@@ -63,20 +115,21 @@
|
|||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-components .swiper-wrapper {
|
.header-components:not(.new-swiper) .swiper-wrapper {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-components .swiper-slide {
|
.header-components:not(.new-swiper) .swiper-slide {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Legacy BEM slide bg — only when old markup still present */
|
||||||
.header-components__slide-bg {
|
.header-components__slide-bg {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
|
|||||||
@@ -48,7 +48,7 @@ if (!function_exists('aksrt_get_search_keywords_but')) :
|
|||||||
if ($kw === '') {
|
if ($kw === '') {
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
$out .= '<a class="but jb-sm search_keywords" data-search-keyword="' . esc_attr($kw) . '" href="'
|
$out .= '<a class="search_keywords muted-2-color but em09 mr6 mb6" data-search-keyword="' . esc_attr($kw) . '" href="'
|
||||||
. esc_url(home_url('/?s=' . rawurlencode($kw))) . '">'
|
. esc_url(home_url('/?s=' . rawurlencode($kw))) . '">'
|
||||||
. esc_html($kw) . '</a> ';
|
. esc_html($kw) . '</a> ';
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -225,138 +225,219 @@ if (!empty($hero_banners)) :
|
|||||||
echo '<style id="aksrt-header-slider-nav-color">body.nav-fixed:not(.body-scroll):not(.mobile-navbar-show) .header.show-slide{--header-color:' . esc_attr($_nav_color_for_header) . ';}</style>';
|
echo '<style id="aksrt-header-slider-nav-color">body.nav-fixed:not(.body-scroll):not(.mobile-navbar-show) .header.show-slide{--header-color:' . esc_attr($_nav_color_for_header) . ';}</style>';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 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 = [
|
$swiper_config = [
|
||||||
'effect' => $slider_cfg['effect'] ?? 'fade',
|
'effect' => $effect,
|
||||||
'loop' => $slide_count > 1 && ($slider_cfg['loop'] ?? true),
|
'direction' => $direction,
|
||||||
'speed' => 600,
|
'loop' => $loop_on,
|
||||||
'autoplay' => $slide_count > 1 ? ['delay' => ($slider_cfg['autoplay_interval'] ?? 5000), 'disableOnInteraction' => false] : false,
|
'speed' => $speed_ms > 299 ? $speed_ms : 600,
|
||||||
'keyboard' => ['enabled' => true],
|
'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];
|
$swiper_config['pagination'] = ['clickable' => true];
|
||||||
|
} else {
|
||||||
|
$swiper_config['pagination'] = false;
|
||||||
}
|
}
|
||||||
if (!empty($slider_cfg['navigation'])) {
|
if ($button_on) {
|
||||||
$swiper_config['navigation'] = true;
|
$swiper_config['navigation'] = true;
|
||||||
}
|
} else {
|
||||||
$pc_height = $slider_cfg['pc_height'] ?? '';
|
$swiper_config['navigation'] = false;
|
||||||
$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) . ';';
|
|
||||||
}
|
}
|
||||||
?>
|
?>
|
||||||
<div class="<?php echo esc_attr(implode(' ', $container_classes)); ?>" id="aksrt-header-components"<?php if ($height_style !== '') : ?> style="<?php echo $height_style; ?>"<?php endif; ?>>
|
<div class="<?php echo esc_attr(implode(' ', $container_classes)); ?>" id="aksrt-header-components">
|
||||||
<div class="relative zib-slider">
|
<div class="relative zib-slider">
|
||||||
<div class="swiper new-swiper header-components slide-index slide-header" data-swiper-config="<?php echo esc_attr(wp_json_encode($swiper_config)); ?>">
|
<div class="<?php echo esc_attr($swiper_class); ?>"<?php echo $data_attrs; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?> data-swiper-config="<?php echo esc_attr(wp_json_encode($swiper_config)); ?>" style="<?php echo esc_attr($style_vars); ?>">
|
||||||
<div class="swiper-wrapper">
|
<div class="swiper-wrapper">
|
||||||
<?php foreach ($hero_banners as $index => $slide) :
|
<?php foreach ($hero_banners as $index => $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';
|
$slide_classes = 'swiper-slide';
|
||||||
if ($device_vis === 'pc') {
|
$video_url = (string) ($slide['video_url'] ?? $slide['background_video'] ?? '');
|
||||||
$slide_classes .= ' hero-slide--pc-only';
|
$image_url = (string) ($slide['image'] ?? $slide['background'] ?? '');
|
||||||
} elseif ($device_vis === 'mobile') {
|
// Link may be string or zibll link array.
|
||||||
$slide_classes .= ' hero-slide--mobile-only';
|
$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'])) {
|
$blank = ($link_target === '_blank' || $link_target === '1') ? ' target="_blank"' : '';
|
||||||
$slide_classes .= ' hero-slide--has-video';
|
|
||||||
|
// 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']);
|
$img_alt = (string) ($slide['title'] ?? '');
|
||||||
$text_parallax = !empty($slide['text_parallax']);
|
if ($img_alt === '') {
|
||||||
// Align CSS vars with zibll --text-size-pc / --text-size-m.
|
$img_alt = get_bloginfo('name');
|
||||||
$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']) . ';';
|
|
||||||
}
|
}
|
||||||
if (!empty($slide['text_size_m'])) {
|
|
||||||
$text_style .= '--text-size-m:' . esc_attr((int) $slide['text_size_m']) . 'px;';
|
// Decorative text from slide (optional; main copy is search before_html).
|
||||||
$text_style .= '--hero-text-size-m:' . esc_attr($slide['text_size_m']) . ';';
|
$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_align = (string) ($slide['text_align'] ?? ($slide['text']['text_align'] ?? 'left-bottom'));
|
||||||
$text_style .= '--hero-text-parallax:1;';
|
$text_size_pc = (int) ($slide['text_size_pc'] ?? ($slide['text']['text_size_pc'] ?? 0));
|
||||||
}
|
$text_size_m = (int) ($slide['text_size_m'] ?? ($slide['text']['text_size_m'] ?? 0));
|
||||||
?>
|
$text_parallax = (int) ($slide['text_parallax'] ?? ($slide['text']['parallax'] ?? 0));
|
||||||
<div class="<?php echo esc_attr($slide_classes); ?>"<?php if (!empty($slide['link'])) : ?> data-link="<?php echo esc_url($slide['link']); ?>" data-target="<?php echo esc_attr($link_target); ?>"<?php endif; ?>>
|
|
||||||
<div class="header-components__slide-bg">
|
$s_text = '';
|
||||||
<?php if (!empty($slide['video_url'])) : ?>
|
if ($show_text && ($title !== '' || $desc !== '')) {
|
||||||
<video class="header-components__video" autoplay muted loop playsinline preload="metadata">
|
$s_text = $title !== '' ? '<div class="slide-title">' . esc_html($title) . '</div>' : '';
|
||||||
<source src="<?php echo esc_url($slide['video_url']); ?>" type="video/mp4">
|
$s_text .= $desc !== '' ? '<div class="slide-desc">' . esc_html($desc) . '</div>' : '';
|
||||||
</video>
|
$s_text_class = 'abs-center slide-text';
|
||||||
<?php endif; ?>
|
if ($text_align !== '') {
|
||||||
<?php if (!empty($slide['image'])) : ?>
|
$s_text_class .= ' ' . sanitize_html_class($text_align);
|
||||||
<img
|
|
||||||
src="<?php echo esc_url($slide['image']); ?>"
|
|
||||||
alt="<?php echo esc_attr($slide['title'] ?: get_bloginfo('name')); ?>"
|
|
||||||
loading="<?php echo 0 === $index ? 'eager' : 'lazy'; ?>"
|
|
||||||
decoding="async"
|
|
||||||
class="fit-cover"
|
|
||||||
>
|
|
||||||
<?php elseif (empty($slide['video_url'])) : ?>
|
|
||||||
<div class="header-components__slide-fallback"></div>
|
|
||||||
<?php endif; ?>
|
|
||||||
<?php if ($has_layers) : ?>
|
|
||||||
<?php foreach ($slide['layers'] as $layer) :
|
|
||||||
if (empty($layer['image'])) continue;
|
|
||||||
$layer_classes = 'header-components__layer';
|
|
||||||
if (!empty($layer['parallax'])) $layer_classes .= ' header-components__layer--parallax';
|
|
||||||
if (!empty($layer['free_size'])) $layer_classes .= ' header-components__layer--free-size';
|
|
||||||
$layer_style = '';
|
|
||||||
if (!empty($layer['align']) && $layer['align'] !== 'center') {
|
|
||||||
$layer_style .= 'background-position:' . esc_attr($layer['align']) . ';';
|
|
||||||
}
|
|
||||||
if (!empty($layer['parallax'])) {
|
|
||||||
$pscale = isset($layer['parallax_scale']) ? (float) $layer['parallax_scale'] : 0.3;
|
|
||||||
$popacity = isset($layer['parallax_opacity']) ? (float) $layer['parallax_opacity'] : 0.6;
|
|
||||||
$layer_style .= '--layer-parallax-scale:' . esc_attr($pscale) . ';';
|
|
||||||
$layer_style .= '--layer-parallax-opacity:' . esc_attr($popacity) . ';';
|
|
||||||
}
|
|
||||||
?>
|
|
||||||
<div class="<?php echo esc_attr($layer_classes); ?>" style="background-image:url('<?php echo esc_url($layer['image']); ?>')<?php echo $layer_style ? ';' . $layer_style : ''; ?>"></div>
|
|
||||||
<?php endforeach; ?>
|
|
||||||
<?php endif; ?>
|
|
||||||
</div>
|
|
||||||
<div class="header-components__slide-overlay"></div>
|
|
||||||
<?php
|
|
||||||
// Per-slide decorative text only (zibll .abs-center.slide-text).
|
|
||||||
// Hero main title/subtitle must live in search before_html.
|
|
||||||
$show_text = !isset($slide['show_text']) || $slide['show_text'];
|
|
||||||
$has_title = !empty($slide['title']);
|
|
||||||
$has_subtitle = !empty($slide['subtitle']);
|
|
||||||
$has_description = !empty($slide['description']);
|
|
||||||
$text_align = $slide['text_align'] ?? '';
|
|
||||||
$text_align_class = '';
|
|
||||||
if ($text_align !== '' && $text_align !== 'left') {
|
|
||||||
// zibll uses conter-bottom / left-bottom etc.; keep text-* for existing data.
|
|
||||||
$text_align_class = ' text-' . sanitize_html_class($text_align);
|
|
||||||
if (in_array($text_align, ['center', 'conter-conter', 'conter-bottom'], true)) {
|
|
||||||
$text_align_class .= ' conter-conter';
|
|
||||||
} elseif ($text_align === 'left-bottom') {
|
|
||||||
$text_align_class .= ' left-bottom';
|
|
||||||
} elseif ($text_align === 'right-bottom') {
|
|
||||||
$text_align_class .= ' right-bottom';
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
?>
|
$s_text_style = '';
|
||||||
<?php if ($show_text && ($has_title || $has_subtitle || $has_description)) : ?>
|
if ($text_size_pc > 0) {
|
||||||
<div class="abs-center slide-text header-components__content<?php echo esc_attr($text_align_class); ?><?php echo $text_parallax ? ' has-text-parallax' : ''; ?>"<?php echo $text_style ? ' style="' . $text_style . '"' : ''; ?>>
|
$s_text_style .= '--text-size-pc:' . $text_size_pc . 'px;';
|
||||||
<?php if ($has_title) : ?>
|
}
|
||||||
<div class="header-components__title slide-title"><?php echo esc_html($slide['title']); ?></div>
|
if ($text_size_m > 0) {
|
||||||
<?php endif; ?>
|
$s_text_style .= '--text-size-m:' . $text_size_m . 'px;';
|
||||||
<?php if ($has_subtitle) : ?>
|
}
|
||||||
<div class="header-components__subtitle slide-desc"><?php echo esc_html($slide['subtitle']); ?></div>
|
$s_text = '<div class="' . esc_attr($s_text_class) . '"' . ($s_text_style !== '' ? ' style="' . esc_attr($s_text_style) . '"' : '') . '>' . $s_text . '</div>';
|
||||||
<?php endif; ?>
|
if ($text_parallax) {
|
||||||
<?php if ($has_description) : ?>
|
$s_text = '<div class="absolute" data-swiper-parallax="' . esc_attr((string) $text_parallax) . '">' . $s_text . '</div>';
|
||||||
<div class="header-components__description"><?php echo esc_html($slide['description']); ?></div>
|
}
|
||||||
<?php endif; ?>
|
}
|
||||||
</div>
|
|
||||||
|
// Background media (zibll order: video > image).
|
||||||
|
$s_background = '';
|
||||||
|
if ($use_video) {
|
||||||
|
$poster = $image_url !== '' ? ' poster="' . esc_url($image_url) . '"' : '';
|
||||||
|
$s_background = '<video autoplay loop muted playsinline class="fit-cover radius8" src="' . esc_url($video_url) . '"' . $poster . '></video><div class="absolute"></div>';
|
||||||
|
} elseif ($image_url !== '') {
|
||||||
|
$s_background = '<img class="fit-cover radius8' . ($index > 0 ? ' lazyload swiper-lazy' : '') . '"'
|
||||||
|
. ($index > 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 = '<img class="radius8 lazyload swiper-lazy" data-src="' . esc_url($layer_image) . '" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="' . 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 .= '<div class="absolute' . esc_attr($layer_class) . '"' . $layer_attr . '>' . $layer_img . '</div>';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
<div class="<?php echo esc_attr($slide_classes); ?>">
|
||||||
|
<?php if ($link_url !== '') : ?>
|
||||||
|
<a<?php echo $blank; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?> href="<?php echo esc_url($link_url); ?>">
|
||||||
|
<?php else : ?>
|
||||||
|
<span>
|
||||||
|
<?php endif; ?>
|
||||||
|
<?php echo $s_background; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
|
||||||
|
<?php echo $s_layers; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
|
||||||
|
<?php echo $s_text; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
|
||||||
|
<?php if ($link_url !== '') : ?>
|
||||||
|
</a>
|
||||||
|
<?php else : ?>
|
||||||
|
</span>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
</div>
|
</div>
|
||||||
<?php endforeach; ?>
|
<?php endforeach; ?>
|
||||||
</div>
|
</div>
|
||||||
|
<?php if ($button_on) : ?>
|
||||||
|
<div class="swiper-button-prev"></div>
|
||||||
|
<div class="swiper-button-next"></div>
|
||||||
|
<?php endif; ?>
|
||||||
|
<?php if ($pag_on) : ?>
|
||||||
|
<div class="swiper-pagination kaoyou"></div>
|
||||||
|
<?php endif; ?>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
Reference in new issue
Block a user