Full frame theme – header blurry

• 

  ericpacker · Member · Jul 6, 2014 at 9:30 pm

  • Copy link
  • Add topic to favorites

  My blog uses the full frame theme. When I upload header images in the customize section, there is a mandatory cropping step that appears to scale them down to 1200×500 pixels. This results in pixelated header images when viewed on high resolution screens, because the header bar in the full frame theme blows the header image back up to match the screen width. Is there a way to get around this problem?

  The blog I need help with is: (visible only to logged in users)

• 

  spencerwberry · Member · Jul 7, 2014 at 6:11 pm

  • Copy link

  Eric,
  I just uploaded a 1920 pixel wide image to the Customize>Header area. I was still asked to crop, but I could pull the crop box to full width and therefore get a higher resolution image that would scale to a larger display.

  The 1200 pixel width is a minimum, but you should be able to upload a larger image, and with the full frame theme, it is recommended. Can you try to upload a higher resolution image and let me know if you have trouble?

  Remember to find a balance between width and file size – most monitors won’t be any wider than 2560 pixels.

• 

  ericpacker · Member · Jul 7, 2014 at 9:58 pm

  • Copy link

  Thanks Spencer,

  Just to be sure, I re-uploaded my header image (lets call it headerimage.jpg) at 3600 x 1500 pixels. At 3600 x 1500 pixels it is super sharp, with the exact same aspect ratio as the 1200 x 500 pixel suggestion. Once uploaded, the cropping step remains (because the picture is already at the correct aspect ratio, nothing gets cut off and I hit “crop image” because that is the only way to proceed).

  When I reloaded the page with the new header, it again looked somewhat pixelated. Interestingly, when I checked out my media library, a new image had been created called “cropped-headerimage.jpg” that looks the exact same as the original but has been re-sized to 1200×500 pixels. I’m fairly certain that this scaled down image is what is being displayed on the header, then re-expanded to match screen width resulting in the pixelation I’m seeing on high resolution monitors. I think that the way the theme is coded, all header pictures get re-sized to 1200×500 pixels.

  As far as I can tell, this only happens with header images uploaded through the customize -> header area. (and maybe header images for pages). All the featured images for posts look sharp, and there are no scaled-down duplicates auto-appearing in the media library.

  Is there a way to by-pass this auto scale down for header images and get the original hi res image up on the header?

  Thanks,
  Eric

• 

  spencerwberry · Member · Jul 7, 2014 at 11:47 pm

  • Copy link

  Eric,
  You are right and I understand now.

  I am pretty sure this is not able to be bypassed, but I will put in a request to see.
  Some themes allow you to “bypass cropping” with another button, so maybe they can add that.

  I’ll follow up via email when I have news about it.

• 

  ericpacker · Member · Jul 8, 2014 at 2:32 am

  • Copy link

  Thanks Spencer! Keep me posted!

• 

  karmatosed · Member · Sep 9, 2014 at 8:57 pm

  • Copy link

  Hi,

  You should now be able to add a variable height header so this should have fixed the issue. Can you take a look please and let us know if there is anything else you need resolving?

  Thanks for your patience while we got this sorted for you.

  Regards
  Tammie Lister