Theme Customizer: First pass at image controls. Use header_image as the initial case. Add a 'removed' control param for upload/image controls to map 'removed' to a value other than the empty string. see #19910.

git-svn-id: http://svn.automattic.com/wordpress/trunk@20278 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-includes/class-wp-customize-setting.php

@@ -405,15 +405,40 @@ class WP_Customize_Setting {
 				<?php
 				break;
 			case 'upload':
-				$value = $this->value();
-				$style = empty( $value ) ? 'style="display:none;"' : '';
 				?>
 				<label>
 					<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
 					<div>
 						<input type="hidden" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->name(); ?> />
 						<a href="#" class="button-secondary upload"><?php _e( 'Upload' ); ?></a>
-						<a href="#" class="remove" <?php echo $style; ?>><?php _e( 'Remove' ); ?></a>
+						<a href="#" class="remove"><?php _e( 'Remove' ); ?></a>
+					</div>
+				</label>
+				<?php
+				break;
+			case 'image':
+				$value = $this->value();
+
+				$image = $value;
+				if ( isset( $this->control_params['get_url'] ) )
+					$image = call_user_func( $this->control_params['get_url'], $image );
+
+				?>
+				<label>
+					<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
+					<input type="hidden" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->name(); ?> />
+					<div class="customize-image-picker">
+						<div class="thumbnail">
+							<?php if ( empty( $image ) ): ?>
+								<img style="display:none;" />
+							<?php else: ?>
+								<img src="<?php echo esc_url( $image ); ?>" />
+							<?php endif; ?>
+						</div>
+						<div class="actions">
+							<a href="#" class="upload"><?php _e( 'Upload New' ); ?></a>
+							<a href="#" class="remove"><?php _e( 'Remove Image' ); ?></a>
+						</div>
 					</div>
 				</label>
 				<?php

wp-includes/class-wp-customize.php

@@ -536,10 +536,12 @@ final class WP_Customize {
 		$this->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',
 			),
 		) );
 

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;
+}

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 ) {
+		removerVisibility: function( to ) {
-			this.remover.toggle( !! on );
+			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() {