WordPress.org
Get WordPress

Make WordPress Core


Ignore:
Timestamp:
12/02/2014 09:54:42 PM (10 years ago)
Author:
ocean90
Message:

Customizer: Enhance Background Image/Upload controls.

  • Adopt the Header Image layout to the Background Image/Upload control.
  • Remove templates for interactive audio/video previews. They haven't worked yet.
  • Don't show a "Remove" button when the default value is set.
  • Avoid calculating of container/placeholder heights which are unrelated to custom headers.

see #21483.

File:
1 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-includes/class-wp-customize-control.php

    r30676 r30712  
    748748
    749749        if ( data.attachment && data.attachment.id ) { #>
    750             <div class="attachment-media-view {{ data.attachment.orientation }}">
    751                 <div class="thumbnail thumbnail-{{ data.attachment.type }}">
    752                     <# if ( 'image' === data.attachment.type && data.attachment.sizes && data.attachment.sizes.medium ) { #>
    753                         <img class="attachment-thumb" src="{{ data.attachment.sizes.medium.url }}" draggable="false" />
    754                     <# } else if ( 'image' === data.attachment.type && data.attachment.sizes && data.attachment.sizes.full ) { #>
    755                         <img class="attachment-thumb" src="{{ data.attachment.sizes.full.url }}" draggable="false" />
    756                     <# } else if ( -1 === jQuery.inArray( data.attachment.type, [ 'audio', 'video' ] ) ) { #>
    757                         <img class="attachment-thumb type-icon" src="{{ data.attachment.icon }}" class="icon" draggable="false" />
    758                         <p class="attachment-title">{{ data.attachment.title }}</p>
    759                     <# } #>
    760 
    761                     <# if ( 'audio' === data.attachment.type ) { #>
    762                     <div class="wp-media-wrapper">
    763                         <p class="attachment-title">{{ data.attachment.title }}</p>
    764                         <audio style="visibility: hidden" controls class="wp-audio-shortcode" width="100%" preload="none">
    765                             <source type="{{ data.attachment.mime }}" src="{{ data.attachment.url }}"/>
    766                         </audio>
     750            <div class="current">
     751                <div class="container">
     752                    <div class="attachment-media-view {{ data.attachment.orientation }}">
     753                        <div class="thumbnail thumbnail-{{ data.attachment.type }}">
     754                            <# if ( 'image' === data.attachment.type && data.attachment.sizes && data.attachment.sizes.medium ) { #>
     755                                <img class="attachment-thumb" src="{{ data.attachment.sizes.medium.url }}" draggable="false" />
     756                            <# } else if ( 'image' === data.attachment.type && data.attachment.sizes && data.attachment.sizes.full ) { #>
     757                                <img class="attachment-thumb" src="{{ data.attachment.sizes.full.url }}" draggable="false" />
     758                            <# } else { #>
     759                                <img class="attachment-thumb type-icon" src="{{ data.attachment.icon }}" class="icon" draggable="false" />
     760                                <p class="attachment-title">{{ data.attachment.title }}</p>
     761                            <# } #>
     762                        </div>
    767763                    </div>
    768                     <# } else if ( 'video' === data.attachment.type ) {
    769                         var w_rule = h_rule = '';
    770                         if ( data.attachment.width ) {
    771                             w_rule = 'width: ' + data.attachment.width + 'px;';
    772                         } else if ( wp.media.view.settings.contentWidth ) {
    773                             w_rule = 'width: ' + wp.media.view.settings.contentWidth + 'px;';
    774                         }
    775                         if ( data.attachment.height ) {
    776                             h_rule = 'height: ' + data.attachment.height + 'px;';
    777                         }
    778                         #>
    779                         <div style="{{ w_rule }}{{ h_rule }}" class="wp-media-wrapper wp-video">
    780                             <video controls="controls" class="wp-video-shortcode" preload="metadata"
    781                                 <# if ( data.attachment.width ) { #>width="{{ data.attachment.width }}"<# } #>
    782                                 <# if ( data.attachment.height ) { #>height="{{ data.attachment.height }}"<# } #>
    783                                 <# if ( data.attachment.image && data.attachment.image.src !== data.attachment.icon ) { #>poster="{{ data.attachment.image.src }}"<# } #>>
    784                                 <source type="{{ data.attachment.mime }}" src="{{ data.attachment.url }}"/>
    785                             </video>
    786                         </div>
    787                     <# } #>
    788764                </div>
    789765            </div>
    790             <a class="button upload-button" id="{{ data.settings.default }}-button" href="#"><?php echo $this->button_labels['change']; ?></a>
    791             <# if ( data.defaultAttachment && data.defaultAttachment.id !== data.attachment.id ) { #>
    792                 <a class="default-button remove-button" href="#"><?php echo $this->button_labels['default']; ?></a>
    793             <# } else { #>
    794                 <a class="remove-button" href="#"><?php echo $this->button_labels['remove']; ?></a>
    795             <# } #>
     766            <div class="actions">
     767                <# if ( data.defaultAttachment && data.defaultAttachment.id !== data.attachment.id ) { #>
     768                    <button type="button" class="button default-button remove-button"><?php echo $this->button_labels['default']; ?></button>
     769                <# } else if ( ! data.defaultAttachment ) { #>
     770                    <button type="button" class="button remove-button"><?php echo $this->button_labels['remove']; ?></button>
     771                <# } #>
     772                <button type="button" class="button upload-button" id="{{ data.settings.default }}-button"><?php echo $this->button_labels['change']; ?></button>
     773                <div style="clear:both"></div>
     774            </div>
    796775        <# } else { #>
    797             <p class="placeholder-text"><?php echo $this->button_labels['placeholder']; ?></p>
    798             <a class="button upload-button" id="{{ data.settings.default }}-button" href="#"><?php echo $this->button_labels['select']; ?></a>
    799             <# if ( data.defaultAttachment ) { #>
    800                 <a class="default-button remove-button" href="#"><?php echo $this->button_labels['default']; ?></a>
    801             <# } #>
     776            <div class="current">
     777                <div class="container">
     778                    <div class="placeholder">
     779                        <div class="inner">
     780                            <span>
     781                                <?php echo $this->button_labels['placeholder']; ?>
     782                            </span>
     783                        </div>
     784                    </div>
     785                </div>
     786            </div>
     787            <div class="actions">
     788                <# if ( data.defaultAttachment ) { #>
     789                    <button type="button" class="button default-button remove-button"><?php echo $this->button_labels['default']; ?></button>
     790                <# } #>
     791                <button type="button" class="button upload-button" id="{{ data.settings.default }}-button"><?php echo $this->button_labels['select']; ?></button>
     792                <div style="clear:both"></div>
     793            </div>
    802794        <# } #>
    803795        <?php
Note: See TracChangeset for help on using the changeset viewer.