carousel.php
3.49 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<?php
/**
* Carousel Block Template.
*
* @param array $block The block settings and attributes.
* @param string $content The block inner HTML (empty).
* @param bool $is_preview True during AJAX preview.
* @param (int|string) $post_id The post ID this block is saved to.
*/
// Create id attribute allowing for custom "anchor" value.
$id = 'carousel-' . $block['id'];
if( !empty($block['anchor']) ) {
$id = $block['anchor'];
}
// Create class attribute allowing for custom "className" and "align" values.
$className = 'carousel';
if( !empty($block['className']) ) {
$className .= ' ' . $block['className'];
}
if( !empty($block['align']) ) {
$className .= ' align' . $block['align'];
}
if( $is_preview ) {
$className .= ' is-admin';
}
$carousel_style = get_field('carousel_style');
?>
<div id="<?php echo esc_attr($id); ?>" class="<?php echo esc_attr($className); ?> ">
<?php switch($carousel_style){
case 'promo': ?>
<?php if( have_rows('promo_items') ): ?>
<div class=" carousel-items promo-carousel">
<div class='swiper-wrapper'>
<?php while( the_repeater_field('promo_items') ): ?>
<?php $page = get_sub_field('page'); ?>
<div class="swiper-slide">
<div class="carousel-content">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12 promo-image" >
<?php $image = get_the_post_thumbnail_url( $page->ID, 'medium' );
$thumbnail_id = get_post_meta( $page->ID, '_thumbnail_id', true );
$img_alt = get_post_meta ( $thumbnail_id, '_wp_attachment_image_alt', true );
if(!$img_alt){
$img_alt = get_the_title($thumbnail_id);
}
?>
<img src="<?php echo $image; ?>" alt="<?php echo $img_alt ?>" loading="eager">
</div>
<div class="col-lg-8 col-md-8 col-sm-12">
<div class="promo-text"><?php echo get_the_excerpt($page->ID); ?> <a class="understrap-read-more-link" href="<?php echo get_permalink($page->ID);?>">READ MORE</a></div>
</div>
</div>
</div>
</div>
<?php endwhile; ?>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev" data-id="<?= $id ?>"></div>
<div class="swiper-button-next" data-id="<?= $id ?>"></div>
</div>
<?php else: ?>
<p>Please add some slides.</p>
<?php endif; ?>
<?php break;
default: ?>
<p>Please select style.</p>
<?php }; ?>
</div>