WordPress.org

Forums

Hemingway
[resolved] [closed] header jpeg issue (36 posts)

  1. kentannenbaum
    Member
    Posted 1 year ago #

    I use the Hemingway theme which allows me to change the header image and suggests a max size of 1280x416 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

  2. chris1design
    Member
    Posted 1 year ago #

    About your second question on how to modify the height of your menu text box, if you want to reduce the height you can add to your style sheet the following code:

    .section-inner {
      height: 50px;
    }
    .blog-menu a {
      padding: 20px;
    }
  3. akhilz
    Member
    Posted 1 year ago #

    hi kentannenbaum,

    i had similar issue with the header image and changed the .header code into following in Style.Css and it worked. see if it works for you...

    .header {
    background: no-repeat center;
    background-size: 100%;
    -moz-background-size: 100%;
    -webkit-background-size: 100%;
    }
  4. kentannenbaum
    Member
    Posted 1 year ago #

    Hi akhilz,

    Thanks.

    I changed the code and it modified the image to fit horizontally, but the vertical is still flattened and way off. Check it out here:

    http://www.kentannenbaum.com

  5. Michael Smith
    Member
    Posted 1 year ago #

    The horse image is loaded as a background image, not a primary image. As long as it’s loaded as a background image it will get cropped.
    You need to change the size of the header or upload the image as the primary content. Is there anywhere else to upload a header image in the theme settings?

  6. kentannenbaum
    Member
    Posted 1 year ago #

    Hey Chris….I'm trying to spot where that code fragment's located. I thought it would be in the "Navigation" section but is it in "Structure" or elsewhere?

    Thanks very much.

  7. kentannenbaum
    Member
    Posted 1 year ago #

    msmith993 Hello

    Under Appearance > Header, this is the theme instruction, quoted directly:

    "You can select an image to be shown at the top of your site by uploading from your computer or choosing from your media library. After selecting an image you will be able to crop it. Images of exactly 1280 × 416 pixels will be used as-is."

    It doesn't indicate whether it's a "background" or "primary" image. I don't see where I see that distinction.

    If as you say, I can change the size of the header, being a newbie, I still think I can find the CSS code under "HEADER" on the style sheet. Correct? Thanks!

  8. Michael Smith
    Member
    Posted 1 year ago #

    Your right. Background image has nothing to do with it.

    I downloaded your image from your site. And discovered that the image is not 1280 x 416 at 72ppi. Its 307 x 100 at 300ppi.

    After I resized the image to the correct size, installed Hemingway in my sandbox, and uploaded the new image to the site. (Appearance > header > select image.) it seems to work for me. See the first link below

    http://sandbox.michaelsmithportfolio.com/

    Here is a link to the image I fixed. I hope this helps. Download it and give the new image a shot. Ill leave the image available for a couple of days.

    https://www.dropbox.com/s/jvvh276c4z94e09/cropped-WEB-BANNER.jpg

  9. kentannenbaum
    Member
    Posted 1 year ago #

    Michael. This is peculiar. I may be new to this, but I've been shooting pictures for advertising for many years. The dimensions were changed in the upload process. The important thing is that it is correct (obviously on your end) but it remains an ugly crop here after trying it with your version also. I hate to waste people's time. I guess the CSS code for has been altered to compress the image vertically. They look like short fat horses.
    I'll try to figure it out but that's certainly not my expertise. Either way, thanks very much.

  10. Michael Smith
    Member
    Posted 1 year ago #

    Don't worry about it. Web design tends to be a moving target.

    If you need more help, or are interested in contracting someone else to do the work feel free to reach out.

  11. kentannenbaum
    Member
    Posted 1 year ago #

    It's more that I've taught so many people photography and PS that it's frustrating when it's not second nature. I'm trying wordpress because frankly, I can't afford to have someone build the site. It's intuitive enough but there are times when I just don't know where to look. I'll keep studying and/or some kind soul will point the way.

  12. Michael Smith
    Member
    Posted 1 year ago #

    I totaly understand. Best of luck

  13. chris1design
    Member
    Posted 1 year ago #

    Hi Kentannenbaum,

    To modify your Menu bar, you just go in Appearance/Editor and find the "Style.css" file for your theme and add those two pieces of code at the bottom and that should work. The style sheet will supersede the original code.

    .section-inner {
      height: 50px;
    }
    .blog-menu a {
      padding: 20px;
    }
  14. kentannenbaum
    Member
    Posted 1 year ago #

    chris, much appreciated, I'll proceed with your suggestion.

    To my original and main issue, which hasn't been solved:

    I use the Hemingway theme which allows me to change the header image and suggests a max size of 1280x416 px size. When I upload it at 72dpi, the image is fine horizontally but the vertical is compressed from the original dimension.

    Here's the site, the problem's pretty clear:

    http://kentannenbaum.com

  15. chris1design
    Member
    Posted 1 year ago #

    Hi Kentannenbaum,
    To change the size of the header and menu bar horizontally you can add code to your style.css file. I've adjusted your header and menu bar to the same size as the content of your page with the following code. You can just add it at the bottom of the page of your style.css and it should work. You can just adjust the numbers to your liking:

    .section.no-padding {
      max-width: 86%;
      padding: 0;
      width: 1040px;
      margin: auto;
    }
  16. chris1design
    Member
    Posted 1 year ago #

    Hi Kentannenbaum,

    I suggest you try doing the resizing inside photoshop and make your image size fit inside the 1280 X 416px limits. Or just cropping it to fit the required measurements. See what happens.

  17. kentannenbaum
    Member
    Posted 1 year ago #

    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;
    }

  18. Michael Smith
    Member
    Posted 1 year ago #

    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

  19. kentannenbaum
    Member
    Posted 1 year ago #

    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

  20. Michael Smith
    Member
    Posted 1 year ago #

    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?

  21. kentannenbaum
    Member
    Posted 1 year ago #

    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.

  22. Michael Smith
    Member
    Posted 1 year ago #

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

  23. Michael Smith
    Member
    Posted 1 year ago #

    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;
    }

  24. kentannenbaum
    Member
    Posted 1 year ago #

    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?

  25. kentannenbaum
    Member
    Posted 1 year ago #

    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.

  26. Michael Smith
    Member
    Posted 1 year ago #

    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.

  27. Michael Smith
    Member
    Posted 1 year ago #

    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/

  28. Michael Smith
    Member
    Posted 1 year ago #

    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.

  29. kentannenbaum
    Member
    Posted 1 year ago #

    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

  30. Michael Smith
    Member
    Posted 1 year ago #

    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

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic