#604 Banner Slider refactor

web/wp-content/themes/cncf-twenty-two/components/event-banner.php

@@ -1,6 +1,6 @@
 <?php
 /**
- * Event Banner
+ * Event Banner - Singular Data
  *
  * @package WordPress
  * @subpackage cncf-theme
@@ -11,9 +11,7 @@
 $desktop_image_id = get_post_meta( get_the_ID(), 'lf_event_desktop_banner', true );
 $external_url     = get_post_meta( get_the_ID(), 'lf_event_external_url', true );
 
-if ( $desktop_image_id && $mobile_image_id ) :
-	?>
-<div class="event-banner has-animation-scale-2" role="banner">
+?>
 	<a href="<?php echo esc_url( $external_url ); ?>" title="<?php the_title_attribute( get_the_ID() ); ?>">
 		<picture>
 			<source media="(max-width: 499px)"
@@ -37,9 +35,3 @@
 			?>
 		</picture>
 	</a>
-</div>
-	<?php // Keep this spacer as its conditionally needed based on an event being displayed. ?>
-<div style="height:100px" aria-hidden="true"
-	class="wp-block-spacer is-style-60-100"></div>
-	<?php
-endif;

web/wp-content/themes/cncf-twenty-two/components/event-multiple-banner.php

@@ -0,0 +1,37 @@
+<?php
+/**
+ * Event Banner - Multiple
+ *
+ * @package WordPress
+ * @subpackage cncf-theme
+ * @since 1.0.0
+ */
+
+// load slick css.
+wp_enqueue_style( 'slick-css', get_template_directory_uri() . '/build/slick.min.css', array(), filemtime( get_template_directory() . '/build/slick.min.css' ), 'all' );
+
+// load main slick.
+wp_enqueue_script( 'slick', get_template_directory_uri() . '/source/js/libraries/slick.min.js', array( 'jquery' ), filemtime( get_template_directory() . '/source/js/libraries/slick.min.js' ), true );
+
+// load slick events config.
+wp_enqueue_script( 'slick-events-config', get_template_directory_uri() . '/source/js/on-demand/slick-events-config.js', array( 'jquery', 'slick' ), filemtime( get_template_directory() . '/source/js/on-demand/slick-events-config.js' ), true );
+
+$the_query = $args['the_query'];
+
+?>
+
+<h3 class="has-normal-font-size header-lines">Forthcoming Events</h3>
+
+<div class="home-events-slider">
+	<?php
+	while ( $the_query->have_posts() ) {
+		$the_query->the_post();
+		get_template_part( 'components/event-banner' );
+	}
+	?>
+</div>
+<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
+<div class="wp-block-separator is-style-thin-line"></div>
+<?php // Keep this spacer as its conditionally needed based on an event being displayed. ?>
+<div style="height:100px" aria-hidden="true"
+	class="wp-block-spacer is-style-60-100"></div>

web/wp-content/themes/cncf-twenty-two/components/event-single-banner.php

@@ -0,0 +1,21 @@
+<?php
+/**
+ * Event Banner - Single
+ *
+ * @package WordPress
+ * @subpackage cncf-theme
+ * @since 1.0.0
+ */
+
+?>
+
+<h3 class="has-normal-font-size header-lines">The Next CNCF Event</h3>
+
+<div class="event-banner has-animation-scale-2" role="banner">
+<?php
+get_template_part( 'components/event-banner' );
+?>
+</div>
+	<?php // Keep this spacer as its conditionally needed based on an event being displayed. ?>
+<div style="height:100px" aria-hidden="true"
+	class="wp-block-spacer is-style-60-100"></div>

web/wp-content/themes/cncf-twenty-two/includes/development.php

@@ -19,3 +19,19 @@ function r( $var ) {
 	print_r( $var );
 	echo '</pre>';
 }
+
+if ( ! function_exists( 'write_log' ) ) {
+	/**
+	 * Write Log
+	 *
+	 * @param string $log Variable.
+	 * @return void
+	 */
+	function cncf_log( $log ) {
+		if ( is_array( $log ) || is_object( $log ) ) {
+			error_log( print_r( $log, true ) );
+		} else {
+			error_log( $log );
+		}
+	}
+}

web/wp-content/themes/cncf-twenty-two/includes/shortcodes/event-banner.php

