Community Forums › Forums › Archived Forums › Design Tips and Tricks › Adding backstretch to full-width header in Magazine Pro
Tagged: backstretch, full width header, Magazine Pro
- This topic has 9 replies, 3 voices, and was last updated 9 years, 9 months ago by susank.
-
AuthorPosts
-
June 10, 2014 at 11:15 am #108783jonburrMember
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:
http://metropolitanmen.com//* 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 1:05 pm #108800Brad DaltonParticipantDid 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 #108818jonburrMemberHk 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 #108825Brad DaltonParticipantWhy did you modify this?
wp_localize_script( 'agency-pro-backstretch-set', 'BackStretchImg', array( 'src' => get_background_image() ) );
June 10, 2014 at 3:27 pm #108826jonburrMemberI 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 #108836Brad DaltonParticipantPlease 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 #109303Brad DaltonParticipantJune 10, 2014 at 8:46 pm #109314jonburrMemberAh - 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 #109346Brad DaltonParticipantJuly 9, 2014 at 1:54 am #113537susankMemberI've been dealing with a variation of your issue and found this post useful -
How to replace the StudioPress background header image with a real image logo
http://blackhillswebworks.com/2013/05/10/how-to-replace-the-studiopress-background-header-image-with-a-real-image-logo
including John's reference to Soliloquy, a responsive slider
http://soliloquywp.com -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.