WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Twenty Eleven header image size (26 posts)

  1. spackletoe
    Member
    Posted 2 years ago #

    I edited the style sheet to change the theme's width to 980, so I'd like to change the dimensions that the header image upload tool is expecting to 980x350. Where would I go to do that?

    Thanks!

  2. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    functions.php:

    line 122+:

    define( 'HEADER_IMAGE_WIDTH', apply_filters( 'twentyeleven_header_image_width', 1000 ) );
    	define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyeleven_header_image_height', 288 ) );
  3. spackletoe
    Member
    Posted 2 years ago #

    Thank you!! New world's record for a question being answered.

  4. lottrr
    Member
    Posted 2 years ago #

    Is there a way to include this kind of code in a child theme?

  5. bluejpro
    Member
    Posted 2 years ago #

    Lotrr --
    This post from wpti.ps goes into detail about removing and replacing the header image in a twenty eleven child theme - even changing the size - using functions.php.

    http://wpti.ps/functions/replace-remove-header-image-twenty-eleven-theme/

    I'm trying it right now.

  6. bluejpro
    Member
    Posted 2 years ago #

    Even better help here - if you just want to change the default header image size in twenty eleven

    http://www.blog.web6.org/twenty-eleven-header-image-how-to-change-size/

  7. MyAwesomeBlog
    Member
    Posted 2 years ago #

  8. cristopher_elsner
    Member
    Posted 2 years ago #

    hi MyAwesomeBlog

    Find "#branding img" in css and set Height and Width of image.

    best luck.

  9. mr49online
    Member
    Posted 2 years ago #

    After R&D the best solution that i come to know is that, create its child theme, and do any kind of customization there. To create child theme please checkout this link.

  10. theBrettman
    Member
    Posted 2 years ago #

    You're all doing it wrong! There's two ways to do it right. Either make your own variable to replace HEADER_IMAGE_HEIGHT and HEADER_IMAGE_WIDTH in your functions.php and define a new variable (also replacing the variables in your template files), or remove the filter and redefine it in your functions.php:

    remove_filter( 'HEADER_IMAGE_WIDTH', 'twentyeleven_header_image_width' );
    remove_filter( 'HEADER_IMAGE_HEIGHT', 'twentyeleven_header_image_height' );
    define( 'HEADER_IMAGE_WIDTH', apply_filters( 'child_header_image_width', 1280 ) );
    define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'child_header_image_height', 200 ) );

    I prefer the latter so I don't have to find/replace HEADER_IMAGE_WIDTH & HEADER_IMAGE_HEIGHT with new variables. I just add those four lines to my functions.php and I'm done! Since it is in my child theme, I never have to worry about it getting overwritten on update and if you don't remove_filter() on each first, it will show in your debug log (if you use one) because those variables are already defined.

  11. David Borrink
    Member
    Posted 2 years ago #

    the Brettman,

    Thanks! I just needed a quick example of how to write it up. Works like a charm.

  12. patrick_kelley
    Member
    Posted 2 years ago #

    @theBrettman: Hi, added your code to my custom functions.php and received the following error message when logging in to the dashboard:

    Warning: Cannot modify header information - headers already sent by (output started at /home/redmon6/public_html/test/wp-content/themes/twentyeleven-child/functions.php:8) in /home/redmon6/public_html/test/wp-includes/pluggable.php on line 866

  13. patrick_kelley
    Member
    Posted 2 years ago #

    I found the answer in the FAQ -- spurious characters added at the end of the file by Expression Web. Solved by saving in Notepad after deleting junk after closing PHP tag.

    Solving the "headers already sent" problem

  14. danapalooza
    Member
    Posted 2 years ago #

    This is mostly what I needed. What about manipulating the header image size on a per-page basis? In other words, having different page templates with different header image sizes.

  15. esmi
    Theme Diva & Forum Moderator
    Posted 2 years ago #

    Please post a new topic.

  16. danapalooza
    Member
    Posted 2 years ago #

    @esmi Will do.

  17. theBrettman
    Member
    Posted 2 years ago #

    @danapalooza actually, it's not a hard question to answer and belongs in this post. HEADER_IMAGE_HEIGHT and HEADER_IMAGE_WIDTH are just constants made by the twentyeleven theme that you use where you put the code into your header for the header image. You could make your own constants/variables, insert actual values, or just make custom templates for each page with different constants/variables or some code to set those values on whichever page but it sounds like it would be better to make a plugin to do this and not use HEADER_IMAGE_HEIGHT and HEADER_IMAGE_WIDTH. You could make your own plugin and make your own template tag that uses it and replace the code there with your template tag.

  18. killyman
    Member
    Posted 2 years ago #

    theBrettman

    Thanks! worked like a charm for me when I added to my funtions.php in my child theme the following

    define( 'HEADER_IMAGE_WIDTH', apply_filters( 'twentyeleven_header_image_width', 1000 ) );
    define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyeleven_header_image_height', 200 ) );

    Now my custom image (1000px by 200px) fits perfectly!

  19. niceWP
    Member
    Posted 1 year ago #

    I added to my funtions.php in my child theme the following

    define( 'HEADER_IMAGE_WIDTH', apply_filters( 'twentyeleven_header_image_width', 1000 ) );
    define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyeleven_header_image_height', 200 ) );

    Now my custom image (1000px by 200px) fits perfectly!

    guys, i have a child theme but i think it has only style.css document. How can i add that code to my functions.php?

  20. Ov3rfly
    Member
    Posted 1 year ago #

    Actually you should use the existing filter to change header image size in a child theme functions.php like this:

    add_filter('twentyeleven_header_image_width', function($size) { return 1000; });
    add_filter('twentyeleven_header_image_height', function($size) { return 200; });

    If you use define( 'HEADER_IMAGE_WIDTH', apply_filters(.. in a child theme, this will cause a php notice (in debug mode):
    PHP Notice: Constant HEADER_IMAGE_WIDTH already defined in /some/path/...

    @niceWP: If your theme does not have a functions.php you can create a simple text-file named functions.php in the same folder as your style.css with this content:

    <?php
    
    // child theme functions.php
    
    add_filter('twentyeleven_header_image_width', function($size) { return 1000; });
    add_filter('twentyeleven_header_image_height', function($size) { return 200; });
  21. niceWP
    Member
    Posted 1 year ago #

    @Ov3rfly
    Hi
    Thank you for answering, i appreciate it.
    I have created the functions.php in my child theme, but it is empty for now (as things i tried did not work so far).

    what i am looking for is how to place my site 260x120 logo on the left side of the header (i can change the size if needed), and AdSense 728x90 leaderboard on the right side of the same header, so the logo and adsense aline.

    May i please ask you how can that be done. Thank you very much in advance.

  22. Ov3rfly
    Member
    Posted 1 year ago #

    General note: If you get an "unexpected T_FUNCTION" error with above posted code, use this instead:

    <?php
    
    // child theme functions.php
    
    function my_header_image_width($size) { return 1000; }
    add_filter('twentyeleven_header_image_width', 'my_header_image_width');
    function my_header_image_height($size) { return 100; }
    add_filter('twentyeleven_header_image_height', 'my_header_image_height');

    @niceWP: Here some example code:

    1. Copy header.php from the twentyeleven theme folder to your child theme folder.

    2. Locate these lines in header.php in your child theme folder:

    <?php endif; // end check for removed header image ?>
    
    <?php
    	// Has the text been hidden?

    3. Insert a div for your leaderboard like this:

    <?php endif; // end check for removed header image ?>
    
    <div id="leaderboard">
    	<!-- your adsense-code goes here -->
    </div>
    
    <?php
    	// Has the text been hidden?

    4. Use this in functions.php in your child theme folder:

    <?php
    
    // child theme functions.php
    
    function my_header_image_width($size) { return 260; }
    add_filter('twentyeleven_header_image_width', 'my_header_image_width');
    function my_header_image_height($size) { return 120; }
    add_filter('twentyeleven_header_image_height', 'my_header_image_height');

    5. Use this in style.css in your child theme folder:

    @import url("../twentyeleven/style.css");
    
    #page {
    	min-width: 988px;	/* 260 + 728 */
    }
    #branding img {
    	width: 260px;
    	height: 120px;
    }
    #branding a {
    	float: left;
    	z-index: -1;	/* for old IE */
    }
    #leaderboard {
    	margin-top: 15px;	/* vertical position: 0 - 30px */
    	width: 728px;
    	height: 90px;
    	float: right;
    	background-color: #ccc;
    }

    Note that the minimum width of the page (988px) has been set to yourlogo width (260px) + leaderboard width (728px) to avoid wrapping if the window is not wide enough.

    With margin-top in #leaderboard you can adjust the vertical position of the adsense div, it can be 0 to 30px, as it is 90px high and your logo is 120px high.

  23. DAZDOREY
    Member
    Posted 1 year ago #

    I am so NEW!

    QUESTION:
    I am using the Twenty Twelve template.
    I want to make style edits

    Do I make the changes in CSS?
    Do I make the changes in php? and if so .... which one?

    Thanks
    M

  24. Ov3rfly
    Member
    Posted 1 year ago #

    @DAZDOREY: First of all, never edit an existing theme but create a "child" theme for it first. Read this page carefully, it explains the concept:
    http://codex.wordpress.org/Child_Themes

  25. niceWP
    Member
    Posted 1 year ago #

    Ov3rtly, thank you, that looks fantastic, i sure will not stop until i make it all work well.

    For now though, i have a question:

    I did everything exactly like you said "whew!" For now Adsense shows, but on the left side of the banner, and the Logo does not show at all.

    I probably simply do not know where (and/or how) do i upload my Logo... and does it matter that it is .GIF?? (i sure can upload it where it should be, and change it to .jpg or (case sensitive?no?) .JPG .PNG or whatever it needs to be.)

    Right now i simply uploaded the Logo to my Media Library as http://MySite.com/wp-content/uploads/my-site-logo.gif file (i wonder if that was the right way?)

    May i ask you what part in those changes i made by following your instructions is linking to my Logo so that it can show up? Or should i rename my Logo and upload it somewhere not in the Media but in the Dashboard>Appearance>Header or something? (sorry i am new, so i am still confused).

    Waiting for you further instructions. Thank you very much in advance.

  26. niceWP
    Member
    Posted 1 year ago #

    Ov3rtly,
    i tried to upload it from Appearance>Header and the logo shows stretched to giant size (OMG)
    When i right click>Image info, it says Dimensions 260px × 120px (scaled to 704px × 325px)
    Help...

Topic Closed

This topic has been closed to new replies.

About this Topic