Last active
May 9, 2017 23:33
-
-
Save srikat/9501416 to your computer and use it in GitHub Desktop.
Medium-like Full View Featured Image in Genesis. http://sridharkatakam.com/medium-like-full-view-featured-image-genesis/
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
jQuery(document).ready(function($) { | |
$(".featured-single").backstretch([BackStretchImg.src],{duration:3000,fade:750}); | |
}); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
jQuery(function( $ ){ | |
function fade_home_top() { | |
if ( $(window).width() > 800 ) { | |
window_scroll = $(this).scrollTop(); | |
$(".featured-single .entry-header").css({ | |
'opacity' : 1-(window_scroll/300) | |
}); | |
} | |
} | |
$(window).scroll(function() { fade_home_top(); }); | |
}); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//* Relocate Post Title and Post Info | |
add_action( 'genesis_after_header', 'sk_relocate_post_title_info' ); | |
function sk_relocate_post_title_info() { | |
if ( is_singular('post' ) ) { | |
remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_open', 5 ); | |
remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_close', 15 ); | |
remove_action( 'genesis_entry_header', 'genesis_do_post_title' ); | |
remove_action( 'genesis_entry_header', 'genesis_post_info', 12 ); | |
echo '<div class="featured-single"><div class="wrap">'; | |
genesis_entry_header_markup_open(); | |
genesis_do_post_title(); | |
genesis_post_info(); | |
genesis_entry_header_markup_close(); | |
echo '</div></div>'; | |
} | |
} | |
//* Enqueue site-wide scripts | |
add_action( 'wp_enqueue_scripts', 'custom_load_scripts' ); | |
function custom_load_scripts() { | |
wp_enqueue_style( 'dashicons' ); | |
wp_enqueue_script( 'header-fade', get_bloginfo( 'stylesheet_directory' ) . '/js/header-fade.js', array( 'jquery' ), '1.0.0', true ); | |
} | |
//* Enqueue scripts on single Post pages | |
add_action( 'wp_enqueue_scripts', 'enqueue_singular' ); | |
function enqueue_singular() { | |
if ( is_singular('post' ) ) { | |
// to add a dynamically-resized background image to .featured-single | |
wp_enqueue_script( 'backstretch', get_stylesheet_directory_uri() . '/js/jquery.backstretch.min.js', array( 'jquery' ), '', true ); | |
wp_enqueue_script( 'backstretch-init', get_stylesheet_directory_uri() . '/js/backstretch-init.js', array( 'backstretch' ), '1.0.0', true ); | |
// if the post has a featured image, send it to Backstretch else use a default one | |
if ( has_post_thumbnail() ) { | |
wp_localize_script( 'backstretch-init', 'BackStretchImg', array( 'src' => wp_get_attachment_url( get_post_thumbnail_id() ) ) ); | |
} | |
else { | |
wp_localize_script( 'backstretch-init', 'BackStretchImg', array( 'src' => 'http://genesis.dev/wp-content/themes/genesis-sample/images/picjumbo.com_IMG_6533-1600.jpg' ) ); | |
} | |
// for smooth scrolling when the down arrow is clicked | |
wp_enqueue_script( 'scrollTo', get_stylesheet_directory_uri() . '/js/jquery.scrollTo.min.js', array( 'jquery' ), '', true ); | |
wp_enqueue_script( 'localScroll', get_stylesheet_directory_uri() . '/js/jquery.localScroll.min.js', array( 'scrollTo' ), '', true ); | |
// for setting the height of 'Featured Single' section so its background fills the viewport, adding the down arrow, and setting smooth scrolling speed | |
wp_enqueue_script( 'singular', get_bloginfo( 'stylesheet_directory' ) . '/js/singular-scripts.js', array( 'jquery' ), '1.0.0', true ); | |
// for fading away Post title and info when scrolling down and fading in when scrolling up | |
wp_enqueue_script( 'fade-on-scroll', get_stylesheet_directory_uri() . '/js/fade-on-scroll.js', array( 'scrollTo' ), '1.0.0', true ); | |
} | |
} | |
//* Add a ID to .site-inner | |
add_filter( 'genesis_attr_site-inner', 'custom_attributes_content' ); | |
function custom_attributes_content( $attributes ) { | |
if ( is_singular('post' ) ) { | |
$attributes['id'] = 'site-inner'; | |
} | |
return $attributes; | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
jQuery(function( $ ){ | |
$(window).scroll(function () { | |
var yPos = ( $(window).scrollTop() ); | |
if( yPos > 75 ) { // fade out sticky menu after 75 pixels have been scrolled down from the top | |
$(".site-header").slideUp(); | |
} else { | |
$(".site-header").fadeIn(); | |
} | |
}); | |
}); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
jQuery(function( $ ){ | |
$('.featured-single .wrap') .css({'height': (($(window).height()))+'px'}); | |
$(window).resize(function(){ | |
$('.featured-single .wrap') .css({'height': (($(window).height()))+'px'}); | |
}); | |
$(".featured-single .entry-header .entry-meta").after('<p class="arrow"><a href="#site-inner"></a></p>'); | |
$.localScroll({ | |
duration: 750 | |
}); | |
}); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Medium-like Full View Featured Image | |
--------------------------------------------- */ | |
a img { | |
margin-bottom: 0; | |
} | |
.site-header { | |
position: fixed; | |
width: 100%; | |
z-index: 999; | |
} | |
.single-post .site-header { | |
background: rgba(0, 0, 0, 0.5); | |
} | |
.featured-single .wrap { | |
width: 100%; | |
height: 100%; | |
} | |
.featured-single .wrap { | |
display: table; | |
max-width: 768px; | |
text-align: center; | |
} | |
.featured-single .entry-header { | |
display: table-cell; | |
font-size: 20px; | |
padding: 200px 0; | |
vertical-align: middle; | |
width: 100%; | |
} | |
.featured-single .entry-header .entry-title { | |
color: #fff; | |
font-size: 60px; | |
text-shadow: 3px 3px rgba(0, 0, 0, 0.1); | |
/*background: rgba(0, 0, 0, 0.6); | |
display: inline-block; | |
padding: 10px 20px; | |
-webkit-border-radius: 3px; | |
-moz-border-radius: 3px; | |
border-radius: 3px;*/ | |
} | |
.featured-single .entry-meta { | |
color: #fff; | |
font-size: 18px; | |
/*background: rgba(0, 0, 0, 0.6);*/ | |
display: inline-block; | |
/*padding: 5px 20px; | |
-webkit-border-radius: 3px; | |
-moz-border-radius: 3px; | |
border-radius: 3px;*/ | |
} | |
.featured-single .entry-meta a { | |
border-bottom: 1px dotted #fff; | |
color: #fff; | |
} | |
.site-header .wrap { | |
padding: 10px 0; | |
} | |
.single-post .site-title a, .single-post .site-title a:hover { | |
color: #ddd; | |
} | |
.single-post .nav-header .genesis-nav-menu a { | |
color: #fff; | |
} | |
.single-post .nav-header .genesis-nav-menu a:hover { | |
color: #ddd; | |
} | |
.site-inner { | |
margin-top: 104px; | |
} | |
.single-post .site-inner { | |
margin-top: 0; | |
} | |
.arrow { | |
margin: 0; | |
text-align: center; | |
width: 100%; | |
} | |
.arrow a { | |
background: #fff; | |
border-radius: 30px; | |
display: inline-block; | |
padding: 13px 10px 6px; | |
text-align: center; | |
line-height: 1; | |
} | |
.arrow a:before { | |
-webkit-font-smoothing: antialiased; | |
color: #000; | |
content: "\f347"; | |
font: normal 40px/1 'dashicons'; | |
height: 40px; | |
width: 40px; | |
} | |
.arrow a:focus { | |
outline: none; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment