Skip to content

Instantly share code, notes, and snippets.

@mafsdisseny
Created May 24, 2015 09:47
Show Gist options
  • Save mafsdisseny/7bc4e5438622ebb76889 to your computer and use it in GitHub Desktop.
Save mafsdisseny/7bc4e5438622ebb76889 to your computer and use it in GitHub Desktop.
Add genesis-structural-wrap and filter it through a template
<?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>';
}
}
<?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;
}
.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;
}
.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