@@ -66,13 +66,13 @@ function show_event_in_menu() {
 
 /**
  * Returns banner info for inclusion in homepage.
- * Grabs max of 1 upcoming events with a desktop image.
+ * Grabs max of 10 upcoming events with a desktop image.
  */
 function show_event_banner() {
 	$the_query = new WP_Query(
 		array(
 			'post_type'      => 'lf_event',
-			'posts_per_page' => 1,
+			'posts_per_page' => 10,
 			'orderby'        => 'meta_value',
 			'meta_key'       => 'lf_event_date_end',
 			'order'          => 'ASC',
@@ -85,20 +85,24 @@ function show_event_banner() {
 				),
 				array(
 					'key'     => 'lf_event_desktop_banner',
-					'compare' => 'EXISTS',
+					'value'   => '0',
+					'compare' => '!=',
 				),
 				array(
 					'key'     => 'lf_event_mobile_banner',
-					'compare' => 'EXISTS',
+					'value'   => '0',
+					'compare' => '!=',
 				),
 			),
 		)
 	);
 
 	if ( $the_query->have_posts() ) {
-		while ( $the_query->have_posts() ) {
+		if ( 1 === $the_query->post_count ) {
 			$the_query->the_post();
-			get_template_part( 'components/event-banner' );
+			get_template_part( 'components/event-single-banner' );
+		} else {
+			get_template_part( 'components/event-multiple-banner', null, array( 'the_query' => $the_query ) );
 		}
 	}
 }

web/wp-content/themes/cncf-twenty-two/source/js/on-demand/slick-config.js

@@ -57,16 +57,18 @@ jQuery( document ).ready(
 		let prefersReducedMotionQuery = window.matchMedia( '(prefers-reduced-motion: reduce)' );
 		let prefersReducedMotion = ! prefersReducedMotionQuery || prefersReducedMotionQuery.matches;
 
-			/**
-			 * Stops/starts Slick based on prefs.
-			 */
+		/**
+		 * Stops/starts Slick based on prefs.
+		 */
 		function getMotionMatch() {
 			if (prefersReducedMotion) {
 				jQuery( ".home-projects-slider-item-1" ).slick( 'slickPause' );
 				jQuery( ".home-projects-slider-item-2" ).slick( 'slickPause' );
+				jQuery( ".home-events-slider" ).slick( 'slickPause' );
 			} else {
 				jQuery( ".home-projects-slider-item-1" ).slick( 'slickPlay' );
 				jQuery( ".home-projects-slider-item-2" ).slick( 'slickPlay' );
+				jQuery( ".home-events-slider" ).slick( 'slickPlay' );
 			}
 		}
 			// Watches for change event to reload based on prefs.

web/wp-content/themes/cncf-twenty-two/source/js/on-demand/slick-events-config.js

@@ -0,0 +1,40 @@
+/**
+ * Events Banner - Slick Config
+ *
+ * @package WordPress
+ * @since 1.0.0
+ */
+
+jQuery( document ).ready(
+	function( $ ) {
+		eventSlider( $ );
+
+	}
+);
+
+function eventSlider($) {
+
+	const slider = $( '.home-events-slider' );
+
+	if ( ! slider ) {
+		return;
+	}
+
+	slider.slick(
+		{
+			infinite: true,
+			slidesToShow: 1,
+			slidesToScroll: 1,
+			swipeToSlide: true,
+			draggable: false,
+			autoplay: true,
+			autoplaySpeed: 5000,
+			cssEase: "linear",
+			lazyLoad: "ondemand",
+			pauseOnHover: true,
+			pauseOnFocus: false,
+			prevArrow: '<img class="slick-prev" src="/wp-content/themes/cncf-twenty-two/images/slider-arrow-left.svg" />',
+			nextArrow: '<img class="slick-next" src="/wp-content/themes/cncf-twenty-two/images/slider-arrow-right.svg" />'
+		 }
+	);
+}

web/wp-content/themes/cncf-twenty-two/source/scss/blocks/_separator.scss

@@ -45,3 +45,13 @@
 		margin-left: unset;
 	}
 }
+
+// Used for event banner only? Not a selectable style.
+.wp-block-separator {
+	&.is-style-thin-line {
+		width: 100% !important;
+		height: 1px !important;
+		border-bottom: 1px solid rgba(#828282, 0.3);
+		margin-left: unset;
+	}
+}

web/wp-content/themes/cncf-twenty-two/source/scss/components/_events.scss

@@ -55,3 +55,25 @@
 		display: block;
 	}
 }
+
+.header-lines {
+	display: flex;
+	align-items: center;
+	color: $black;
+	font-size: 16px;
+	text-transform: uppercase;
+	margin-bottom: 30px;
+	&:before,
+	&:after {
+		flex: 1;
+		height: 1px;
+		content: '';
+		background-color: rgba(#828282, 0.3);
+	}
+	&::before {
+		margin-right: 18px;
+	}
+	&::after {
+		margin-left: 18px;
+	}
+}