diff --git a/wp-includes/class-wp-customize-setting.php b/wp-includes/class-wp-customize-setting.php
index 0046d0726a..e38d7fc6db 100644
--- a/wp-includes/class-wp-customize-setting.php
+++ b/wp-includes/class-wp-customize-setting.php
@@ -437,8 +437,23 @@ class WP_Customize_Setting {
+
+
+ control_params['tabs'] as $tab ): ?>
+ -
+
+
+
+
+ control_params['tabs'] as $tab ): ?>
+
+
+
+
+
'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 ) : ?>
+
+
+
+ process_default_headers();
+
+ foreach ( $custom_image_header->default_headers as $header ) : ?>
+
+
+
+ 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;
}
\ 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 d950743ea4..4fc0c6f37f 100644
--- a/wp-includes/js/customize-controls.dev.js
+++ b/wp-includes/js/customize-controls.dev.js
@@ -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();