Adding backstretch to full-width header in Magazine Pro

Member

Has anybody added Backstretch to a full-width header image?

I'd like to target .site-header a in Magazine Pro.
The theme calls the Custom Header function, with dimensions defined as 360x60
The client wants 1260x375 image used.

I've installed backstretch.js and backstretch-set.js, with the latter calling the target:

jQuery(document).ready(function($) {
	$(".site-title a").backstretch([BackStretchImg.src],{duration:3000,fade:750});
});

I have the following code added to functions.php:

//* Enqueue Backstretch script and prepare images for loading
add_action( 'wp_enqueue_scripts', 'agency_enqueue_backstretch_scripts' );
function agency_enqueue_backstretch_scripts() {

	//* Load scripts only if custom background is being used
	if ( ! get_background_image() )
		return;

	wp_enqueue_script( 'agency-pro-backstretch', get_bloginfo( 'stylesheet_directory' ) . '/js/backstretch.js', array( 'jquery' ), '1.0.0' );
	wp_enqueue_script( 'agency-pro-backstretch-set', get_bloginfo( 'stylesheet_directory' ).'/js/backstretch-set.js' , array( 'jquery', 'agency-pro-backstretch' ), '1.0.0' );

	wp_localize_script( 'agency-pro-backstretch-set', 'BackStretchImg', array( 'src' => str_replace( 'http:', '', get_background_image() ) ) );

}
//* Add support for custom background
add_theme_support( 'custom-background', array( 'wp-head-callback' => 'agency_background_callback' ) ); 

//* Add custom background callback for background color
function agency_background_callback() {

    if ( ! get_background_color() )
        return;

    printf( '<style>body { background-color: #%s !important; }</style>' . "\n", get_background_color() );

}

http://metropolitanmen.com

June 10, 2014 at 1:05 pm #108800

Participant

Did you add the 2 js files to the js folder in the Magazine Pro child theme?

And this in functions:

//* Add support for custom header
add_theme_support( 'custom-header', array(
	'header_image'    => '',
	'header-selector' => '.site-header a',
	'header-text'     => false,
	'height'          => 375,
	'width'           => 1260,
) );

Untested.

Looks like you modified the code for the background:

array( 'src' => str_replace( 'http:', '', get_background_image() ) ) );

June 10, 2014 at 2:48 pm #108818

Member

Hk Brad, thanks for having a look at this...

Yes, the javascript files are in the js folder for the Magazine Pro theme.

Other than adding them and the code above, I haven't modified the theme files.

Yes, your suggested code to call the header image is in functions.php.

Here's the entire file in its current state:

<?php
//* Start the engine
include_once( get_template_directory() . '/lib/init.php' );

//* Set Localization (do not remove)
load_child_theme_textdomain( 'magazine', apply_filters( 'child_theme_textdomain', get_stylesheet_directory() . '/languages', 'magazine' ) );

//* Child theme (do not remove)
define( 'CHILD_THEME_NAME', __( 'Magazine Pro Theme', 'magazine' ) );
define( 'CHILD_THEME_URL', 'http://my.studiopress.com/themes/magazine/' );
define( 'CHILD_THEME_VERSION', '3.0.1' );

//* Enqueue Google Fonts and JS script
add_action( 'wp_enqueue_scripts', 'magazine_enqueue_scripts' );
function magazine_enqueue_scripts() {

	wp_enqueue_style( 'google-fonts', '//fonts.googleapis.com/css?family=Roboto:300,400|Raleway:400,500,900', array(), CHILD_THEME_VERSION );

	wp_enqueue_script( 'magazine-entry-date', get_bloginfo( 'stylesheet_directory' ) . '/js/entry-date.js', array( 'jquery' ), '1.0.0' );
	wp_enqueue_script( 'magazine-responsive-menu', get_bloginfo( 'stylesheet_directory' ) . '/js/responsive-menu.js', array( 'jquery' ), '1.0.0' );

}

//* Add HTML5 markup structure
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list' ) );

//* Remove the header right widget area
unregister_sidebar( 'header-right' );

//* Add viewport meta tag for mobile browsers
add_theme_support( 'genesis-responsive-viewport' );

//* Add new image sizes
add_image_size( 'home-middle', 360, 200, true );
add_image_size( 'home-top', 750, 420, true );
add_image_size( 'sidebar-thumbnail', 100, 100, true );
add_image_size( 'left-sidebar-thumbnail', 60, 60, true );

//* Add support for additional color styles
add_theme_support( 'genesis-style-selector', array(
	'magazine-pro-blue'   => __( 'Magazine Pro Blue', 'magazine' ),
	'magazine-pro-green'  => __( 'Magazine Pro Green', 'magazine' ),
	'magazine-pro-orange' => __( 'Magazine Pro Orange', 'magazine' ),
) );

//* Add support for custom header
add_theme_support( 'custom-header', array(
	'default-text-color'     => '000000',
	'header-selector'        => '.site-title a',
	'header-text'            => false,
	'height'                 => 379,
	'width'                  => 1260,
) );

//* Reposition the primary navigation menu
add_action( 'genesis_after_header', 'genesis_do_nav' );

//* Add primary-nav class if primary navigation is used
add_filter( 'body_class', 'backcountry_no_nav_class' );
function backcountry_no_nav_class( $classes ) {

	$menu_locations = get_theme_mod( 'nav_menu_locations' );

	if ( ! empty( $menu_locations['primary'] ) ) {
		$classes[] = 'primary-nav';
	}
	return $classes;
}

