AZ Fertility: Our Stories

Documentation:

HTML:

<div id="stories"> <div class="container"> <div id="stories-header"> <h1><?php the_field('story_header_text', 'option'); ?></h1> <ul id="story-options"> <?php if( get_field('story', 'option') ): ?> <?php $i = 0; ?> <?php while( has_sub_field('story', 'option') ): ?> <?php if ($i == 0) { ?> <li data-target="#story-carousel" class="story-carousel-marker story-option-active" data-slide-to="<?php echo $i ?>"><?php the_sub_field('story_name', 'option'); ?></li> <?php } else { ?> <li data-target="#story-carousel" class="story-carousel-marker" data-slide-to="<?php echo $i ?>"><?php the_sub_field('story_name', 'option'); ?></li> <?php } ?> <?php $i++; endwhile; ?> <?php endif; ?> </ul> </div> <div id="stories-content"> <div id="story-carousel" class="carousel fade" data-ride="carousel"> <div class="carousel-inner" role="listbox"> <?php if( get_field('story', 'option') ): ?> <?php $i = 0; ?> <?php while( has_sub_field('story', 'option') ): ?> <?php if ($i == 0) { ?> <div class="item active" data-slide="<?php echo $i ?>"> <?php } else { ?> <div class="item" data-slide="<?php echo $i ?>"> <?php } ?> <div id="story-single"> <div id="story-image-container"> <?php $image = get_sub_field('story_image', 'option'); ?> <div class="story-image" style="background-image: url(<?php echo $image['url'] ?>);" title="<?php echo $image['alt'] ?>"></div> </div> <div id="story-detail-container"> <div class="story-detail"> <div class="story-detail-inner"> <h1><?php the_sub_field('story_name', 'option') ?></h1> <?php $video_id = get_sub_field('story_video_id', 'option'); $video_type = get_sub_field('story_video_type', 'option'); ?> <button class="rd-btn rd-btn-gold-white story-video-watch-btn" data-video-type="<?php echo $video_type ?>" data-video-id="<?php echo $video_id ?>" data-toggle="modal" data-target="#stories-modal"><i class="fa fa-play-circle-o"></i> Watch</button> <p><?php the_sub_field('story_description', 'option') ?></p> </div> </div> </div> </div> </div> <?php $i++; endwhile; ?> <?php endif; ?> </div> </div> </div> </div> <div id="stories-footer"> <a href="<?php the_field('story_footer_button_url', 'option'); ?>"><button class="rd-btn rd-btn-transparent-gold"><?php the_field('story_footer_button_text', 'option'); ?></button></a> </div> </div> </div> <div id="stories-modal" class="modal fade" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-body"> <button type="button" class="close" data-dismiss="modal"><i class="fa fa-times"></i></button> <div id="modal-video-container"></div> </div> </div> </div> </div>

CSS:

/* Stories */ /* SCSS: Variables Used: $primary-color: darkgreen; $secondary-color: #fff; $primary-font-color: #fff; $header-font-stack: Helvetica, sans-serif; */ #stories { // background-image: $stories-background-image; background-color: lightgray; background-size: cover; width: 100%; padding: 50px 0; float: left; } #stories-header { text-align: center; h1 { font-size: 50px; font-family: $header-font-stack; margin: 0 0 20px 0; } } #story-options { li { display: inline-block; border-right: 1px solid white; padding-right: 10px; margin-right: 10px; text-transform: uppercase; color: #fff; font-weight: 700; letter-spacing: 1px; cursor: pointer; transition: 1s; } li:last-child { border-right: none; } li.story-option-active { color: #545453; } } #story-image-container, #story-detail-container { width: 500px; height: 300px; position: relative; } #stories-content { position: relative; margin: 50px 0px; } #story-image-container { z-index: 2; } #story-detail-container { background-color: $primary-color; position: absolute; right: 0; top: 30px; width: 670px; z-index: 1; } .story-image, .story-detail { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } #story-single { position: relative; padding-bottom: 30px; } .story-image { background-size: cover; background-position: center center; } .story-detail { text-align: center; padding: 20px 50px; display: flex; align-items: center; justify-content: center; h1 { font-weight: 400; margin-top: 0; color: $primary-font-color; } p { font-family: $header-font-stack; color: $primary-font-color; font-size: 16px; line-height: 30px; margin-top: 15px; } button { color: $primary-font-color; border-color: $secondary-color; } } #stories-footer { text-align: center; } #stories-modal { padding-top: 40px; } @media (max-width: 1199px) { #story-image-container, #story-detail-container { width: 100%; height: 300px; position: relative; top: 0; } ul#story-options { padding: 0; } #story-options li { width: 100%; border: none; padding: 10px 0; margin: 0; } #story-detail-container { height: auto; float: left; margin-bottom: 50px; } .story-detail { position: relative; } #stories-content { margin: 0; padding-bottom: 0; } #story-single { width: 500px; margin: 0 auto; } } @media (max-width: 500px) { #story-single { width: 100%; margin: 0 auto; } }

JS:

