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

Theme Customizer: Add 'choose image' functionality to image controls. Rough first pass, using header images as an example. see #19910. 

git-svn-id: http://svn.automattic.com/wordpress/trunk@20290 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
koopersmith 2012-03-25 21:18:32 +00:00
parent 959160e789
commit 4e2cbd6a4d
4 changed files with 141 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -437,8 +437,23 @@ class WP_Customize_Setting {
</div>
<div class="actions">
<a href="#" class="upload"><?php _e( 'Upload New' ); ?></a>
<a href="#" class="change"><?php _e( 'Change Image' ); ?></a>
<a href="#" class="remove"><?php _e( 'Remove Image' ); ?></a>
</div>
<div class="library">
<ul>
<?php foreach ( $this->control_params['tabs'] as $tab ): ?>
<li data-customize-tab='<?php echo esc_attr( $tab[0] ); ?>'>
<?php echo esc_html( $tab[1] ); ?>
</li>
<?php endforeach; ?>
</ul>
<?php foreach ( $this->control_params['tabs'] as $tab ): ?>
<div class="library-content" data-customize-tab='<?php echo esc_attr( $tab[0] ); ?>'>
<?php call_user_func( $tab[2] ); ?>
</div>
<?php endforeach; ?>
</div>
</div>
</label>
<?php

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

@ -542,6 +542,10 @@ final class WP_Customize {
'context' => 'custom-header',
'removed' => 'remove-header',
'get_url' => 'get_header_image',
'tabs' => array(
array( 'uploaded', __('Uploaded'), 'wp_customize_print_uploaded_headers' ),
array( 'included', __('Included'), 'wp_customize_print_included_headers' ),
),
),
) );
@ -719,3 +723,24 @@ function sanitize_hexcolor( $color ) {
return $color;
}
function wp_customize_print_uploaded_headers() {
$headers = get_uploaded_header_images();
foreach ( $headers as $header ) : ?>
<a href="<?php echo esc_url( $header['url'] ); ?>">
<img src="<?php echo esc_url( $header['thumbnail_url'] ); ?>" />
</a>
<?php endforeach;
}
function wp_customize_print_included_headers() {
global $custom_image_header;
$custom_image_header->process_default_headers();
foreach ( $custom_image_header->default_headers as $header ) : ?>
<a href="<?php echo esc_url( $header['url'] ); ?>">
<img src="<?php echo esc_url( $header['thumbnail_url'] ); ?>" />
</a>
<?php endforeach;
}

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

@ -104,7 +104,8 @@ body {
padding-bottom: 60px;
}
#customize-theme-controls ul {
#customize-theme-controls > ul,
#customize-theme-controls .customize-section-content {
margin: 0;
}
@ -328,3 +329,69 @@ body {
.customize-section .customize-image-picker .actions a {
display: block;
}
.customize-section .customize-image-picker .library {
display: none;
/* float: left;*/
}
/*.customize-section .customize-image-picker .library label {
display: block;
position: relative;
float: left;
padding: 0 0 5px 20px;
}
.customize-section .customize-image-picker .library input {
display: block;
position: absolute;
top: 50%;
left: 0;
margin-top: -7px;
}*/
/*.customize-section .customize-image-picker .library .wp-tab-panel {
padding: 10px 10px 5px 8px;
}*/
.customize-section .customize-image-picker .library ul {
border-bottom: 1px solid #dfdfdf;
float: left;
width: 100%;
margin: 5px 0;
}
.customize-section .customize-image-picker .library li {
color: #999;
float: left;
padding: 4px 6px;
margin: 0;
border-style: solid;
border-color: transparent;
border-width: 1px 1px 0 1px;
}
.customize-section .customize-image-picker .library li.library-selected {
color: #777;
border-color: #dfdfdf;
background: #f5f5f5;
margin-bottom: -1px;
padding-bottom: 5px;
}
.customize-section .customize-image-picker .library div {
width: 100%;
float: left;
}
.customize-section .customize-image-picker .library a {
display: block;
max-width: 220px;
max-height: 80px;
margin: 5px auto;
padding: 4px;
background: #fff;
border: 1px solid #dfdfdf;
}
.customize-section .customize-image-picker .library a:hover {
border-color: #21759b;
}
.customize-section .customize-image-picker .library img {
display: block;
max-width: 220px;
max-height: 80px;
}
.customize-section .customize-image-picker .library-content {
display: none;
}

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

@ -104,13 +104,45 @@
api.ImageControl = api.UploadControl.extend({
initialize: function( id, value, options ) {
var control = this;
api.UploadControl.prototype.initialize.call( this, id, value, options );
this.thumbnail = this.container.find('.thumbnail img');
this.bind( this.thumbnailSrc );
this.library = this.container.find('.library');
this.changer = this.container.find('.change');
this.changer.click( function( event ) {
control.library.toggle();
event.preventDefault();
});
this.library.on( 'click', 'li', function( event ) {
var tab = $(this),
id = tab.data('customizeTab');
event.preventDefault();
if ( tab.hasClass('library-selected') )
return;
tab.siblings('.library-selected').removeClass('library-selected');
tab.addClass('library-selected');
control.library.find('div').hide().filter( function() {
return $(this).data('customizeTab') === id;
}).show();
});
this.library.on( 'click', 'a', function( event ) {
control.set( $(this).attr('href') );
event.preventDefault();
});
},
thumbnailSrc: function( to ) {
if ( /^(http:\/\/|https:\/\/|\/\/)/.test( to ) )
if ( /^(https?:)?\/\//.test( to ) )
this.thumbnail.prop( 'src', to ).show();
else
this.thumbnail.hide();