Make WordPress Core

Changeset 20290


Ignore:
Timestamp:
03/25/2012 09:18:32 PM (13 years ago)
Author:
koopersmith
Message:

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

Location:
trunk/wp-includes
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/wp-includes/class-wp-customize-setting.php

    r20278 r20290  
    438438                        <div class="actions">
    439439                            <a href="#" class="upload"><?php _e( 'Upload New' ); ?></a>
     440                            <a href="#" class="change"><?php _e( 'Change Image' ); ?></a>
    440441                            <a href="#" class="remove"><?php _e( 'Remove Image' ); ?></a>
     442                        </div>
     443                        <div class="library">
     444                            <ul>
     445                                <?php foreach ( $this->control_params['tabs'] as $tab ): ?>
     446                                    <li data-customize-tab='<?php echo esc_attr( $tab[0] ); ?>'>
     447                                        <?php echo esc_html( $tab[1] ); ?>
     448                                    </li>
     449                                <?php endforeach; ?>
     450                            </ul>
     451                            <?php foreach ( $this->control_params['tabs'] as $tab ): ?>
     452                                <div class="library-content" data-customize-tab='<?php echo esc_attr( $tab[0] ); ?>'>
     453                                    <?php call_user_func( $tab[2] ); ?>
     454                                </div>
     455                            <?php endforeach; ?>
    441456                        </div>
    442457                    </div>
  • trunk/wp-includes/class-wp-customize.php

    r20278 r20290  
    543543                'removed'        => 'remove-header',
    544544                'get_url'        => 'get_header_image',
     545                'tabs'           => array(
     546                    array( 'uploaded', __('Uploaded'), 'wp_customize_print_uploaded_headers' ),
     547                    array( 'included', __('Included'), 'wp_customize_print_included_headers' ),
     548                ),
    545549            ),
    546550        ) );
     
    720724    return $color;
    721725}
     726
     727function wp_customize_print_uploaded_headers() {
     728    $headers = get_uploaded_header_images();
     729
     730    foreach ( $headers as $header ) : ?>
     731        <a href="<?php echo esc_url( $header['url'] ); ?>">
     732            <img src="<?php echo esc_url( $header['thumbnail_url'] ); ?>" />
     733        </a>
     734    <?php endforeach;
     735}
     736
     737function wp_customize_print_included_headers() {
     738    global $custom_image_header;
     739    $custom_image_header->process_default_headers();
     740
     741    foreach ( $custom_image_header->default_headers as $header ) : ?>
     742        <a href="<?php echo esc_url( $header['url'] ); ?>">
     743            <img src="<?php echo esc_url( $header['thumbnail_url'] ); ?>" />
     744        </a>
     745    <?php endforeach;
     746}
  • trunk/wp-includes/css/customize-controls.dev.css

    r20278 r20290  
    105105}
    106106
    107 #customize-theme-controls ul {
     107#customize-theme-controls > ul,
     108#customize-theme-controls .customize-section-content {
    108109    margin: 0;
    109110}
     
    329330    display: block;
    330331}
     332.customize-section .customize-image-picker .library {
     333    display: none;
     334/*  float: left;*/
     335}
     336/*.customize-section .customize-image-picker .library label {
     337    display: block;
     338    position: relative;
     339    float: left;
     340    padding: 0 0 5px 20px;
     341}
     342.customize-section .customize-image-picker .library input {
     343    display: block;
     344    position: absolute;
     345    top: 50%;
     346    left: 0;
     347    margin-top: -7px;
     348}*/
     349/*.customize-section .customize-image-picker .library .wp-tab-panel {
     350    padding: 10px 10px 5px 8px;
     351}*/
     352.customize-section .customize-image-picker .library ul {
     353    border-bottom: 1px solid #dfdfdf;
     354    float: left;
     355    width: 100%;
     356    margin: 5px 0;
     357}
     358.customize-section .customize-image-picker .library li {
     359    color: #999;
     360    float: left;
     361    padding: 4px 6px;
     362    margin: 0;
     363    border-style: solid;
     364    border-color: transparent;
     365    border-width: 1px 1px 0 1px;
     366}
     367.customize-section .customize-image-picker .library li.library-selected {
     368    color: #777;
     369    border-color: #dfdfdf;
     370    background: #f5f5f5;
     371    margin-bottom: -1px;
     372    padding-bottom: 5px;
     373}
     374.customize-section .customize-image-picker .library div {
     375    width: 100%;
     376    float: left;
     377}
     378.customize-section .customize-image-picker .library a {
     379    display: block;
     380    max-width: 220px;
     381    max-height: 80px;
     382    margin: 5px auto;
     383    padding: 4px;
     384    background: #fff;
     385    border: 1px solid #dfdfdf;
     386}
     387.customize-section .customize-image-picker .library a:hover {
     388    border-color: #21759b;
     389}
     390.customize-section .customize-image-picker .library img {
     391    display: block;
     392    max-width: 220px;
     393    max-height: 80px;
     394}
     395.customize-section .customize-image-picker .library-content {
     396    display: none;
     397}
  • trunk/wp-includes/js/customize-controls.dev.js

    r20278 r20290  
    105105    api.ImageControl = api.UploadControl.extend({
    106106        initialize: function( id, value, options ) {
     107            var control = this;
     108
    107109            api.UploadControl.prototype.initialize.call( this, id, value, options );
    108110
    109111            this.thumbnail = this.container.find('.thumbnail img');
    110112            this.bind( this.thumbnailSrc );
     113
     114            this.library = this.container.find('.library');
     115            this.changer = this.container.find('.change');
     116
     117            this.changer.click( function( event ) {
     118                control.library.toggle();
     119                event.preventDefault();
     120            });
     121
     122            this.library.on( 'click', 'li', function( event ) {
     123                var tab = $(this),
     124                    id = tab.data('customizeTab');
     125
     126                event.preventDefault();
     127
     128                if ( tab.hasClass('library-selected') )
     129                    return;
     130
     131                tab.siblings('.library-selected').removeClass('library-selected');
     132                tab.addClass('library-selected');
     133
     134                control.library.find('div').hide().filter( function() {
     135                    return $(this).data('customizeTab') === id;
     136                }).show();
     137            });
     138
     139            this.library.on( 'click', 'a', function( event ) {
     140                control.set( $(this).attr('href') );
     141                event.preventDefault();
     142            });
    111143        },
    112144        thumbnailSrc: function( to ) {
    113             if ( /^(http:\/\/|https:\/\/|\/\/)/.test( to ) )
     145            if ( /^(https?:)?\/\//.test( to ) )
    114146                this.thumbnail.prop( 'src', to ).show();
    115147            else
Note: See TracChangeset for help on using the changeset viewer.