jQuery('.story-video-watch-btn').click(function(){ var video_id = jQuery(this).attr('data-video-id'); var video_type = jQuery(this).attr('data-video-type'); jQuery('#modal-video-container').empty(); switch(video_type) { case 'YouTube': var append_html = ''; break; case 'Vimeo': var append_html = ''; break; default: break; } jQuery('#modal-video-container').append(append_html); }); jQuery('button.close').click(function(){ jQuery('#modal-video-container').empty(); }); jQuery('#story-carousel').on('slid.bs.carousel', function () { var current_slide = jQuery('#story-carousel').find('.item.active').attr('data-slide'); console.log(current_slide); jQuery('.story-carousel-marker').removeClass('story-option-active'); jQuery('.story-carousel-marker[data-slide-to=' + current_slide + ']').addClass('story-option-active'); });

PHP:

function acf_options_add_story() { if( function_exists('acf_add_local_field_group') ): acf_add_local_field(array ( 'placement' => 'left', 'endpoint' => 0, 'key' => 'field_585135419a6f0', 'label' => 'Story', 'name' => '', 'type' => 'tab', 'parent' => 'theme_settings', 'instructions' => '', 'required' => 0, 'conditional_logic' => 0, 'wrapper' => array ( 'width' => '', 'class' => '', 'id' => '', ), )); acf_add_local_field(array ( 'default_value' => '', 'maxlength' => '', 'placeholder' => '', 'prepend' => '', 'append' => '', 'key' => 'field_587a63b5ff90f', 'parent' => 'theme_settings', 'label' => 'Story Header Text', 'name' => 'story_header_text', 'type' => 'text', 'instructions' => '', 'required' => 0, 'conditional_logic' => 0, 'wrapper' => array ( 'width' => '', 'class' => '', 'id' => '', ), )); acf_add_local_field(array ( 'default_value' => '', 'maxlength' => '', 'placeholder' => '', 'prepend' => '', 'append' => '', 'key' => 'field_587a63d5ff910', 'parent' => 'theme_settings', 'label' => 'Story Footer Button Text', 'name' => 'story_footer_button_text', 'type' => 'text', 'instructions' => '', 'required' => 0, 'conditional_logic' => 0, 'wrapper' => array ( 'width' => '', 'class' => '', 'id' => '', ), )); acf_add_local_field(array ( 'default_value' => '', 'maxlength' => '', 'placeholder' => '', 'prepend' => '', 'append' => '', 'key' => 'field_587a63e3ff911', 'parent' => 'theme_settings', 'label' => 'Story Footer Button URL', 'name' => 'story_footer_button_url', 'type' => 'text', 'instructions' => '', 'required' => 0, 'conditional_logic' => 0, 'wrapper' => array ( 'width' => '', 'class' => '', 'id' => '', ), )); acf_add_local_field(array ( 'sub_fields' => array ( array ( 'return_format' => 'array', 'preview_size' => 'medium', 'library' => 'all', 'min_width' => '', 'min_height' => '', 'min_size' => '', 'max_width' => '', 'max_height' => '', 'max_size' => '', 'mime_types' => '', 'key' => 'field_5851356d9a6f2', 'label' => 'Story Image', 'name' => 'story_image', 'type' => 'image', 'instructions' => '', 'required' => 0, 'conditional_logic' => 0, 'wrapper' => array ( 'width' => '', 'class' => '', 'id' => '', ), ), array ( 'default_value' => '', 'maxlength' => '', 'placeholder' => '', 'prepend' => '', 'append' => '', 'key' => 'field_585135849a6f3', 'label' => 'Story Name', 'name' => 'story_name', 'type' => 'text', 'instructions' => '', 'required' => 0, 'conditional_logic' => 0, 'wrapper' => array ( 'width' => '', 'class' => '', 'id' => '', ), ), array ( 'default_value' => '', 'new_lines' => 'br', 'maxlength' => '', 'placeholder' => '', 'rows' => '', 'key' => 'field_5851358f9a6f4', 'label' => 'Story Description', 'name' => 'story_description', 'type' => 'textarea', 'instructions' => '', 'required' => 0, 'conditional_logic' => 0, 'wrapper' => array ( 'width' => '', 'class' => '', 'id' => '', ), ), array ( 'multiple' => 0, 'allow_null' => 0, 'choices' => array ( 'YouTube' => 'YouTube', 'Vimeo' => 'Vimeo', ), 'default_value' => array ( ), 'ui' => 0, 'ajax' => 0, 'placeholder' => '', 'return_format' => 'value', 'key' => 'field_5852b98881cf9', 'label' => 'Story Video Type', 'name' => 'story_video_type', 'type' => 'select', 'instructions' => '', 'required' => 0, 'conditional_logic' => 0, 'wrapper' => array ( 'width' => '', 'class' => '', 'id' => '', ), ), array ( 'default_value' => '', 'maxlength' => '', 'placeholder' => '', 'prepend' => '', 'append' => '', 'key' => 'field_585135a29a6f5', 'label' => 'Story Video ID', 'name' => 'story_video_id', 'type' => 'text', 'instructions' => '', 'required' => 0, 'conditional_logic' => 0, 'wrapper' => array ( 'width' => '', 'class' => '', 'id' => '', ), ), ), 'min' => 0, 'max' => 0, 'layout' => 'block', 'button_label' => '', 'collapsed' => '', 'key' => 'field_585135599a6f1', 'parent' => 'theme_settings', 'label' => 'Story', 'name' => 'story', 'type' => 'repeater', 'instructions' => '', 'required' => 0, 'conditional_logic' => 0, 'wrapper' => array ( 'width' => '', 'class' => '', 'id' => '', ), )); endif; } add_action( 'acf/init', 'acf_options_add_story' );