Logo Image Problems Uploading in GridMarket Theme

Hello,

I've tried uploading my logo using multiple file extensions, resizing and definitely not exceeding the size allowed, but the crop icon always cuts my log even if I make my pixels or the file itself small. So I can't upload it because it either crops it too much or it crops it too much and shows black in the back. I don't understand...

What do I need to do?

Thanks!

  • Chris
    • The Bug Hunter

    If you are uploading a transparent PNG, you'll need to export a 32-bit with alpha for the transparency to survive being resized by the inbuilt WP functions. Using an 8-bit PNG can lead to the transparency being replaced with a black background.

    This has been my experience anyway, using Fireworks to export graphics.

  • RippleEfecto11
    • WPMU DEV Initiate

    Gina,

    I did find this thread, but I wasn't sure if he had the same problem as I did. I basically can't upload my logo and I've tried to resize it, change pixels and I've tried to use png or jpeg etc...

    In the thread you say to make the change under:

    grid.css

    Sorry I'm new to all of this and I'm not sure I know where I need to make these change is it the child style css file or is it under the market Framework, could you please elaborate?

    Could this change affect me later when upgrades are done?

    bigonroad,

    Here's a link to it: http://www.rippleefecto.com/ and I"m just starting this whole process. But it would be nice to fit the whole logo on the top. I don't think I have square images and again I have made it below the indicated pixels and file size but it always crops it, is there a way to enable the crop it feature?

    Thank you both for your fast responses! I"m exciting to finally starting build my own website.

  • RippleEfecto11
    • WPMU DEV Initiate

    Gina,

    Under gridmarket I opened the file labeled css and then opened grid and found this line:

    #branding h1 a{height:80px !important;width:980px !important;display:block!important;text-indent:-9999em;}

    In your other post you said to put it at 600px for height. Hopefully, I'm looking in the right area and I will try your suggestion.

  • RippleEfecto11
    • WPMU DEV Initiate

    Well, I changed the 80 to 600 and it didn't work... Masonjames in the the thread you mention above mention to do the following:

    "To modify the width/height of your custom header, you'll also need to add the following define to your function/themes.php file:

    define( 'HEADER_IMAGE_WIDTH', apply_filters( 'gridmarket_header_image_width', 600 ) );
    define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'gridmarket_header_image_height', 100 ) );"

    This define is added to functions and functions is under gridmarket correct? So do I just copy and paste that at the bottom or where do I put this code?

    I had no idea uploading my logo would be so challenging. Again thank you to everyone who may be able to help me.

  • Mason
    • DEV MAN’s Sidekick

    Hiya,

    Glad you found the proper customizations. The defines go in functions/themes.php

    Do you have this sorted the way you want at this point? I went to your site but it appears to be using the basic text output rather than logo.

    Let us know.

    Thanks!

  • RippleEfecto11
    • WPMU DEV Initiate

    Thank you Mason,

    I found the functions/themes.php area but I think I'm either inserting it incorrectly or in the wrong place in that php file. It still allows me to upload images, but it continues to crop them and now I can't even get rid of all the other logo files I have attempted to upload they keep reappearing as options for me to select. How can I clean this up?

    When uploading this image I now get this error:

    define( 'HEADER_IMAGE_WIDTH', apply_filters( 'gridmarket_header_image_width', 600 ) ); define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'gridmarket_header_image_height', 100 ) );
    Warning: Cannot modify header information - headers already sent by (output started at /home/ripple5/public_html/wp-content/themes/gridmarket/functions/theme.php:123) in /home/ripple5/public_html/wp-includes/pluggable.php on line 934

    In the functions/themes.php file I put the solution code below all of the other coding, which is probably wrong, see below (this kind of how it looks):

    <?php
    break;
    case 'pingback' :
    case 'trackback' :
    ?>
    <li class="post pingback">
    <p><?php _e( 'Pingback:', TEMPLATE_DOMAIN); ?> <?php comment_author_link(); ?><?php edit_comment_link( __('(Edit)', TEMPLATE_DOMAIN), ' ' ); ?></p>
    <?php
    break;
    endswitch;
    }
    ?>

    define( 'HEADER_IMAGE_WIDTH', apply_filters(
    'gridmarket_header_image_width', 600 ) );
    define( 'HEADER_IMAGE_HEIGHT', apply_filters(
    'gridmarket_header_image_height', 100 ) );

    Please help, thanks!

  • gina
    • The Bug Hunter

    hi ripple.. no not change it to 600px for height... dana's was set to 600 for width i believe.. can't recall now.

    i was just showing you how to remove the 10px padding so you can see the entire header image...

    i tried to look at your site to get an idea but i think you added the defines in the wrong place...?

  • RippleEfecto11
    • WPMU DEV Initiate

    Gina,

    I've updated line 175 to 100px height 980 width

    These are the other items I have found, but it looks like the one you are mentioning is the one that already says 0 for padding (based on your old post).

    Or do I need to change the line in the middle too?

    #branding{margin:0px auto;width:980px;overflow:hidden;}
    #branding-inner{padding:10px;overflow:hidden;}
    #branding-inner h1{margin:0px;padding:0px!important;}

    Thanks.

  • gina
    • The Bug Hunter

    did you add the defines below to your header file or something? ...the code that is showing at the top of your site.. where did you add that? you should remove it from where ever you added it :slight_smile:

    define( 'HEADER_IMAGE_WIDTH', apply_filters( 'gridmarket_header_image_width', 600 ) ); define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'gridmarket_header_image_height', 100 ) );

  • RippleEfecto11
    • WPMU DEV Initiate

    Thanks Gina, I've changed the padding to 0. Its still making me crop my logo image even though I have used small pixels for the format of my logo. I think the define code would still help I just don't know where to place that in the file...

    Thanks again.

    Maria

  • RippleEfecto11
    • WPMU DEV Initiate

    Hello Gina,

    I swear I tried the 980x100 yesterday! It now shows completely and you are right it didn't ask me to crop it! Is there still a way to make this space bigger for larger images?

    I'm happy that I can at least get this started!

    Thank you, thank you!

  • RippleEfecto11
    • WPMU DEV Initiate

    Gina,

    I have added it and have tried adding a different size logo and it still brings up a crop feature. I guess with this define I can change the width and height dimensions so instead of using 600 and 100, I can put whatever I want it to be, right?

  • RippleEfecto11
    • WPMU DEV Initiate

    Yes, and thank you.

    Gina,

    I inserted the code mentioned above, The code allows you to change the dimensions of an image. It allowed me to add larger images, and it doesn't make you crop them, but it doesn't matter because the image is still cut when you view your website. I played with different dimensions' like 1000x200 or 1250 by 100 and many others just to see what would happen.

    So although it allows you to upload these sizes without cropping they don't show up on your website and when I did 1000 by 100 it doesn't show the image in the center. The best view is definitely 980 x 100, where it is centered on the page.

    I guess changing that header requires more coding beyond allowing size dimensions.

    Thanks.

    Maria

  • gina
    • The Bug Hunter

    ok try this...

    in grid.css on line #158 look for: #branding then right after width: 980px; add: height: 300px;

    you can change the 300px to whatever it needs to be to make room for your logo dimensions.

    then look for #branding h1 a on line #175 change the height: 100px !important; to match the height of your logo.

    let me know if that works.

  • sakumatto
    • Design Lord, Child of Thor

    @chris on png transparency --> thanks for the tip you gave in the beginning of this, I couldn't figure why my branding plugin didn't save its png transparency until I read you pointer.

    Here is what I learned:

    PNG8 gives black b/g

    PNG24 works correct

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.