Skip to content

Instantly share code, notes, and snippets.

@srikat
Last active May 9, 2017 23:33
Show Gist options
  • Save srikat/9501416 to your computer and use it in GitHub Desktop.
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/
jQuery(document).ready(function($) {
$(".featured-single").backstretch([BackStretchImg.src],{duration:3000,fade:750});
});
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(); });
});
//* 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;
}
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();
}
});
});
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
});
});
/* 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