This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Full width header image not working

Resolved 13 replies premiumthemetheme-vantage
11 years ago · Last reply by bob.brinkmn 10 years ago

I’ve found info here, that to set full width image as header in Vantage Pro, I can do it under Appearance > Customize > Page: Masthead Background Image.
So I tried it with 1024x120px jpg image and it doesn’t work :( It shows up in small selection window on the left of Customize screen but it doesn’t on page.
What else should I do?

URL: http://taichi-flow.pl

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

13
  1. Greg Priday Staff 11 years, 12 days ago

    Hi teedee,

    There is a bit of a bug in the Vantage Customizer. We have out developer, Braam, working on the issue right now. We’ll publish a fix as soon as it’s ready. Very sorry about that.

  2. teedee 11 years, 12 days ago

    Waiting forward to update.
    At the moment I set my header as logo image. It works pretty nice but I am not happy with all the left/right margins.
    It is kind of good idea and I would stick to this because it makes all the header clickable.
    Can you help me with CSS code to remove left/right margins and have “logo” of full width?

  3. Andrew Misplon Staff 11 years, 11 days ago

    That might look something like this:

    /* Vantage Full Width: 100% Width Logo Space */
    body.responsive.layout-full #page-wrapper #masthead .full-container {
    max-width: 100%;
    }
    body.responsive.layout-full #page-wrapper #masthead .site-navigation .full-container {
    max-width: 1080px;
    }
    header#masthead .hgroup .logo {
    float: none;
    }
    header#masthead {
    padding: 0;
    }
    .main-navigation {
    padding: 0 35px;
    }
  4. teedee 11 years, 11 days ago

    Thank you Andrew but it still doesn’t work :(

    This is what I experienced before. No mater how I try, image doesn’t want to be larger than 1080px.
    At the moment, original logo image is 1280x150px and still displayed as 1080x127px

    I believe it is like that because logo size is set directly in HTML code (link a tag) and in this case it reads clearly – width=”1080″ height=”127″

    What can I do with this?

  5. Andrew Misplon Staff 11 years, 11 days ago

    Thanks for adding the CSS. Chrome Developer confirms your logo is now rendering at 1280, the space available is just a bit bigger than that on most screens. To center your logo please make this change, where I’ve said:

    header#masthead .hgroup .logo {
    float: none;
    }

    Change that to:

    header#masthead .hgroup .logo {
    float: none;
    text-align: center;
    }
  6. Andrew Misplon Staff 11 years, 11 days ago

    Unfortunately this isn’t possible with Custom CSS, the logo is being outputted in it’s constrained size. If you’re running a child theme you can copy the entire logo function into a functions.php file in the child theme and then safely edit it there:

    if(!function_exists('vantage_display_logo')):
    /**
     * Display the logo 
     */
    function vantage_display_logo(){
    	$logo = siteorigin_setting( 'logo_image' );
    	$logo = apply_filters('vantage_logo_image_id', $logo);
    	if( empty($logo) ) {
    		if ( function_exists( 'jetpack_the_site_logo' ) && jetpack_has_site_logo() ) {
    			// We'll let Jetpack handle things
    			jetpack_the_site_logo();
    			return;
    		}
    		// Just display the site title
    		$logo_html = '<h1 class="site-title">'.get_bloginfo( 'name' ).'</h1>';
    		$logo_html = apply_filters('vantage_logo_text', $logo_html);
    	}
    	else {
    		// load the logo image
    		if(is_array($logo)) {
    			list ($src, $height, $width) = $logo;
    		}
    		else {
    			$image = wp_get_attachment_image_src($logo, 'full');
    			$src = $image[0];
    			$height = $image[2];
    			$width = $image[1];
    		}
    		// Add all the logo attributes
    		$logo_attributes = apply_filters('vantage_logo_image_attributes', array(
    			'src' => $src,
    			'width' => round($width),
    			'height' => round($height),
    			'alt' => sprintf( __('%s Logo', 'vantage'), get_bloginfo('name') ),
    		) );
    		if($logo_attributes['width'] > vantage_get_site_width()) {
    			// Don't let the width be more than the site width.
    			$width = vantage_get_site_width();
    			$logo_attributes['height'] = round($logo_attributes['height'] / ($logo_attributes['width'] / $width));
    			$logo_attributes['width'] = $width;
    		}
    		$logo_attributes_str = array();
    		if( !empty( $logo_attributes ) ) {
    			foreach($logo_attributes as $name => $val) {
    				if( empty($val) ) continue;
    				$logo_attributes_str[] = $name.'="'.esc_attr($val).'" ';
    			}
    		}
    		$logo_html = apply_filters('vantage_logo_image', '<img '.implode( ' ', $logo_attributes_str ).' />');
    	}
    	// Echo the image
    	echo apply_filters('vantage_logo_html', $logo_html);
    }
    endif;
  7. teedee 11 years, 11 days ago

    Yes Andrew, I know this trick, but still I do not know weather this function has been modified in current upgrade or not. So I still have to compare it against updated one. It doesn’t make any difference at all.

    I really do not understand your idea behind creating a cap on logo image size?

  8. Andrew Misplon Staff 11 years, 11 days ago

    Unless you see something go wrong with your logo, which is unlikely, you can safely run this function in your child theme without comparing it to the parent after each upgrade. The if statement that starts this function off:

    if(!function_exists('vantage_display_logo')):

    is specifically there so we can do just this and re-use the function in a child theme.

    The function is written like this to help optimise images. Keep in mind you’re now customising the theme. 99.9% of use cases won’t involve a logo bigger than 1080px so there isn’t any point in loading one bigger, that’s the reasoning there.

    Hope this helps.

  9. Andrew Misplon Staff 11 years, 11 days ago

    Thanks for the contributions you’ve made on other threads. We really appreciate the effort there.

  10. teedee 11 years, 11 days ago

    OK Andrew :) I like to help. I believe if you want to be helped, you have to help.

    I give your suggestion a go. Thank you for your time :)

  11. Andrew Misplon Staff 11 years, 11 days ago

    Definitely a positive point of view.

    If you need a vanilla child theme to get this going, please find one here:

    https://siteorigin.com/wp-content/uploads/2015/01/vantage-child-vanilla-enqueue.zip

    (Just to confirm, activating a child theme does unfortunately reset Customizer and menu settings.)

    Let us know if you need any further help here.

  12. bob.brinkmn Private 10 years, 11 months ago

    This is a private message.

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread