Skip to content

Instantly share code, notes, and snippets.

@srikat
Last active August 29, 2015 14:21
Show Gist options
  • Save srikat/424a75ea7b9eb73cf1e8 to your computer and use it in GitHub Desktop.
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/
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' ),
) );
.single-parallax-section {
margin-top: 0;
}
<?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();
/* 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