Invested Traveler: Stories

Documentation:

HTML:

<!-- Stories --> <div id="stories"> <div class="container"> <div id="stories-header"> <h1><?php the_field('story_header_text', 'option'); ?></h1> <p><?php the_field('story_header_subtext', 'option') ?></p> </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> <p><?php the_sub_field('story_description', 'option') ?></p> <button class="rd-btn rd-btn-gold-white story-video-watch-btn" data-url="<?php the_sub_field('story_url', 'option') ?>">Read More</button> <a id="see-all-stories-link" data-url="/stories/"> <p>See All Stories</p> </a> </div> </div> </div> </div> </div> <?php $i++; endwhile; ?> <?php endif; ?> </div> </div> </div> </div> <div id="story-options-wrapper"> <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> </div>

CSS:

/* Stories */ $primary-color: darkgreen; $secondary-color: #fff; $primary-font-color: #fff; $header-font-stack: Helvetica, sans-serif; $stories-background-image: url('../images/invested-traveler/stories-invested-traveler-bg.jpg'); #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; font-weight: 100; letter-spacing: 5px; text-transform: uppercase; color: #1f2321; } p { font-size: 16px; font-style: italic; color: #1f2321; } } #story-options-wrapper { text-align: center; } #story-options { li { display: inline-block; font-size: 16px; padding: 6px; font-weight: 700; cursor: pointer; transition: 1s; margin-right: 20px; color: #545453; border: 2px solid rgba(64, 155, 200, 0); } li.story-option-active { border: 2px solid #409bc8; color: #409bc8; } } #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-video-watch-button, #see-all-stories-link { cursor: pointer; } .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; font-size: 20px; } p { color: $primary-font-color; font-size: 14px; line-height: 24px; margin-bottom: 15px; } button { color: $primary-font-color; border-color: $secondary-color; border-width: 2px; font-family: $header-font-stack; } } #see-all-stories-link p { margin: 10px 0 0 0; } #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 { margin: 0; width: auto; padding: 10px; } #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:

// Stories $('#story-carousel').on('slid.bs.carousel', function () { var current_slide = $('#story-carousel').find('.item.active').attr('data-slide'); $('.story-carousel-marker').removeClass('story-option-active'); $('.story-carousel-marker[data-slide-to=' + current_slide + ']').addClass('story-option-active'); }); $('.story-video-watch-btn, #see-all-stories-link').on('click', function () { var url = $(this).attr('data-url'); window.location.href = url; });

PHP:

// Stories 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_587a63b5ff20f', 'parent' => 'theme_settings', 'label' => 'Story Header Subtext', 'name' => 'story_header_subtext', '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 ( 'default_value' => '', 'maxlength' => '', 'placeholder' => '', 'prepend' => '', 'append' => '', 'key' => 'field_585135a29a6f5', 'label' => 'Story URL', 'name' => 'story_url', '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' );