WordPress.org

Make WordPress Core

Changeset 20278


Ignore:
Timestamp:
03/24/2012 04:35:13 AM (8 years ago)
Author:
koopersmith
Message:

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.

Location:
trunk/wp-includes
Files:
4 edited

Legend:

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

    r20276 r20278  
    406406                break;
    407407            case 'upload':
    408                 $value = $this->value();
    409                 $style = empty( $value ) ? 'style="display:none;"' : '';
    410408                ?>
    411409                <label>
     
    414412                        <input type="hidden" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->name(); ?> />
    415413                        <a href="#" class="button-secondary upload"><?php _e( 'Upload' ); ?></a>
    416                         <a href="#" class="remove" <?php echo $style; ?>><?php _e( 'Remove' ); ?></a>
     414                        <a href="#" class="remove"><?php _e( 'Remove' ); ?></a>
     415                    </div>
     416                </label>
     417                <?php
     418                break;
     419            case 'image':
     420                $value = $this->value();
     421
     422                $image = $value;
     423                if ( isset( $this->control_params['get_url'] ) )
     424                    $image = call_user_func( $this->control_params['get_url'], $image );
     425
     426                ?>
     427                <label>
     428                    <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
     429                    <input type="hidden" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->name(); ?> />
     430                    <div class="customize-image-picker">
     431                        <div class="thumbnail">
     432                            <?php if ( empty( $image ) ): ?>
     433                                <img style="display:none;" />
     434                            <?php else: ?>
     435                                <img src="<?php echo esc_url( $image ); ?>" />
     436                            <?php endif; ?>
     437                        </div>
     438                        <div class="actions">
     439                            <a href="#" class="upload"><?php _e( 'Upload New' ); ?></a>
     440                            <a href="#" class="remove"><?php _e( 'Remove Image' ); ?></a>
     441                        </div>
    417442                    </div>
    418443                </label>
  • trunk/wp-includes/class-wp-customize.php

    r20276 r20278  
    537537            'label'          => 'Header Image',
    538538            'section'        => 'header',
    539             'control'        => 'upload',
     539            'control'        => 'image',
    540540            'default'        => get_theme_support( 'custom-header', 'default-image' ),
    541541            'control_params' => array(
    542542                'context'        => 'custom-header',
     543                'removed'        => 'remove-header',
     544                'get_url'        => 'get_header_image',
    543545            ),
    544546        ) );
  • trunk/wp-includes/css/customize-controls.dev.css

    r20185 r20278  
    303303    background: transparent;
    304304}
     305
     306/*
     307 * Image Picker
     308 */
     309.customize-section .customize-image-picker {
     310    float: left;
     311}
     312.customize-section .customize-image-picker .thumbnail {
     313    float: left;
     314    clear: left;
     315    width: 100px;
     316    margin-right: 20px;
     317    min-height: 1em;
     318}
     319.customize-section .customize-image-picker .thumbnail img {
     320    max-width: 98px;
     321    max-height: 98px;
     322    border: 1px solid #ccc;
     323}
     324.customize-section .customize-image-picker .actions {
     325    width: 140px;
     326    float: left;
     327}
     328.customize-section .customize-image-picker .actions a {
     329    display: block;
     330}
  • trunk/wp-includes/js/customize-controls.dev.js

    r20276 r20278  
    7777
    7878            api.Control.prototype.initialize.call( this, id, value, options );
     79            this.params.removed = this.params.removed || '';
    7980
    8081            this.uploader = new wp.Uploader({
     
    8788            this.remover = this.container.find('.remove');
    8889            this.remover.click( function( event ) {
    89                 control.set('');
     90                control.set( control.params.removed );
    9091                event.preventDefault();
    9192            });
    9293
    9394            this.bind( this.removerVisibility );
     95            this.removerVisibility( this.get() );
    9496
    9597            if ( this.params.context )
    9698                control.uploader.param( 'post_data[context]', this.params.context );
    9799        },
    98         removerVisibility: function( on ) {
    99             this.remover.toggle( !! on );
     100        removerVisibility: function( to ) {
     101            this.remover.toggle( to != this.params.removed );
     102        }
     103    });
     104
     105    api.ImageControl = api.UploadControl.extend({
     106        initialize: function( id, value, options ) {
     107            api.UploadControl.prototype.initialize.call( this, id, value, options );
     108
     109            this.thumbnail = this.container.find('.thumbnail img');
     110            this.bind( this.thumbnailSrc );
     111        },
     112        thumbnailSrc: function( to ) {
     113            if ( /^(http:\/\/|https:\/\/|\/\/)/.test( to ) )
     114                this.thumbnail.prop( 'src', to ).show();
     115            else
     116                this.thumbnail.hide();
    100117        }
    101118    });
     
    226243    api.controls = {
    227244        color:  api.ColorControl,
    228         upload: api.UploadControl
     245        upload: api.UploadControl,
     246        image:  api.ImageControl
    229247    };
    230248
Note: See TracChangeset for help on using the changeset viewer.