Theme Customizer: Add 'choose image' functionality to image controls. Rough first pass, using header images as an example. see #19910.
git-svn-id: https://develop.svn.wordpress.org/trunk@20290 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
parent
76e4fbee38
commit
d8513a5ebb
|
@ -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
|
||||
|
|
|
@ -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;
|
||||
}
|
|
@ -104,7 +104,8 @@ body {
|
|||
padding-bottom: 60px;
|
||||
}
|
||||
|
||||
#customize-theme-controls ul {
|
||||
#customize-theme-controls > ul,
|
||||
#customize-theme-controls .customize-section-content {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
@ -327,4 +328,70 @@ 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;
|
||||
}
|
|
@ -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();
|
||||
|
|
Loading…
Reference in New Issue