//* Add Post categories above Post title
add_action ( 'genesis_entry_header', 'sk_show_category_name', 9 );
function sk_show_category_name() {

	if ( ! ( is_singular('post') || is_archive() || is_search() || is_page_template('page_blog.php' ) || is_home() ) )
		return;

	echo do_shortcode('[post_categories before="CATEGORY: "]');
}

//* Show only Post tags in entry meta for single Posts
add_filter( 'genesis_post_meta', 'sk_post_meta_filter' );
function sk_post_meta_filter($post_meta) {

	if ( is_singular('post') ) :
		$post_meta = '[post_tags]';
	else :
	endif;
	return $post_meta;
}

//* Customize search form input box text
add_filter( 'genesis_search_text', 'magazine_search_text' );
function magazine_search_text( $text ) {

	return esc_attr( __( 'Search the site ...', 'magazine' ) );
	
}

//* Modify the size of the Gravatar in the author box
add_filter( 'genesis_author_box_gravatar_size', 'magazine_author_box_gravatar' );
function magazine_author_box_gravatar( $size ) {

	return 140;

}

//* Modify the size of the Gravatar in the entry comments
add_filter( 'genesis_comment_list_args', 'magazine_comments_gravatar' );
function magazine_comments_gravatar( $args ) {

	$args['avatar_size'] = 100;
	return $args;

}

//* Remove entry meta in entry footer
add_action( 'genesis_before_entry', 'magazine_remove_entry_meta' );
function magazine_remove_entry_meta() {
	
	//* Remove if not single post
	if ( ! is_single() ) {
		remove_action( 'genesis_entry_footer', 'genesis_entry_footer_markup_open', 5 );
		remove_action( 'genesis_entry_footer', 'genesis_post_meta' );
		remove_action( 'genesis_entry_footer', 'genesis_entry_footer_markup_close', 15 );
	}

}

//* Hooks after-entry widget area to single posts
add_action( 'genesis_entry_footer', 'magazine_after_entry_widget'  ); 
function magazine_after_entry_widget() {

    if ( ! is_singular( 'post' ) )
    	return;

    genesis_widget_area( 'after-entry', array(
		'before' => '<div class="after-entry widget-area"><div class="wrap">',
		'after'  => '</div></div>',
    ) );

}

//* Remove comment form allowed tags
add_filter( 'comment_form_defaults', 'magazine_remove_comment_form_allowed_tags' );
function magazine_remove_comment_form_allowed_tags( $defaults ) {
	
	$defaults['comment_notes_after'] = '';
	return $defaults;

}

//* Add support for 3-column footer widgets
add_theme_support( 'genesis-footer-widgets', 3 );

//* Register widget areas
genesis_register_sidebar( array(
	'id'          => 'home-top',
	'name'        => __( 'Home - Top', 'magazine' ),
	'description' => __( 'This is the top section of the homepage.', 'magazine' ),
) );
genesis_register_sidebar( array(
	'id'          => 'home-middle',
	'name'        => __( 'Home - Middle', 'magazine' ),
	'description' => __( 'This is the middle section of the homepage.', 'magazine' ),
) );
genesis_register_sidebar( array(
	'id'          => 'home-bottom',
	'name'        => __( 'Home - Bottom', 'magazine' ),
	'description' => __( 'This is the bottom section of the homepage.', 'magazine' ),
) );
genesis_register_sidebar( array(
	'id'          => 'after-entry',
	'name'        => __( 'After Entry', 'magazine' ),
	'description' => __( 'This is the after entry section.', 'magazine' ),
) );

//* Enqueue Backstretch script and prepare images for loading
add_action( 'wp_enqueue_scripts', 'agency_enqueue_backstretch_scripts' );
function agency_enqueue_backstretch_scripts() {

	//* Load scripts only if custom background is being used
	if ( ! get_background_image() )
		return;

	wp_enqueue_script( 'agency-pro-backstretch', get_bloginfo( 'stylesheet_directory' ) . '/js/backstretch.js', array( 'jquery' ), '1.0.0' );
	wp_enqueue_script( 'agency-pro-backstretch-set', get_bloginfo( 'stylesheet_directory' ).'/js/backstretch-set.js' , array( 'jquery', 'agency-pro-backstretch' ), '1.0.0' );

	wp_localize_script( 'agency-pro-backstretch-set', 'BackStretchImg', array( 'src' => str_replace( 'http:', '', get_background_image() ) ) );

}
//* Add support for custom background
add_theme_support( 'custom-background', array( 'wp-head-callback' => 'agency_background_callback' ) ); 

//* Add custom background callback for background color
function agency_background_callback() {

    if ( ! get_background_color() )
        return;

    printf( '<style>body { background-color: #%s !important; }</style>' . "\n", get_background_color() );

}

June 10, 2014 at 3:15 pm #108825

Participant

Why did you modify this?

wp_localize_script( 'agency-pro-backstretch-set', 'BackStretchImg', array( 'src' => get_background_image() ) );

June 10, 2014 at 3:27 pm #108826

Member

I didn't modify that - I lifted it from my copy of Agency Pro.
Not being able to write php, I need to borrow code... and that's where I got that.

How should it read?

June 10, 2014 at 4:58 pm #108836

Participant

Please download a fresh copy of the theme and replace that line as it has been modified at your end for some reason.

June 10, 2014 at 5:01 pm #109303

Participant

Can't embed PHP here at the moment.

June 10, 2014 at 8:46 pm #109314

Member

Ah - good eyes!
That got in there from some back-and-forth on this on a Google+ thread... (took bad advice)

I have (what I think is) correct code now... but when I take the wrap to 100%, the image huddles left and doesn't stretch.

June 11, 2014 at 7:17 am #109346

Participant

Try this http://www.w3schools.com/cssref/pr_background-image.asp