Header images in Twenty Sixteen

Now that WordPress 4.4 is out, the accompanying theme Twenty Sixteen is also available. I ran into two gotchas that I thought I’d share in case my experience might help others: Header image height and media upload caching.

Header image height

The recommended size for the header image in Twenty Sixteen is 1200 × 280. One non-obvious (at least, to me) aspect of adding a header image is that if your uploaded image is 1200 pixels wide but only — say — 250 pixels high, WordPress Twenty Sixteen’s cropping suggestion will require that you reduce the width of your image. To use the shorter image as-is (full width), click the “Skip Cropping” button.

Thanks to Takashi Irie for help with this one.

Media upload caching

After uploading my too-short header image and discovering my error, I edited the image (Pixelmator, if you must know — I am so happy getting away from PhotoShop), and tried repeatedly to re-upload it. Each time, the image looked the same as my initial upload, even though I deleted the image out of the Media Library between attempts.

This went on until I finally changed the name of the header image. Presto-chango, the image appeared just the way I wanted.

Apparently, WordPress or Jetpack or WP Engine was caching my image upload, so re-trying with a different image that had the same name as the original image resulted in the system calling up the original image instead of using the new image.

It is possible that if you do not use Jetpack or host elsewhere, you might not run into this issue … I did not investigate to see which caused this behavior.

Advertisements

3 thoughts on “Header images in Twenty Sixteen

  1. Hi Greg,

    Thanks for taking time to write about Twenty Sixteen. Maybe, my response at the announcement made you confused so, I figured I should clarify

    if your uploaded image is 1200 pixels wide but only — say — 250 pixels high, WordPress Twenty Sixteen will not allow you to use that image as-is: You are going to have to crop the width. That’s correct, the width.

    You can always skip the cropping by clicking the button next to “Crop Image”. If you skip it, you can have shorter header image.

Comments are closed.