Make WordPress Core

Opened 6 years ago

Closed 6 years ago

Last modified 4 years ago

#39916 closed feature request (maybelater)

Add position, preset and size controls to custom-header

Reported by: dingo_d's profile dingo_d Owned by:
Milestone: Priority: normal
Severity: normal Version: 4.7.2
Component: Customize Keywords:
Focuses: Cc:


The custom-header support would benefit a lot from implementing the WP_Customize_Background_Position_Control like the custom-background has.

The arguments array for custom-header would also have to be expanded in order to accommodate the default positioning, preset and size as well.

Currently the only thing you can do with an image is to crop it, or set the size for it in the array, which is a bit limiting imo.

The controls are present in the core, so it shouldn't be hard to implement.

Change History (4)

#1 @westonruter
6 years ago

Adding positioning for the header would require heavy theme support in the same way as adding positioning for the site logo as proposed in #38329. I don't know if it is something that should be supported in core, or if it should be relegated to themes, or incorporated into a next-generation theming framework in core.

#2 @dingo_bastard
6 years ago

The positioning of <img> using this would be a bit complicated I agree. But I was working on a theme, and added the custom-header image as a background image in a breadcrumbs

<div id="element" style="background-image: url(image-url.jpg); background-size:cover; background-position: center center;">div content goes here</div>

and now I see that I can add it as a dynamic inline style

    background-image: url(image-url.jpg);
    background-size: cover;
    background-position: center center;

But the idea is to control the custom-header in the same way that we control the custom-background. We could add a 'default-element' key to the arguments array to which this css would be appended to. If this is empty then the <img> element that outputs the header image can be used as described here.

$args = array(
    'default-image'      => get_template_directory_uri() . 'img/default-image.jpg',
    'default-text-color' => '000',
    'width'              => 1000,
    'height'             => 250,
    'flex-width'         => true,
    'flex-height'        => true,
    'default-element'    => '#element',
add_theme_support( 'custom-header', $args );

Or, maybe the position controls would be only visible when the 'default-element' key is used, so that the positioning applies only through css on the background-image of the element.

Last edited 6 years ago by dingo_bastard (previous) (diff)

#3 @celloexpressions
6 years ago

  • Milestone Awaiting Review deleted
  • Resolution set to maybelater
  • Status changed from new to closed

Similar to with logos in #38329, the first step would be themes implementing this functionality by reusing the core controls available for background images (which should not be difficult to do). Once there's more of a demonstrated desire for it, it could potentially become part of the core add-theme-support for headers similar to backgrounds.

MY sense is that there are too many options in both the header and background image theme-supports currently, and that most are only still there because of backwards compatibility. The core functionality is already moving away from headers implemented with background-image since that doesn't work for video headers. It's not likely that we'd add more options for these theme-supports unless enough themes implement their own versions of this that it makes sense for core to provide a standardized implementation. If that happens in the future, we can revisit this then.

#4 @dd32
4 years ago

  • Reporter changed from dingo_bastard to dingo_d
Note: See TracTickets for help on using tickets.