<?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(/wp-content/uploads/2020/06/video_icon.png);
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%;
}
}
