WordPress Webinar Page Template with Advanced Custom Fields and Animate on Scroll Coding

Cape Analytics Webinar
<?php
/**
 * Template Name: Webinar
 * @relies on Advanced Custom Fields, assumes Zoho Webinar account
 * @installation also uses "Animate on Scroll" (AOS) library 
 * @annotated use case
 */
	 
get_header();

?>

<div class="cms-banner tac">
    <div class="cms-banner-col cms-banner-content" style="background:<?php the_field('banner_bg_color'); ?>;">
        <div style="color:<?php the_field('banner_content_color'); ?>" class="cms-banner-content-inner" data-aos="fade-up" data-aos-delay="900">
            <p class="cap white title-track"><strong><?php the_title(); ?></strong></p>
            <h2>
                <?php the_field('webinar_description'); ?>
            </h2>
			<h4><?php the_field('webinar_date_and_time'); // returning "Custom" date format 'F j, Y \a\t g:i A' ?> Pacific Time</h4> 
            <?php if( get_field('banner_button_label') ) { ?>
			<div class="tac">
				<a class="button button-lightblue" type="button" href="https://meeting.zoho.com/meeting/register?sessionId=<?php the_field( 'webinar_identifier' ) ; ?>"><?php the_field('banner_button_label'); ?></a>
			</div>
            <?php } ?>
        </div>
    </div>
	<?php if ( have_rows( 'hosts') ) : ?>
	
	<?php 
		
		//count hosts for staggered animation and class for number of items 
		$i = 0 ;
		$count = 1;
		$base_delay = 300;
		$delay_factor = 900 ; 
		$hosts = get_field('hosts');
		
		if ( is_array( $hosts ) ) {
			
			$count = count($hosts);
			$delay_factor = 1200/$count ;
			
		} 
		
		$hosts_bg_style = '' ;
		$bg_image = get_field( 'hosts_background_image' ) ; // ACF Image returning image id #
		$hosts_border_color = get_field( 'hosts_images_border_color' ) ;
		$use_hosts_background_image = get_field( 'use_hosts_background_image' ) ; //ACF Radio Button
		//use Post Featured Image if using background image, but no image uploaded
		$hosts_background_image_url = $bg_image ? wp_get_attachment_image_url( $bg_image, 'large') : get_the_post_thumbnail_url( get_the_ID(), 'large' ) ; 
		
		if ( $use_hosts_background_image ) {
			
			$hosts_bg_style = ' url(' . $hosts_background_image_url . '); background-repeat: no-repeat; background-size: cover; background-position: center;' ;
			
		}
		if ( $hosts_border_color ) {
			
			$hosts_image_style = ' style="border: 2px solid ' . $hosts_border_color . ';"' ;
		}
		
	?>
		
		
		<div class="cms-banner-col cms-banner-bg bg-cover hosts-div hosts-<?php echo $count ; ?>" style="color:<?php the_field('hosts_text_color'); ?>; background: <?php the_field( 'hosts_bg' ) ; ?><?php echo $hosts_bg_style; ?>;" data-aos="fade-left" data-aos-delay="300">
		
		<?php while ( have_rows( 'hosts' ) ) : the_row() ; 
		
			$i++ ;
			
		?>
			<div class="host" data-aos="fade-up" data-aos-delay="<?php echo $base_delay + ( $i * $delay_factor ) ; //staggered delay ?>" >
				<div class="host-image">
					<img src="<?php echo wp_get_attachment_image_url( get_sub_field( 'image') ) ; ?>" <?php echo $hosts_image_style ; ?> />
				</div>
				<div class="host-text">
					<h4><?php the_sub_field( 'name' ) ; ?></h4>
					<h5><?php the_sub_field( 'title' ) ; ?></h5>
				</div>
			</div> 
		<?php endwhile; ?>
		
		</div>
		
	<?php else : // if no "hosts" data, display a custom image ?>
    <div class="cms-banner-col cms-banner-bg bg-cover" style="background-image:url(<?php echo get_the_post_thumbnail_url(); ?>);">
    </div> 
	<?php endif ; ?>
