Created
May 24, 2015 09:47
-
-
Save mafsdisseny/7bc4e5438622ebb76889 to your computer and use it in GitHub Desktop.
Add genesis-structural-wrap and filter it through a template
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 | |
// First we include it in the genesis-structural-wrap genesis declaration | |
add_theme_support( 'genesis-structural-wraps', array( | |
'header', | |
// 'nav', | |
// 'subnav', | |
'site-inner', | |
'footer-widgets', | |
'page-header-img', //here is it | |
'footer' | |
) ); | |
// Add the page-header-img structural wrap | |
// Using the page's featured image as the div's background | |
add_action( 'genesis_after_header', 'mafs_page_header_img' ); | |
function mafs_page_header_img() { | |
// This conditional restricts the implementation of this wrap to only pages | |
if ( is_page()) { | |
$full_image_url = wp_get_attachment_image_src( get_the_ID(), 'full' ); | |
printf( '<div %s style="background-image: url(%s)">', genesis_attr( 'page-header-img' ), $full_image_url[0] ); | |
genesis_structural_wrap( 'page-header-img' ); | |
//the page-header-img-left class is to delimite that this div only occupies the 60% of the width | |
//check the style.css for more details | |
printf( '<div %s>', genesis_attr( 'page-header-img-left' ) ); | |
printf( '<h1 %s>%s</h1>', genesis_attr( 'class-for-the-title' ), esc_html( get_the_title() ) ); | |
echo '</div>'; | |
genesis_structural_wrap( 'page-header-img', 'close' ); | |
echo '</div>'; | |
} | |
} |
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 | |
/** Filter the page-header-img in this particular template | |
adding a div after the opening wrap div. */ | |
//------------------------------------------------------ | |
/* @param string $output The markup to be returned | |
* @param string $original_output Set to either 'open' or 'close' | |
*/ | |
add_filter( 'genesis_structural_wrap-page-header-img', 'mafs_page_header_img_filter_in_sectors', 10, 2); | |
function mafs_page_header_img_filter_in_sectors( $output, $original_output ) { | |
global $post; | |
if( 'open' == $original_output ) { | |
$output = $output . '<span class="section-title">' . get_the_title( $post->post_parent ) . '</span>'; | |
} | |
return $output; | |
} |
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
.page-header-img .section-title { | |
background-color: #465d97; | |
color: #fff; | |
padding: 2px 8px; | |
margin-left: 20px; | |
margin-bottom: 10px; | |
margin-top: 5px; | |
display: inline-block; | |
float: left; | |
text-transform: uppercase; | |
font-weight: 700; | |
font-size: 12px; | |
} |
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
.page-header-img { | |
background-color: #efefef; | |
border-bottom: 1px solid #eee; | |
padding: 60px 0; | |
background-size: cover; /*this controls that the image covers the div*/ | |
background-position: center 50%; /*control the final position of the image into the div */ | |
} | |
.page-header-img-left { | |
float: left; | |
width: 60%; | |
clear: both; | |
} | |
.page-header-img h1 { | |
margin: 0 0 0 20px; | |
color: #fff; | |
font-weight: 700; | |
font-size: 50px; | |
line-height: 1; | |
-webkit-filter: drop-shadow(0 0 5px rgba(0,0,0,0.8)); | |
filter: drop-shadow(0 0 5px rgba(0,0,0,0.8)); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment