How to Extend Metro's Header Image Size Limit?

Community Forums Forums Design Tips and Tricks How to Extend Metro's Header Image Size Limit?

This topic is: not resolved

Tagged: , , ,

This topic contains 11 replies, has 2 voices, and was last updated by  Tom 2 months, 4 weeks ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #114772

    gabrielgmoura
    Member
    Post count: 16

    Hello StudioPress team and community,

    I am in need of your help and expertise. As you may know, Metro comes out of the box with the possibility to add a logo to the header with the following dimensions: 270 × 80 pixels. Anything bigger than that will be cropped.

    My question to you is: How can I extend these dimensions and add an image beyond those parameters? For instance, say I want to insert a header image that is 720 px wide by 170 px high. How would I go about doing that?

    Thank you very much for your time and consideration. I appreciate any pointers in the right direction! Thank you in advance.

    Best,
    Gabriel

    #114893

    Tom
    Participant
    Post count: 936

    Metro Pro uses this code in functions.php to control the image size:

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

    You can change the width and height to suit your requirements. Depending on your site design, you may have to modify some or several CSS rules to accommodate this new image size.


    Choose your next site design from over 350 Genesis themes.
    Updates via GenesisThemes.ca | Twitter | Google+ | Tumblr

    #115319

    gabrielgmoura
    Member
    Post count: 16

    Thank you very much for taking the time to explain it. I truly appreciate it.

    Best,
    Gabriel

    #115328

    gabrielgmoura
    Member
    Post count: 16

    Hi Tom,

    I changed the code as per your instruction.

    This is what looks like on the backend:

    However, on the frontend, it appears as cropped:

    In addition to the fuctions.php

    I also edited the css:

    }

    .header-image .site-title a {
    background-color: none;
    max-width: 1080px;
    min-height: 120px;
    padding: 0;
    }

    Basically, all I am trying to is have a full-width header of 1080px by 120px. Can you please let me know what I am doing wrong? It seems like it should be a simple mission but it has been a huge struggle.

    Thank you in advance.

    Gabriel

    #115335

    Tom
    Participant
    Post count: 936

    Hi Gabriel,

    It looks like you should be off to a good start. Changing that CSS (around line 984) as you have is the next step and should make the full image visible (as it does on my test site). Can you provide a link to you site to troubleshoot this? This method requires multiple images at different sizes for different screen sizes, so there’s more CSS to tweak.


    Choose your next site design from over 350 Genesis themes.
    Updates via GenesisThemes.ca | Twitter | Google+ | Tumblr

    #115436

    gabrielgmoura
    Member
    Post count: 16

    Hi Tom,

    Thank you so much for holding my hard through this,

    Here is my website: http://www.elementsofcinema.com/

    I have reverted to the site name because the header image was cropped as per my previous post. But my intention is to replace the current name for the banner image I am working on. How can I “make the full image visible” as you said?

    Again, thank you so much. I really appreciate your expertise,

    Best,
    Gabriel

    #115480

    Tom
    Participant
    Post count: 936

    Gabriel,

    Instead of reinventing the wheel here, you should follow this excellent tutorial by Sridhar Katakam. It’s a proven method that Sridhar updated for use with Metro Pro. Scroll down the page to get to “Method 2 – Using a real image”. It’s easy to follow and simply works. I’m not sure if Sridhar is 100% back to action after a recent move, so if you have questions you can post them in this thread.


    Choose your next site design from over 350 Genesis themes.
    Updates via GenesisThemes.ca | Twitter | Google+ | Tumblr

    #115583

    Tom
    Participant
    Post count: 936

    For those that are following this thread, or may find it later, I’ve put up a post covering seven ways to deal with header content/images using Metro Pro: Getting Your Head Around Header Images


    Choose your next site design from over 350 Genesis themes.
    Updates via GenesisThemes.ca | Twitter | Google+ | Tumblr

    #115657

    gabrielgmoura
    Member
    Post count: 16

    Hi Tom,

    Thank you so much for your assistance. And a special thanks for the thorough post on your blog. No doubt this will make tons of lives easier.

    Though Sridhar’s method 2 and your method 6 were super clear and easy to follow, it does eliminate the Header function from the Appearances menu. I was really looking forward to uploading multiple header images and utilizing the randomization/rotation feature to switch among the different designs I was going to upload. A small thing that I really wanted to do.

    The other issue (perhaps more important for now) is that there’s a red box/border around the header image:

    Is that what you call “HTML around the logo”? Or could it be residue from my many failed attempts at editing the functions and stylesheet files? I don’t think so as I was very careful but maybe.

    Sadly, I am not doing this full time, which means I can only work on this website for a couple of hours every night. I will come back here tomorrow to maybe try your Method 5 and sacrifice the image responsiveness. I really wanna keep the Header function because it facilitates a few things on my end.

    I will keep looking for the ideal solution (keeping the Header function intact, preserving logo image responsiveness, and still extending the header size). I love a good challenge, and this one seems like it will be worth it. Why does StudioPress only allow such a small logo (270 × 80 pixels) out of the box? I would like to understand why. In any way, beggars can’t be choosers. I’m not a coder, and I understand my place in the universe.

    Many thanks for people like you who extend a helping hand.

    Best,
    Gabriel

    #115729

    Tom
    Participant
    Post count: 936

    uploading multiple header images and utilizing the randomization/rotation feature to switch among the different designs

    Whatever header setup you choose is simply a design choice. I’ve not heard of this randomization feature, but assume it’s from a 3rd party plugin (and my or may not be responsive).

    To remove the brighter red border you’ll need to edit the CSS to remove some padding or margin around the header image if/when you choose to use that image again.

    I think that StudioPress’ use of a ‘small’ logo is a purposeful design choice: it provides a reasonable area for a logo or site title text without overwhelming the top of the page. This follows the concept that content and relevance is more important than a single image and the whole site becomes a branding opportunity. Many sites for organizations big and small are designed with logo space of 270×80 or smaller. It’s just a choice (that can be modified by the site designer/builder.)


    Choose your next site design from over 350 Genesis themes.
    Updates via GenesisThemes.ca | Twitter | Google+ | Tumblr

    #115737

    gabrielgmoura
    Member
    Post count: 16

    Thank you very much, Tom. I am definitely in better shape now than when I started. You have given me many choices, and I expect I will find something that I can work with.

    Would you happen to know what line of code I should remove/edit to eliminate the bright red box around the banner? (I temporarily removed the banner because it wasn’t ready yet, but odds are I will use some version of it, so removing the bright red box will be an obstacle in the future.)

    I get your point about the logo size, and you are absolutely right. Sometimes less is more. I will reconsider my choices and see what works best.

    Thank you so much!

    Gabriel

    • This reply was modified 2 months, 4 weeks ago by  gabrielgmoura.
    • This reply was modified 2 months, 4 weeks ago by  gabrielgmoura.
    #115750

    Tom
    Participant
    Post count: 936

    Would you happen to know what line of code I should remove/edit to eliminate the bright red box around the banner?

    From here I would be guessing. If you put up the header image for a short time I could find it quickly.


    Choose your next site design from over 350 Genesis themes.
    Updates via GenesisThemes.ca | Twitter | Google+ | Tumblr

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.