</div>

<?php
//pre-existing code
$this_id = $post->ID;
$next_page = get_field( 'next_page' );

if(get_field('next_page_small_label')) {
    $next_label = get_field( 'next_page_small_label' );
} else {
    $next_label = 'UP NEXT';
}
?>
<style type="text/css">
    .next-product a:before {content:"<?php echo $next_label; ?>";}
</style>
<?php
if( $next_page ):

    $post = $next_page;
    setup_postdata( $post );

    if(get_field('next_page_title', $this_id)) {
        $next_title = get_field('next_page_title', $this_id);
    } else {
        $next_title = get_the_title();
    }

?>
<div class="next-product tac">
    <div class="container">
        <a href="<?php the_permalink(); ?>"><?php echo $next_title; ?></a>
    </div>
</div>
<?php wp_reset_postdata(); endif; ?>

<?php get_footer(); ?>
/* WEBINAR TEMPLATE STYLES */
/* LEFT SIDE */
.page-template-template-webinar .title-track {
	font-size: 30px; 
}
.page-template-template-webinar .title-track:before {
	display: inline-block;
	height: 31px;
	width: 40px;
	content: '';
	background-image: url(https://w6p6f2r8.stackpathcdn.com/wp-content/uploads/2020/06/video_icon.png?x91142);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: left -2px; 
	vertical-align: middle;
}
.page-template-template-webinar .cms-banner-content-inner h2 {
	margin-bottom: 12px
}
.page-template-template-webinar .cms-banner-content-inner h4 {
	margin: 30px 0 45px; 
}
/* RIGHT SIDE */
.hosts-div {
	height: 100%;
	width: 100%; 
	max-width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center; 
	flex-wrap: wrap; 
	box-sizing: border-box;
	padding-top: calc( 15vh + 55px) ;
	padding-bottom: 15vh; 
	padding-left: 7.5vw;
	padding-right: 0; 
}
.host {
	width: 100%;
	height: auto; 
	display: flex; 
	flex-direction: row;
	justify-content: center;
	box-sizing: border-box;
	margin: 0 auto 5vh;  
} 
/* HOST VARIABLE RESPONSIVE SETTINGS */
@media ( max-width: 1024px) {
	.hosts-div {
		padding: 2vh 0
	}
	
	.hosts-div.hosts-4 {
		padding-top: 10vh;
		padding-bottom: 10vh;
	}
}
@media ( min-width: 1025px) {
	.hosts-div.hosts-4 {
		display: flex;
		flex-direction: row;
		padding-left: 3vw;
		padding-right: 3vw;
		justify-content: space-between;
	}
	.hosts-4 .host {
		width: 45%;
		margin-bottom: 0
	}
}
/* RIGHT SIDE/HOSTS ELEMENTS */
.host-image { 
	display: flex;
	flex-direction: column;
	justify-content: center;  
	padding: 0;
	width: 20%;
	min-width: 125px;
	margin-right: 20px;
}
.host-image img {
	border-radius: 50%;
	width: 100px;
	height: auto;
	margin: 0 auto;
	display: block;
} 
.host-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: left; 
	width: 57%;
}
.host h4 {
	margin-top: 0;
	margin-bottom: 0;
	line-height: 1 
} 
.host h5 {
	display: block;
	height: 36px;
	line-height: 1.1;
	margin-top: .2em;
	margin-bottom: 0;
}
/* TABLET */
@media (max-width: 1024px) { 
	.page-template-template-webinar .cms-banner-col {
    	width: 100%;
	} 
	.cms-banner-content-inner {
		margin-left: auto;
		margin-right: auto;
		padding-top: 200px
	}
	.hosts-div {
		padding: 15vh 10vw;
	}
}
/* PHONE */
@media (max-width: 599px) {
	.hosts-div {
		padding: 5vh 2vw 0
	}
	.host {
		width: 100%;
	}
}
cape a webinar page editor 2020 06 27 1041
Cape Analytics Webinar
cape_a-iphone-output-2020-06-23-997

Leave a Reply