diff --git a/wp-includes/class-wp-customize-setting.php b/wp-includes/class-wp-customize-setting.php
index e734f4967..0046d0726 100644
--- a/wp-includes/class-wp-customize-setting.php
+++ b/wp-includes/class-wp-customize-setting.php
@@ -405,15 +405,40 @@ class WP_Customize_Setting {
value();
- $style = empty( $value ) ? 'style="display:none;"' : '';
?>
+ value();
+
+ $image = $value;
+ if ( isset( $this->control_params['get_url'] ) )
+ $image = call_user_func( $this->control_params['get_url'], $image );
+
+ ?>
+
add_setting( 'header_image', array(
'label' => 'Header Image',
'section' => 'header',
- 'control' => 'upload',
+ 'control' => 'image',
'default' => get_theme_support( 'custom-header', 'default-image' ),
'control_params' => array(
'context' => 'custom-header',
+ 'removed' => 'remove-header',
+ 'get_url' => 'get_header_image',
),
) );
diff --git a/wp-includes/css/customize-controls.dev.css b/wp-includes/css/customize-controls.dev.css
index 1f4c17e9c..a6dc196a4 100644
--- a/wp-includes/css/customize-controls.dev.css
+++ b/wp-includes/css/customize-controls.dev.css
@@ -302,3 +302,29 @@ body {
border: 0;
background: transparent;
}
+
+/*
+ * Image Picker
+ */
+.customize-section .customize-image-picker {
+ float: left;
+}
+.customize-section .customize-image-picker .thumbnail {
+ float: left;
+ clear: left;
+ width: 100px;
+ margin-right: 20px;
+ min-height: 1em;
+}
+.customize-section .customize-image-picker .thumbnail img {
+ max-width: 98px;
+ max-height: 98px;
+ border: 1px solid #ccc;
+}
+.customize-section .customize-image-picker .actions {
+ width: 140px;
+ float: left;
+}
+.customize-section .customize-image-picker .actions a {
+ display: block;
+}
\ No newline at end of file
diff --git a/wp-includes/js/customize-controls.dev.js b/wp-includes/js/customize-controls.dev.js
index 59ec58fac..d950743ea 100644
--- a/wp-includes/js/customize-controls.dev.js
+++ b/wp-includes/js/customize-controls.dev.js
@@ -76,6 +76,7 @@
var control = this;
api.Control.prototype.initialize.call( this, id, value, options );
+ this.params.removed = this.params.removed || '';
this.uploader = new wp.Uploader({
browser: this.container.find('.upload'),
@@ -86,17 +87,33 @@
this.remover = this.container.find('.remove');
this.remover.click( function( event ) {
- control.set('');
+ control.set( control.params.removed );
event.preventDefault();
});
this.bind( this.removerVisibility );
+ this.removerVisibility( this.get() );
if ( this.params.context )
control.uploader.param( 'post_data[context]', this.params.context );
},
- removerVisibility: function( on ) {
- this.remover.toggle( !! on );
+ removerVisibility: function( to ) {
+ this.remover.toggle( to != this.params.removed );
+ }
+ });
+
+ api.ImageControl = api.UploadControl.extend({
+ initialize: function( id, value, options ) {
+ api.UploadControl.prototype.initialize.call( this, id, value, options );
+
+ this.thumbnail = this.container.find('.thumbnail img');
+ this.bind( this.thumbnailSrc );
+ },
+ thumbnailSrc: function( to ) {
+ if ( /^(http:\/\/|https:\/\/|\/\/)/.test( to ) )
+ this.thumbnail.prop( 'src', to ).show();
+ else
+ this.thumbnail.hide();
}
});
@@ -225,7 +242,8 @@
api.controls = {
color: api.ColorControl,
- upload: api.UploadControl
+ upload: api.UploadControl,
+ image: api.ImageControl
};
$( function() {