WordPress-C
/
WordPress
mirror of https://github.com/WordPress/WordPress.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
This commit is contained in:
koopersmith 2012-03-24 04:35:13 +00:00
parent 2e2f3eb954
commit 6213bdfa52
4 changed files with 79 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
wp-includes/class-wp-customize-setting.php
View File

@ -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

4
wp-includes/class-wp-customize.php
View File

@ -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',
),
) );

26
wp-includes/css/customize-controls.dev.css
View File

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

26
wp-includes/js/customize-controls.dev.js
View File

@ -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() {