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 217 additions and 22 deletions
<?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";
}
?>
<div id="<?php echo esc_attr($id); ?>" class="<?php echo esc_attr(
$className
); ?> ">
<?php if (have_rows("promo_items")): ?>
<div class=" carousel-items promo-carousel">
<div class='swiper-wrapper'>
<?php while (the_repeater_field("promo_items")): ?>
<?php $carousel_style = get_sub_field("carousel_style");
switch ($carousel_style) {
case "video": ?>
<?php
$index = get_row_index();
$modalId = "modal-" . $index;
?>
<div class="swiper-slide">
<div class="carousel-content">
<a href="javascript:void(0)" class="video_open" data-bs-toggle="modal" data-bs-target="#<?php echo $modalId; ?>">
<div class="promo-image video">
<?php
$image = get_sub_field("place_holder");
if (!empty($image)): ?>
<img src="<?php echo esc_url($image["url"]); ?>" alt="<?php echo esc_attr( $image["alt"]); ?>" loading="eager" />
<?php endif;?>
</div>
<div class="promo-text"><?php echo get_sub_field("title"); ?></div>
</a>
</div>
</div>
<?php break;
case "pdf": ?>
<?php $page = get_sub_field("pdf"); ?>
<div class="swiper-slide">
<div class="carousel-content">
<a href="<?php echo $page; ?>" class="pdf_open">
<div class="promo-image pdf">
<?php
$image = get_sub_field("place_holder");
if (!empty($image)): ?>
<img src="<?php echo esc_url($image["url"]); ?>" alt="<?php echo esc_attr($image["alt"]); ?>" loading="eager" />
<?php endif;?>
<img src="<?php echo $image; ?>" alt="<?php echo $img_alt; ?>" loading="eager">
</div>
<div class="promo-text"><?php echo get_sub_field("title"); ?></div>
</a>
</div>
</div>
<?php break;
case "outside": ?>
<?php $page = get_sub_field("outside_url"); ?>
<div class="swiper-slide">
<div class="carousel-content">
<a href="<?php echo $page; ?>" >
<div class="promo-image ">
<?php
$image = get_sub_field("place_holder");
if (!empty($image)): ?>
<img src="<?php echo esc_url($image["url"]); ?>" alt="<?php echo esc_attr($image["alt"]); ?>" loading="eager" />
<?php endif;?>
<img src="<?php echo $image; ?>" alt="<?php echo $img_alt; ?>" loading="eager">
</div>
<div class="promo-text"><?php echo get_sub_field("title"); ?></div>
</a>
</div>
</div>
<?php break;
default: ?>
<?php } ?>
<?php endwhile; ?>
</div>
<div class="swiper-button-prev" data-id="<?= $id ?>"></div>
<div class="swiper-button-next" data-id="<?= $id ?>"></div>
</div>
<?php if (have_rows("promo_items")): ?>
<?php while (the_repeater_field("promo_items")):
$carousel_style = get_sub_field("carousel_style");
if($carousel_style == 'video'){ ?>
<?php $index = get_row_index();
$modalId = "modal-" . $index;
?>
<?php
$iframe = get_sub_field("video");
// Use preg_match to find iframe src.
preg_match('/src="(.+?)"/', $iframe, $matches);
$src = $matches[1];
// Add extra parameters to src and replace HTML.
$params = [
"controls" => 1,
"hd" => 1,
"autohide" => 1,
"enablejsapi" => 1,
"version" => 3,
];
$new_src = add_query_arg($params, $src);
$iframe = str_replace($src, $new_src, $iframe);
// Add extra attributes to iframe HTML.
$attributes = 'frameborder="0"';
$iframe = str_replace("></iframe>", " " . $attributes . "></iframe>", $iframe);
$iframe = str_replace(
"<iframe",
'<iframe class="yt_player_iframe" ',
$iframe
);
?>
<div class="modal" id="<?php echo $modalId; ?>" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"></h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<?php echo $iframe; ?>
</div>
</div>
</div>
</div>
<script>
var myModalEl = document.getElementById('<?php echo $modalId; ?>')
myModalEl.addEventListener('hidden.bs.modal', function(event) {
jQuery('.yt_player_iframe').each(function() {
this.contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}', '*')
});
});
</script>
<?php
}
endwhile; ?>
<?php endif; ?>
<?php else: ?>
<p>Please add some slides.</p>
<?php endif; ?>
</div>
\ No newline at end of file
......@@ -19126,13 +19126,6 @@ ul.sf_date_field .sf-datepicker {
transition: all 0.5s ease-in-out;
}
.promo-image.pdf {
width: 270px;
}
.promo-image.pdf img {
width: auto;
}
.promo-carousel h2, .promo-carousel .h2 {
font-size: 1.5rem;
line-height: 1.875rem;
......@@ -19153,6 +19146,7 @@ ul.sf_date_field .sf-datepicker {
color: #000;
text-decoration: none;
max-width: 320px;
font-weight: bold;
}
.promo-carousel .pdf_open,
.promo-carousel .video_open {
......@@ -19180,6 +19174,13 @@ ul.sf_date_field .sf-datepicker {
text-decoration: underline;
}
.pdf-carousel .promo-image.pdf {
width: 270px;
}
.pdf-carousel .promo-image.pdf img {
width: auto;
}
.swiper-pagination-bullet {
background: #fff !important;
border: 0.125rem solid #2c2c2c !important;
......@@ -19376,9 +19377,10 @@ ul.sf_date_field .sf-datepicker {
text-align: left;
}
.carousel:has(.featured-carousel) .promo-text p {
font-size: 1rem;
line-height: 1.5rem;
font-size: 16px;
line-height: 21px;
text-align: left;
font-weight: normal;
}
.carousel:has(.featured-carousel) .understrap-read-more-link {
font-size: 14px;
......@@ -19386,6 +19388,10 @@ ul.sf_date_field .sf-datepicker {
text-align: left;
}
.promo-image.pdf img {
width: auto;
}
.pojo-a11y-grayscale {
overflow-y: scroll !important;
}
......
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') ) {
]
));
acf_register_block_type( array(
'title' => __( 'Carousel', 'client_textdomain' ),
'name' => 'carousel',
......@@ -68,6 +69,18 @@ if( function_exists('acf_add_options_page') ) {
));
acf_register_block_type( array(
'title' => __( 'Mixed Carousel', 'client_textdomain' ),
'name' => 'carouse-mixed',
'render_template' => 'blocks/carousel-mixed/carousel.php',
'mode' => 'edit',
'supports' => [
'align' => false,
'anchor' => true,
'customClassName' => true
]
));
acf_register_block_type( array(
'title' => __( 'Relevant Resources', 'client_textdomain' ),
'name' => 'relevant-resources',
'render_template' => 'blocks/relevant-resources/relevant-resources.php',
......
......@@ -257,4 +257,4 @@ if ( ! function_exists( 'understrap_all_excerpts_get_more_link' ) ) {
}
}
add_filter( 'excerpt_length', function( $length ) { return 30; } );
\ No newline at end of file
add_filter( 'excerpt_length', function( $length ) { return 35; } );
\ No newline at end of file
......
......@@ -63,13 +63,7 @@
}
}
.promo-image.pdf {
width: 270px;
img {
width: auto;
}
}
.promo-carousel {
h2 {
......@@ -94,7 +88,7 @@
color: #000;
text-decoration: none;
max-width: 320px;
font-weight: bold;
}
......@@ -133,8 +127,12 @@
}
.pdf-carousel{
.carousel-content{
//width: 270px;
.promo-image.pdf {
width: 270px;
img {
width: auto;
}
}
}
......@@ -347,9 +345,10 @@
}
p {
font-size: 1rem;
line-height: 1.5rem;
font-size: 16px;
line-height: 21px;
text-align: left;
font-weight: normal;
}
}
......@@ -361,3 +360,7 @@
}
.promo-image.pdf img{
width: auto;
}
......
......@@ -2,5 +2,5 @@
Theme Name: MSF CA Child
Author: Tenzing Communications
Template: msf-ca
Version: 1.0.11
Version: 1.0.12
*/
\ No newline at end of file
......