-
-
Save srikat/424a75ea7b9eb73cf1e8 to your computer and use it in GitHub Desktop.
Featured Image Background Parallax section on single Posts in Altitude Pro. https://sridharkatakam.com/featured-image-background-parallax-section-on-single-posts-in-altitude-pro/
This file contains 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
genesis_register_sidebar( array( | |
'id' => 'single-parallax-section', | |
'name' => __( 'Single Parallax Section', 'parallax' ), | |
'description' => __( 'This is the parallax section below nav on single Posts.', 'parallax' ), | |
) ); |
This file contains 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
.single-parallax-section { | |
margin-top: 0; | |
} |
This file contains 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
<?php | |
// Output Single Parallax Section below header | |
add_action( 'genesis_after_header', 'sk_single_parallax_section' ); | |
function sk_single_parallax_section() { | |
echo '<div class="single-parallax-section widget-area"><div class="wrap"><header class="entry-header">'; | |
genesis_post_info(); | |
genesis_do_post_title(); | |
echo '</header></div></div>'; | |
} | |
// Enqueue Parallax | |
add_action( 'wp_enqueue_scripts', 'sk_enqueue_single_scripts' ); | |
function sk_enqueue_single_scripts() { | |
wp_enqueue_script( 'single', get_stylesheet_directory_uri() . '/js/single.js', array( 'jquery' ), '', true ); | |
// If the current Post does not have a featured image, abort | |
if ( ! has_post_thumbnail() ) { | |
return; | |
} | |
// Pass the URL of Post's featured image as value of a "src" key of "SinglePlxBkgrdImg" array to single.js | |
wp_localize_script( 'single', 'SinglePlxBkgrdImg', array( 'src' => str_replace( 'http:', '', genesis_get_image( array('format' => 'url') ) ) ) ); | |
} | |
// Remove the entry title | |
remove_action( 'genesis_entry_header', 'genesis_do_post_title' ); | |
// Remove post info | |
remove_action( 'genesis_entry_header', 'genesis_post_info', 5 ); | |
// Remove entry header markup | |
remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_open', 5 ); | |
remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_close', 15 ); | |
genesis(); |
This file contains 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
/* Featured Image Background Parallax section on single Posts | |
--------------------------------------------------------------- */ | |
.single .site-inner { | |
margin-top: 96px; /* 170 (default value) - 94 (height of fixed header) */ | |
} | |
.single-parallax-section { | |
margin-top: 74px; | |
padding: 100px 0; | |
background-image: url("//demo.studiopress.com/parallax/wp-content/themes/parallax-pro/images/bg-1.jpg"); /* set URL of default background image here */ | |
background-attachment: fixed; | |
background-color: #fff; | |
background-position: 50% 0; | |
background-repeat: no-repeat; | |
-webkit-background-size: cover; | |
-moz-background-size: cover; | |
-o-background-size: cover; | |
background-size: cover; | |
color: #fff; | |
text-align: center; | |
} | |
.single-parallax-section h4.widget-title { | |
color: #fff; | |
font-size: 72px; | |
margin-bottom: 40px; | |
} | |
.entry-header::after { | |
border-bottom: none; | |
content: none; | |
display: none; | |
margin: 0; | |
padding-bottom: 0; | |
} | |
.single-parallax-section .wrap::after { | |
border-bottom: 1px solid #000; | |
content: ""; | |
display: block; | |
margin: 0 auto 60px; | |
padding-bottom: 30px; | |
width: 25%; | |
} | |
.single-parallax-section .entry-title { | |
color: #fff; | |
} | |
.single-parallax-section .entry-meta a:hover { | |
color: #ddd; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment