WordPress.org

Support

Support » Themes and Templates » [Resolved] header jpeg issue

[Resolved] header jpeg issue

  • I use the Hemingway theme which allows me to change the header image and suggests a max size of 1280×416 px size. When I upload it at 72dpi, the image gets cropped from the original size and ratio. My site is a work-in-progress and this is stumping me.

    Also, separate issue (being new) is it possible to alter the height of the menu text box below the header?

    Thanks, much appreciated.

    My site: http://www.kentannenbaum.com

Viewing 15 replies - 16 through 30 (of 35 total)
  • Here’s the thing. Photoshop is my bread and butter. The uploaded image is precisely
    what’s asked for in the upload section of Hemingway. 1280px X 416px. That’s the mystery. Why is it compressing in the vertical?

    Here’s the code from the CSS “Header” section: I’m no expert here, does it appear accurate or is this the problem? Thanks again!

    .blog-logo img {
    max-height: 416px;
    width: 1280px;
    max-width: 100%;
    height: 416px;
    }

    I decided to try to fix this by duplicating the problem you have then working out a solution.
    I started to play with this again and it looks like the logo div has been removed from the theme somehow. The Logo and the Theme work together to set the height of the header. Did you modify the header.php file? Or Apply custom CSS to remove the .blog-logo img?
    As soon as i removed the logo from the version I was working on i was able to duplicate the problem you have. Now, I don’t know if your removed the logo via CSS or modified header.php, but If you return the header to default and put the following code at the bottom of style.css your header should look like the one at http://sandbox.michaelsmithportfolio.com/

    .blog-logo img {
    height: auto;
    max-height: 250px;
    max-width: 100%;
    visibility: hidden;
    width: auto;
    }

    One work of caution about updated the style.php file. As soon as you update the Hemingway theme that file will most likely be overwritten. Save yourself problems you should look at developing a child theme (much easier than it sounds) to protect your customizations.

    https://codex.wordpress.org/Child_Themes

    Michael, each time I modified the code and it didn’t work, I’d go back to the same spot, removed the modification, then refresh the page back to the original. So to the best of my knowledge I haven’t altered the CSS from the original. That said, photoshop is second nature to me, not this.

    I do have a newbie question: the code you just used, does that get placed at the bottom of the code INSIDE of the “HEADER” section of style.CSS?

    Also, as you may be aware the crop of the image you posted at sandbox is way off horizontally. Perhaps it wasn’t your point to be accurate about the size.

    Anyway, I certainly don’t think I removed the .blog-logo img and you seem to be suggesting I re-upolad the theme and start from scratch. If you have the time, please let me know. Thanks, Ken

    I would just put it at the bottom of the style.css sheet. It should over write the duplicate copy above and that why you know where to find it.
    The photo I’m using is not cropped the same way as the photo you have. (probably an effect of the way a ripped it out of your site)

    And I just saw your site header change on refresh. Is this fixed?

    Michael.

    I just placed your code:

    .blog-logo img {
height: auto;
max-height: 250px;
max-width: 100%;
visibility: hidden;
width: auto;
}

    …at the very bottom of the style.CSS and hit “update file”, then viewed the splash page and there’s no change whatsoever.

    Sorry for this bit of frustration but I guess it comes with the territory.

    Hmm… Can you email me the actual header image your using?
    [email address moderated – these forums do not provide support via email]

    Ok, I’m hoping this will solve your issues.

    First visit http://sandbox.michaelsmithportfolio.com/ and see if what I have done is what you are looking to do.

    Second – If so then delete the code I gave you before and insert the following at the bottom of style.css

    If your site does not look the same after you follow these steps then I suggest deleting your Hemingway theme and reinstalling it. ( you may loose any customization you have in place now so think about the reinstall carefully)

    Let me know.

    .blog-info {
    background: none repeat scroll 0 0 #1D1D1D;
    display: inline-block;
    padding: 30px;
    visibility: hidden;
    }

    .section {
    padding: 12% 0;
    position: relative;
    }

    Michael, what you’ve done at sandbox is precisely correct. BUT

    FIRST I deleted the theme and reinstalled it

    Then I tried two things, not being absolutely sure where to place your code.

    First I placed it and the VERY bottom of the style.CSS and it didn’t work.

    Then I took it from there and placed it at the bottom of the section called “Header”, where it is now.

    This is the result: http://kentannenbaum.com

    it’s horizontal placement is correct but the vertical is way too cropped.
    Could it be the size of the menu bar?

    Michael, I should also mention this. When I re-installed the Hemingway theme, it had my header image in place by virtue of the way wordpress works, namely that upon deleting the them as per your instructions, wordpress used one of the other themes I had previously checked out. So there was not the situation where I needed to upload the header image into a totally fresh wordpress site which had no theme in it whatsoever.

    The menu bar doesn’t have an impact on the sandbox site so it shouldn’t have an impact on your site either.

    Take the code out of the header and put it in the style.css

    Make sure you put it after the final closing bracket. “}” if you put it inside the closing bracket it wont work.

    Oh and be sure you are refreshing your browser. if you are making changes to CSS and not seeing the results that is often a problem.

    look here for more info. http://www.refreshyourcache.com/en/home/

    Ken when i download your CSS i see the following at the bottom of the file

    }
    .blog-info {
    }
    .section {
    }

    When i do the same from my site I see

    }
    .blog-info {
    background: none repeat scroll 0 0 #1D1D1D;
    display: inline-block;
    padding: 30px;
    visibility: hidden;
    }
    .section {
    padding: 12% 0;
    position: relative;
    }

    Try disabling all of your plugins. I’m bet there is a conflict there.

    Not sure why this is but the code in your last note that you see when you download the CSS from my site just isn’t there when I view it. What’s at the bottom is the code you gave me.

    Now, I disabled ALL plugins and get the same result…except of course, now I’ve also lost the code for the one scrolling gallery I had.

    http://kentannenbaum.com

    Ok.

    If you look at .png in the attached link you will see you are missing the div that the CSS is modifying. I’m going to guess you don’t have anything in the “site title” or “tagline” fields in the theme customization. Put something there, it doesn’t matter what. I suggest the name of your site.

    I tested this on my side and do to, what is in my opinion, a poor decision from the programmer when you leave those fields blank the theme does not generate the blog-info div so the CSS on your side doesn’t have any object to modify.

    Plug something in, give it a shot and let me know. If i’m wrong than I owe the developer an apology. If im right your fixed.

    Make sure the CSS code I gave you in in the correct place please.

    https://www.dropbox.com/s/uytm0k98vyefdah/Sandbox%20-%20KenTannenbaum%20body%20comparison.png

    Now that that’s done it reminds me of the reason I removed text from that field in the first place, which is that the Hemingway theme places a seriously ugly black box in the center of the header. The only way I found to get rid off it was to remove the copy. Maybe there’s a another way?

    Check it out.

    http://kentannenbaum.com

Viewing 15 replies - 16 through 30 (of 35 total)
  • The topic ‘[Resolved] header jpeg issue’ is closed to new replies.