125 lines
6.6 KiB
PHP
125 lines
6.6 KiB
PHP
<?php
|
|
|
|
$id = 'gallery-tabs-' . $block['id'];
|
|
if (!empty($block['anchor'])) {
|
|
$id = $block['anchor'];
|
|
}
|
|
|
|
$classes = 'block-gallery-tabs';
|
|
if (!empty($block['className'])) {
|
|
$classes .= ' ' . $block['className'];
|
|
}
|
|
if (!empty($block['align'])) {
|
|
$classes .= ' align' . $block['align'];
|
|
}
|
|
|
|
$use_homepage_content = get_field('use_homepage_content');
|
|
|
|
if ($use_homepage_content) {
|
|
$homepage_id = get_option('page_on_front');
|
|
|
|
if ($homepage_id) {
|
|
$page_content = get_post_field('post_content', $homepage_id);
|
|
$blocks = parse_blocks($page_content);
|
|
|
|
foreach ($blocks as $homepage_block) {
|
|
if ($homepage_block['blockName'] === 'acf/gallery-tabs') {
|
|
echo render_block($homepage_block);
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Если переключатель выключен или блок на главной не найден - рендерим локальные данные
|
|
$heading = get_field('heading');
|
|
$slider_tabs = get_field('slider_tabs');
|
|
|
|
?>
|
|
|
|
<div class="gallery-block py-[45px] pb-[90px] <?php if (!is_front_page()): echo 'pb-0 py-[90px] mt-0'; endif ?>"
|
|
id="<?php echo esc_attr($id); ?>"
|
|
data-gallery-id="<?php echo esc_attr($id); ?>">
|
|
|
|
<div class="container mx-auto">
|
|
<div class="flex justify-between flex-wrap">
|
|
<?php if ($heading) : ?>
|
|
<h2 class="text-[48px] font-[700] leading-[110%]"><?php echo esc_html($heading); ?></h2>
|
|
<?php endif; ?>
|
|
|
|
<?php if ($slider_tabs && !empty($slider_tabs['slider_tab'])) : ?>
|
|
<div class="flex max-w-[872px] flex-wrap gap-[8px]">
|
|
<?php foreach ($slider_tabs['slider_tab'] as $tab_index => $tab) : ?>
|
|
<?php if (!empty($tab['tab_name'])) : ?>
|
|
<button class="tab-button grey-gradient-button rounded-[90px] py-[8px] px-[28px] cursor-pointer transition-all <?php echo $tab_index === 0 ? 'active' : ''; ?>"
|
|
data-tab="<?php echo $tab_index; ?>">
|
|
<?php echo esc_html($tab['tab_name']); ?>
|
|
</button>
|
|
<?php endif; ?>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
|
|
<?php if ($slider_tabs && !empty($slider_tabs['slider_tab'])) : ?>
|
|
<?php foreach ($slider_tabs['slider_tab'] as $tab_index => $tab) : ?>
|
|
<div class="tab-content relative <?php echo $tab_index === 0 ? 'block' : 'hidden'; ?>"
|
|
id="tab-<?php echo $tab_index; ?>">
|
|
|
|
<?php if (!empty($tab['slider_images'])) : ?>
|
|
|
|
<div class="swiper max-w-[2000px] mt-[45px] gallery-swiper h-[440px]"
|
|
id="swiper-<?php echo $tab_index; ?>">
|
|
<div class="swiper-wrapper">
|
|
<?php foreach ($tab['slider_images'] as $img_index => $image) : ?>
|
|
<div class="swiper-slide max-w-[648px] cursor-pointer min-h-[440px]">
|
|
<a href="<?php echo esc_url($image['url']); ?>"
|
|
class="glightbox block w-full h-full"
|
|
data-gallery="gallery-<?php echo $tab_index; ?>">
|
|
<?php if ($img_index === 0) : ?>
|
|
<img src="<?php echo esc_url($image['url']); ?>"
|
|
alt="<?php echo esc_attr($image['alt']); ?>"
|
|
class="w-full h-full object-cover rounded-[24px]"
|
|
width="<?php echo esc_attr($image['width']); ?>"
|
|
height="<?php echo esc_attr($image['height']); ?>"
|
|
fetchpriority="high">
|
|
<?php else : ?>
|
|
<img data-src="<?php echo esc_url($image['url']); ?>"
|
|
alt="<?php echo esc_attr($image['alt']); ?>"
|
|
class="w-full h-full object-cover rounded-[24px] swiper-lazy"
|
|
width="<?php echo esc_attr($image['width']); ?>"
|
|
height="<?php echo esc_attr($image['height']); ?>">
|
|
<div class="swiper-lazy-preloader"></div>
|
|
<?php endif; ?>
|
|
</a>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="relative mt-[24px]">
|
|
<div class="swiper thumbnail-swiper"
|
|
id="thumbnail-swiper-<?php echo $tab_index; ?>">
|
|
<div class="swiper-wrapper">
|
|
<?php foreach ($tab['slider_images'] as $thumb_index => $image) : ?>
|
|
<div class="swiper-slide max-w-[160px] !h-[100px]">
|
|
<div class="thumbnail w-full h-full overflow-hidden cursor-pointer transition-opacity duration-[180ms] ease-in-out <?php echo $thumb_index === 0 ? 'active opacity-100' : 'opacity-50 hover:opacity-80'; ?>"
|
|
data-index="<?php echo $thumb_index; ?>">
|
|
<img src="<?php echo esc_url($image['sizes']['thumbnail']); ?>"
|
|
alt="<?php echo esc_attr($image['alt']); ?>"
|
|
class="w-full rounded-[12px] h-full object-cover"
|
|
width="160"
|
|
height="100">
|
|
</div>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<?php endif; ?>
|
|
<div class="swiper-scrollbar !static !mx-auto !cursor-grab container mt-[44px] !w-full !p-0" id="swiper-scrollbar-<?php echo $tab_index; ?>"></div>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
<?php endif; ?>
|
|
</div>
|