Skip to content

MSF / msf-climate-hub

Go to a project
Toggle navigation
Toggle navigation pinning
a7fc88fe by Jeff Balicki
Options

qa 

Signed-off-by: Jeff <jeff@gotenzing.com>
1 parent 3f6a2bd0
Inline Side-by-side
Showing 9 changed files with 218 additions and 23 deletions
1 <?php
2
3 /**
4 * Carousel Block Template.
5 *
6 * @param array $block The block settings and attributes.
7 * @param string $content The block inner HTML (empty).
8 * @param bool $is_preview True during AJAX preview.
9 * @param (int|string) $post_id The post ID this block is saved to.
10 */
11
12 // Create id attribute allowing for custom "anchor" value.
13 $id = "carousel-" . $block["id"];
14 if (!empty($block["anchor"])) {
15 $id = $block["anchor"];
16 }
17
18 // Create class attribute allowing for custom "className" and "align" values.
19 $className = "carousel";
20
21 if (!empty($block["className"])) {
22 $className .= " " . $block["className"];
23 }
24 if (!empty($block["align"])) {
25 $className .= " align" . $block["align"];
26 }
27 if ($is_preview) {
28 $className .= " is-admin";
29 }
30
31
32 ?>
33 <div id="<?php echo esc_attr($id); ?>" class="<?php echo esc_attr(
34 $className
35 ); ?> ">
36 <?php if (have_rows("promo_items")): ?>
37 <div class=" carousel-items promo-carousel">
38 <div class='swiper-wrapper'>
39 <?php while (the_repeater_field("promo_items")): ?>
40 <?php $carousel_style = get_sub_field("carousel_style");
41 switch ($carousel_style) {
42 case "video": ?>
43 <?php
44 $index = get_row_index();
45 $modalId = "modal-" . $index;
46 ?>
47 <div class="swiper-slide">
48 <div class="carousel-content">
49 <a href="javascript:void(0)" class="video_open" data-bs-toggle="modal" data-bs-target="#<?php echo $modalId; ?>">
50 <div class="promo-image video">
51 <?php
52 $image = get_sub_field("place_holder");
53 if (!empty($image)): ?>
54 <img src="<?php echo esc_url($image["url"]); ?>" alt="<?php echo esc_attr( $image["alt"]); ?>" loading="eager" />
55 <?php endif;?>
56 </div>
57 <div class="promo-text"><?php echo get_sub_field("title"); ?></div>
58 </a>
59 </div>
60 </div>
61 <?php break;
62 case "pdf": ?>
63 <?php $page = get_sub_field("pdf"); ?>
64 <div class="swiper-slide">
65 <div class="carousel-content">
66 <a href="<?php echo $page; ?>" class="pdf_open">
67 <div class="promo-image pdf">
68 <?php
69 $image = get_sub_field("place_holder");
70 if (!empty($image)): ?>
71 <img src="<?php echo esc_url($image["url"]); ?>" alt="<?php echo esc_attr($image["alt"]); ?>" loading="eager" />
72 <?php endif;?>
73 <img src="<?php echo $image; ?>" alt="<?php echo $img_alt; ?>" loading="eager">
74 </div>
75 <div class="promo-text"><?php echo get_sub_field("title"); ?></div>
76 </a>
77 </div>
78 </div>
79
80 <?php break;
81 case "outside": ?>
82 <?php $page = get_sub_field("outside_url"); ?>
83 <div class="swiper-slide">
84 <div class="carousel-content">
85 <a href="<?php echo $page; ?>" >
86 <div class="promo-image ">
87 <?php
88 $image = get_sub_field("place_holder");
89 if (!empty($image)): ?>
90 <img src="<?php echo esc_url($image["url"]); ?>" alt="<?php echo esc_attr($image["alt"]); ?>" loading="eager" />
91 <?php endif;?>
92 <img src="<?php echo $image; ?>" alt="<?php echo $img_alt; ?>" loading="eager">
93 </div>
94 <div class="promo-text"><?php echo get_sub_field("title"); ?></div>
95 </a>
96 </div>
97 </div>
98
99 <?php break;
100 default: ?>
101
102 <?php } ?>
103 <?php endwhile; ?>
104
105
106 </div>
107 <div class="swiper-button-prev" data-id="<?= $id ?>"></div>
108 <div class="swiper-button-next" data-id="<?= $id ?>"></div>
109 </div>
110 <?php if (have_rows("promo_items")): ?>
111 <?php while (the_repeater_field("promo_items")):
112 $carousel_style = get_sub_field("carousel_style");
113 if($carousel_style == 'video'){ ?>
114 <?php $index = get_row_index();
115 $modalId = "modal-" . $index;
116 ?>
117 <?php
118 $iframe = get_sub_field("video");
119
120 // Use preg_match to find iframe src.
121 preg_match('/src="(.+?)"/', $iframe, $matches);
122 $src = $matches[1];
123
124 // Add extra parameters to src and replace HTML.
125 $params = [
126 "controls" => 1,
127 "hd" => 1,
128 "autohide" => 1,
129 "enablejsapi" => 1,
130 "version" => 3,
131 ];
132 $new_src = add_query_arg($params, $src);
133 $iframe = str_replace($src, $new_src, $iframe);
134
135 // Add extra attributes to iframe HTML.
136 $attributes = 'frameborder="0"';
137 $iframe = str_replace("></iframe>", " " . $attributes . "></iframe>", $iframe);
138 $iframe = str_replace(
139 "<iframe",
140 '<iframe class="yt_player_iframe" ',
141 $iframe
142 );
143 ?>
144 <div class="modal" id="<?php echo $modalId; ?>" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
145 <div class="modal-dialog modal-dialog-centered modal-xl">
146 <div class="modal-content">
147 <div class="modal-header">
148 <h5 class="modal-title"></h5>
149 <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
150 </div>
151 <div class="modal-body">
152 <?php echo $iframe; ?>
153 </div>
154 </div>
155 </div>
156 </div>
157 <script>
158 var myModalEl = document.getElementById('<?php echo $modalId; ?>')
159 myModalEl.addEventListener('hidden.bs.modal', function(event) {
160 jQuery('.yt_player_iframe').each(function() {
161 this.contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}', '*')
162 });
163 });
164 </script>
165 <?php
166 }
167 endwhile; ?>
168 <?php endif; ?>
169 <?php else: ?>
170 <p>Please add some slides.</p>
171 <?php endif; ?>
172
173 </div>
...\ No newline at end of file ...\ No newline at end of file
...@@ -19126,13 +19126,6 @@ ul.sf_date_field .sf-datepicker { ...@@ -19126,13 +19126,6 @@ ul.sf_date_field .sf-datepicker {
19126 transition: all 0.5s ease-in-out; 19126 transition: all 0.5s ease-in-out;
19127 } 19127 }
19128 19128
19129 .promo-image.pdf {
19130 width: 270px;
19131 }
19132 .promo-image.pdf img {
19133 width: auto;
19134 }
19135
19136 .promo-carousel h2, .promo-carousel .h2 { 19129 .promo-carousel h2, .promo-carousel .h2 {
19137 font-size: 1.5rem; 19130 font-size: 1.5rem;
19138 line-height: 1.875rem; 19131 line-height: 1.875rem;
...@@ -19153,6 +19146,7 @@ ul.sf_date_field .sf-datepicker { ...@@ -19153,6 +19146,7 @@ ul.sf_date_field .sf-datepicker {
19153 color: #000; 19146 color: #000;
19154 text-decoration: none; 19147 text-decoration: none;
19155 max-width: 320px; 19148 max-width: 320px;
19149 font-weight: bold;
19156 } 19150 }
19157 .promo-carousel .pdf_open, 19151 .promo-carousel .pdf_open,
19158 .promo-carousel .video_open { 19152 .promo-carousel .video_open {
...@@ -19180,6 +19174,13 @@ ul.sf_date_field .sf-datepicker { ...@@ -19180,6 +19174,13 @@ ul.sf_date_field .sf-datepicker {
19180 text-decoration: underline; 19174 text-decoration: underline;
19181 } 19175 }
19182 19176
19177 .pdf-carousel .promo-image.pdf {
19178 width: 270px;
19179 }
19180 .pdf-carousel .promo-image.pdf img {
19181 width: auto;
19182 }
19183
19183 .swiper-pagination-bullet { 19184 .swiper-pagination-bullet {
19184 background: #fff !important; 19185 background: #fff !important;
19185 border: 0.125rem solid #2c2c2c !important; 19186 border: 0.125rem solid #2c2c2c !important;
...@@ -19376,9 +19377,10 @@ ul.sf_date_field .sf-datepicker { ...@@ -19376,9 +19377,10 @@ ul.sf_date_field .sf-datepicker {
19376 text-align: left; 19377 text-align: left;
19377 } 19378 }
19378 .carousel:has(.featured-carousel) .promo-text p { 19379 .carousel:has(.featured-carousel) .promo-text p {
19379 font-size: 1rem; 19380 font-size: 16px;
19380 line-height: 1.5rem; 19381 line-height: 21px;
19381 text-align: left; 19382 text-align: left;
19383 font-weight: normal;
19382 } 19384 }
19383 .carousel:has(.featured-carousel) .understrap-read-more-link { 19385 .carousel:has(.featured-carousel) .understrap-read-more-link {
19384 font-size: 14px; 19386 font-size: 14px;
...@@ -19386,6 +19388,10 @@ ul.sf_date_field .sf-datepicker { ...@@ -19386,6 +19388,10 @@ ul.sf_date_field .sf-datepicker {
19386 text-align: left; 19388 text-align: left;
19387 } 19389 }
19388 19390
19391 .promo-image.pdf img {
19392 width: auto;
19393 }
19394
19389 .pojo-a11y-grayscale { 19395 .pojo-a11y-grayscale {
19390 overflow-y: scroll !important; 19396 overflow-y: scroll !important;
19391 } 19397 }
......
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
...@@ -55,6 +55,7 @@ if( function_exists('acf_add_options_page') ) { ...@@ -55,6 +55,7 @@ if( function_exists('acf_add_options_page') ) {
55 ] 55 ]
56 )); 56 ));
57 57
58
58 acf_register_block_type( array( 59 acf_register_block_type( array(
59 'title' => __( 'Carousel', 'client_textdomain' ), 60 'title' => __( 'Carousel', 'client_textdomain' ),
60 'name' => 'carousel', 61 'name' => 'carousel',
...@@ -68,6 +69,18 @@ if( function_exists('acf_add_options_page') ) { ...@@ -68,6 +69,18 @@ if( function_exists('acf_add_options_page') ) {
68 )); 69 ));
69 70
70 acf_register_block_type( array( 71 acf_register_block_type( array(
72 'title' => __( 'Mixed Carousel', 'client_textdomain' ),
73 'name' => 'carouse-mixed',
74 'render_template' => 'blocks/carousel-mixed/carousel.php',
75 'mode' => 'edit',
76 'supports' => [
77 'align' => false,
78 'anchor' => true,
79 'customClassName' => true
80 ]
81 ));
82
83 acf_register_block_type( array(
71 'title' => __( 'Relevant Resources', 'client_textdomain' ), 84 'title' => __( 'Relevant Resources', 'client_textdomain' ),
72 'name' => 'relevant-resources', 85 'name' => 'relevant-resources',
73 'render_template' => 'blocks/relevant-resources/relevant-resources.php', 86 'render_template' => 'blocks/relevant-resources/relevant-resources.php',
......
...@@ -257,4 +257,4 @@ if ( ! function_exists( 'understrap_all_excerpts_get_more_link' ) ) { ...@@ -257,4 +257,4 @@ if ( ! function_exists( 'understrap_all_excerpts_get_more_link' ) ) {
257 } 257 }
258 } 258 }
259 259
260 add_filter( 'excerpt_length', function( $length ) { return 30; } );
...\ No newline at end of file ...\ No newline at end of file
260 add_filter( 'excerpt_length', function( $length ) { return 35; } );
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -63,13 +63,7 @@ ...@@ -63,13 +63,7 @@
63 } 63 }
64 } 64 }
65 65
66 .promo-image.pdf {
67 width: 270px;
68 66
69 img {
70 width: auto;
71 }
72 }
73 67
74 .promo-carousel { 68 .promo-carousel {
75 h2 { 69 h2 {
...@@ -94,7 +88,7 @@ ...@@ -94,7 +88,7 @@
94 color: #000; 88 color: #000;
95 text-decoration: none; 89 text-decoration: none;
96 max-width: 320px; 90 max-width: 320px;
97 91 font-weight: bold;
98 92
99 } 93 }
100 94
...@@ -133,9 +127,13 @@ ...@@ -133,9 +127,13 @@
133 } 127 }
134 128
135 .pdf-carousel{ 129 .pdf-carousel{
136 .carousel-content{ 130 .promo-image.pdf {
137 //width: 270px; 131 width: 270px;
138 } 132
133 img {
134 width: auto;
135 }
136 }
139 } 137 }
140 138
141 //swiper controls 139 //swiper controls
...@@ -347,9 +345,10 @@ ...@@ -347,9 +345,10 @@
347 } 345 }
348 346
349 p { 347 p {
350 font-size: 1rem; 348 font-size: 16px;
351 line-height: 1.5rem; 349 line-height: 21px;
352 text-align: left; 350 text-align: left;
351 font-weight: normal;
353 } 352 }
354 353
355 } 354 }
...@@ -361,3 +360,7 @@ ...@@ -361,3 +360,7 @@
361 } 360 }
362 361
363 362
363
364 .promo-image.pdf img{
365 width: auto;
366 }
......
...@@ -2,5 +2,5 @@ ...@@ -2,5 +2,5 @@
2 Theme Name: MSF CA Child 2 Theme Name: MSF CA Child
3 Author: Tenzing Communications 3 Author: Tenzing Communications
4 Template: msf-ca 4 Template: msf-ca
5 Version: 1.0.11 5 Version: 1.0.12
6 */ 6 */
...\ No newline at end of file ...\ No newline at end of file
......