How can I fix my header issues (browser resizing) in "Hemingway Rewritten"?

  • Author
    Posts
  • #1746132

    I sized my custom header images according to the theme’s recommended pixel height and width. When I increase the size of my browser window, however, the image gets cut off and the quality becomes less clear.

    The blog I am writing about is http://erikakaophotography.com/

    Many thanks in advance.

    The blog I need help with is erikakaophotography.com.

    #1746221

    I don’t know what I’m supposed to write here.

    #1746337

    Hi Erika!

    So, it looks like your uploaded image is 1280×416. When the screen is sized so that the header image fits that dimension, the image appears clear and in focus. However, I believe the issue you’re referring to is when the image is blown up to fill a larger screen. At that point, the image becomes fuzzy. Is that correct?

    If so, is the image you’re uploading being scaled down to fit the dimensions of the header area or scaled up? Can you try upload a larger header image and have it cropped upon uploading rather than uploading an image with the suggested dimensions?

    #1746353

    Hi, Jeremy.

    That’s exactly correct, and I’m not sure why that’s occurring because I created each of my header images at the exact pixel dimensions specified for the theme.

    It doesn’t bother me so terribly that I want to resize all of my headers. I just wondered if I was doing something wrong.

    I’ll explore it one of these days. Thanks so much!

    #1746359

    Hi Erika,

    Nope! You aren’t doing anything wrong as far as I can tell. I’m using a 27-inch monitor and even the theme demo header image looks a bit stretched out:

    http://hemingwayrewrittendemo.wordpress.com/

    Uploading a larger-than-necessary image and having it cropped by the theme doesn’t appear like it would work. The theme automatically crops the image down to the smaller size. I’ll investigate more and let you know what I find out!

    #1746361

    Hey Erika,

    On second thought, I think uploading a larger-than-necessary image will work. Can you try uploading an image that’s 2560 x 832 (twice the recommended size)?

    #1746364

    Hi, Jeremy.

    Thanks for exploring this.

    I recreated the header for my About Me page at 2560 x 832. Can you see what you think of it quality-wise compared to the other pages? The logo is smaller but I’m not sure if that that will make a difference.

    http://erikakaophotography.com/aboutme/

    Many thanks again.

    #1746365

    Since responding, I made the logo larger so that it’s more comparable.

    I think I’m happier now but I do appreciate your input.

    Again, thanks for looking.

    #1746366

    Comparing it to the other headers, I don’t know if the difference is really that significant enough to warrant my redoing all of my other headers. Clipping seems to happen with both when I make them smaller and blurring seems to happen with both when I make them larger.

    Is it worth the work?

    #1746367

    Hey Erika,

    It does seem to blur a little bit even on this header image here:

    http://erikakaophotography.com/aboutme/

    However, I do think that the header image on the About Me page looks clearer than the one here:

    http://erikakaophotography.com/

    Although the theme crops the image to fit the suggested dimensions, it looks like it still references the original source image as shown here:

    Src image

    That image can be seen here and is 1400 x 455:

    http://erikakaophoto.files.wordpress.com/2013/08/ekp-header-template-about-me-new1.jpg?w=1280&h=416&crop=1

    The larger src image size is likely why the image looks better on the page. The front page photo on the other hand is 1280 x 426 max:

    http://erikakaophoto.files.wordpress.com/2013/08/ekp-header-template-welcome1.jpg?w=1280&h=416&crop=1

    It looks like the only solution would be to import the files at a much larger image and let the theme automatically crop them down. That way, it has the larger image file to reference in case the screen size expands. I’m not sure if you want to go to the trouble of fixing all of your header images you’ve already imported (it looks like you have quite a few), but it might be good to upload a larger image moving forward.

    #1746368

    Thanks, Jeremy.

    I vaguely followed you throughout that. But the take-home message seems to be to resize my header files for the best visuals, possibly leaving a little wiggle room at the top and bottom to account for clipping.

    It is a little annoying, though, but I guess it is what it is.

    Thanks again very much. I appreciate all of your time. :)

    #1746379

    Not a problem! I apologize for the extra workaround. Please let me know if you run into any additional trouble while setting up the theme!

    #1746381

    Thanks, Jeremy.

    I managed to get all of my headers resized this morning. I appreciate your help and I look forward to enjoying the theme. :)

    While I have your ear, can you help me with something else? I will ask it here but if you want me to begin a new query, I’d be happy to.

    I want to set up a landing page that is formatted differently from my main pages. See here: http://erikakaophotography.com/747-2/ However, I want the images aligned four to row and I can’t seem to make that work.

    Many thanks!

    http://erikakaophotography.com/747-2/

    #1746384

    Hi Erika!

    Here’s what I’m currently seeing on my side:

    Screen Shot 2014 04 17 at 4 45 41 PM

    The images look to be aligned four across. Is that what you’re looking for?

    #1746386

    Hi, Jeremy.

    That is exactly what I was going for, and I did it all by myself! I’m so happy.

    But, two questions. How do I center the words under the images? And it looks very wonky on my iPhone. On that device, all of the pictures are a different size it seems. Any thoughts?

    #1746388

    Hey Erika,

    To center the text, navigate to the edit screen. You should be able to highlight just the text under the image and use the align-center option in the toolbar. Can you give that a try for me?

    Regarding the image sizing, I believe this is a result of the images starting out as different sizes. For example, the image above “People” is 178 x 178. Some of the others are 200 x 200. To correct this, it would be best to crop the images to 200×200 before uploading so they are uploaded at the exact same size.

    I realize this is another bit of a pain, and I apologize! The good news is that you only have to resize and reupload the images above Welcome, People, About Me, and Blog. The others are 200 x 200 already.

    #1746389

    Hi, Jeremy.

    Thanks again. I’m really grateful for all of your counsel here. I can resize and reinstall those images easily enough.

    Have a great weekend, and hopefully you won’t hear from me again. :)

    #1746391

    Sigh.

    OK, so I cropped each of the original images to a square and sized each down to 1000 px x 1000 px and each ended up being 1.64 in x 1.64 in and 240 px/cm. From Photoshop, each image was identically sized.

    I replaced them on my website and from a laptop, the page looks fantastic and each image is identically sized. But unfortunately, it still is wonky on my iPhone. Here, the first images in each row (Welcome, About Me) is one size, the second images (People, Blog) are another, the third (Nonprofits, Investment) are larger than the first two, and the fourth (Small Businesses, Say Hi) are another size entirely.

    I’m not sure what I’m doing wrong. This time, I even removed the original images and gave the 1000 px x 1000 px images original names so that there would be no confusion within WordPress.

    Sigh. Any advice would be greatly appreciated.

    One thing just occurred to me while viewing it on the iPhone. Would the wonky image sizing have anything to do with the amount of copy appearing beneath each image? The image sizes strangely seem to coincide with how much copy is beneath them.

    #1746392

    I may try to incorporate text into each image through Photoshop and remove the tags beneath. Let’s see how that works.

    #1746393

    Bingo. :)

The topic ‘How can I fix my header issues (browser resizing) in "Hemingway Rewritten"?’ is closed to new replies.