Custom Header Preview Display Issue

[JarretC]

If you have a theme that utilizes the custom header function but a height value isn't defined the site title and site description clash Select Image table row.

The patch which adds height: auto !important; to #headimg should rectify this issue.

Screenshot shows the issue especially with a large amount of text used in the site description.

[SergeyBiryukov]

Hmm, I can only reproduce this if a theme provides a custom admin preview callback, and sets a fixed height for #headimg in that function.

In Twenty Eleven, I tried removing height value from $custom_header_support array, setting it to 0 and removing flex-height as well. Looks fine in all cases: 21130.twenty-eleven.png​.

Sounds like a particular theme issue.

[JarretC]

Twentyeleven issues callbacks to correct these issues. If you remove the height option, wp-head-callback, admin-head-callback and admin-preview-callback from Twentyeleven functions.php the issue shows up.

So most likely not an issue in most cases, but it does appear.

[SergeyBiryukov]

Ah, I see now. With the height option not set and the callbacks removed, we get this:

<div id="headimg" style="background-image:url();max-width:1000px;height:0px;">

In 3.3, with HEADER_IMAGE_HEIGHT not set (I guess it was required though) and the callbacks removed:

<div id="headimg" style="max-width:1000px;height:HEADER_IMAGE_HEIGHTpx;background-image:url();">

[SergeyBiryukov]

We could probably only add max-width and height attributes if they are not empty (21130.patch​).

[SergeyBiryukov]

The patch has an additional bonus of properly escaping the header image URL. Currently the esc_url() call is pointless, header_image() prints the value directly.

[JarretC]

Height issue still applies when a value is define, see screenshot. Setting height to auto fixes though not sure if best approach.

[SergeyBiryukov]

If a theme sets some value, I guess we should respect that for the most accurate results.

21130.3.patch​ adds overflow: hidden to prevent the overlapping.

[JarretC]

True, was thinking that originally although wasn't too keen on cutting off the text.

[georgestephanis]

Better to save the result as $custom_header than calling get_custom_header() four times?

[georgestephanis]

Minor tweak, just pulled out a function call and stashed the result in a variable.

[nacin]

21130.4.patch​ looks good.

[SergeyBiryukov]

Replying to SergeyBiryukov:

The patch has an additional bonus of properly escaping the header image URL. Currently the esc_url() call is pointless, header_image() prints the value directly.

Related: #21433

[ryan]

In [21508]:

Fix display issues in the custom header screen when height is not specified. Use get_header_image() instead of header_image() so that esc_url() can do its job. Props JarretC, SergeyBiryukov, georgestephanis. fixes #21130 #21433