117 lines
6.2 KiB
PHP
117 lines
6.2 KiB
PHP
<?php
|
|
|
|
$id = 'simple-gallery-' . $block['id'];
|
|
if (!empty($block['anchor'])) {
|
|
$id = $block['anchor'];
|
|
}
|
|
|
|
$classes = 'block-simple-gallery';
|
|
if (!empty($block['className'])) {
|
|
$classes .= ' ' . $block['className'];
|
|
}
|
|
if (!empty($block['align'])) {
|
|
$classes .= ' align' . $block['align'];
|
|
}
|
|
|
|
$heading = get_field('heading');
|
|
$description = get_field('description');
|
|
$gallery_images = get_field('gallery_images');
|
|
|
|
?>
|
|
|
|
<div class="simple-gallery-block pt-[90px]"
|
|
id="<?php echo esc_attr($id); ?>"
|
|
data-gallery-id="<?php echo esc_attr($id); ?>">
|
|
|
|
<div class="container mx-auto">
|
|
<div class="flex gap-[48px] justify-between flex-wrap items-start">
|
|
|
|
|
|
<div class="gallery-section w-full max-w-[535px]">
|
|
<?php if ($gallery_images && !empty($gallery_images)) : ?>
|
|
|
|
<?php if (count($gallery_images) === 1) : ?>
|
|
|
|
<div class="single-image max-w-[535px] h-[500px]">
|
|
<a href="<?php echo esc_url($gallery_images[0]['url']); ?>"
|
|
class="glightbox block w-full h-full"
|
|
data-gallery="simple-gallery-<?php echo esc_attr($id); ?>">
|
|
<img src="<?php echo esc_url($gallery_images[0]['url']); ?>"
|
|
alt="<?php echo esc_attr($gallery_images[0]['alt']); ?>"
|
|
class="w-full h-full object-cover rounded-[24px]"
|
|
width="<?php echo esc_attr($gallery_images[0]['width']); ?>"
|
|
height="<?php echo esc_attr($gallery_images[0]['height']); ?>"
|
|
fetchpriority="high">
|
|
</a>
|
|
</div>
|
|
<?php else : ?>
|
|
|
|
<div class="swiper !m-0 max-w-[535px] gallery-swiper h-[500px] rounded-[24px]">
|
|
<div class="swiper-wrapper">
|
|
<?php foreach ($gallery_images as $img_index => $image) : ?>
|
|
<div class="swiper-slide max-w-[648px] cursor-pointer min-h-[500px]">
|
|
<a href="<?php echo esc_url($image['url']); ?>"
|
|
class="glightbox block w-full h-full"
|
|
data-gallery="simple-gallery-<?php echo esc_attr($id); ?>">
|
|
<?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"
|
|
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 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>
|
|
|
|
<!-- Thumbnails -->
|
|
<div class="relative mt-[8px]">
|
|
<div class="swiper thumbnail-swiper">
|
|
<div class="swiper-wrapper">
|
|
<?php foreach ($gallery_images as $thumb_index => $image) : ?>
|
|
<div class="swiper-slide max-w-[102px] !h-[62px]">
|
|
<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'] ?? $image['url']); ?>"
|
|
alt="<?php echo esc_attr($image['alt']); ?>"
|
|
class="w-full rounded-[6px] h-full object-cover"
|
|
width="102"
|
|
height="62">
|
|
</div>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<?php endif; ?>
|
|
</div>
|
|
|
|
<div class="content-section w-full max-w-[725px]">
|
|
<div class="py-[48px] pr-[12px]">
|
|
<?php if ($heading) : ?>
|
|
<h2 class="text-[48px] font-[700] leading-[110%] mb-[24px]"><?php echo esc_html($heading); ?></h2>
|
|
<?php endif; ?>
|
|
|
|
<?php if ($description) : ?>
|
|
<div class="text-[18px] leading-[150%] text-gray-600">
|
|
<?php echo $description ?>
|
|
</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|