WordPress.org

Make WordPress Core


Ignore:
Timestamp:
07/04/2014 03:38:33 AM (6 years ago)
Author:
helen
Message:

Media grid, round 2. Expect much more to come.

  • Instead of a sidebar for details, utilize a modal. The modal experience allows for a larger preview, editing images, audio/video previews, and previous/next navigation, like the theme browser. Think of it as an attachment browser.
  • Show some details in the grid view to more easily distinguish items.

props ericlewis, wonderboymusic, JerrySarcastic. see #24716.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/media-template.php

    r28807 r28993  
    221221    </script>
    222222
     223    <script type="text/html" id="tmpl-media-library-view-switcher">
     224        <a href="<?php echo esc_url( add_query_arg( 'mode', 'list', $_SERVER['REQUEST_URI'] ) ) ?>" class="view-list">
     225            <img id="view-switch-list" src="<?php echo includes_url( 'images/blank.gif' ) ?>" width="20" height="20" title="List View" alt="List View"/>
     226        </a>
     227        <a href="<?php echo esc_url( add_query_arg( 'mode', 'grid', $_SERVER['REQUEST_URI'] ) ) ?>" class="view-grid current">
     228            <img id="view-switch-excerpt" src="<?php echo includes_url( 'images/blank.gif' ) ?>" width="20" height="20" title="Grid View" alt="Grid View"/>
     229        </a>
     230    </script>
     231
    223232    <script type="text/html" id="tmpl-uploader-status">
    224233        <h3><?php _e( 'Uploading' ); ?></h3>
     
    242251    </script>
    243252
     253    <script type="text/html" id="tmpl-edit-attachment-frame">
     254        <div class="edit-media-header">
     255            <button class="left dashicons dashicons-no<# if ( ! data.hasPrevious ) { #> disabled <# } #>"><span class="screen-reader-text"><?php _e( 'Edit previous media item' ); ?></span></button>
     256            <button class="right dashicons dashicons-no<# if ( ! data.hasNext ) { #> disabled <# } #>"><span class="screen-reader-text"><?php _e( 'Edit next media item' ); ?></span></button>
     257        </div>
     258        <div class="media-frame-router"></div>
     259        <div class="media-frame-content"></div>
     260        <div class="media-frame-toolbar"></div>
     261    </script>
     262
     263    <script type="text/html" id="tmpl-attachment-details-two-column">
     264        <h3>
     265            <?php _e('Attachment Details'); ?>
     266
     267            <span class="settings-save-status">
     268                <span class="spinner"></span>
     269                <span class="saved"><?php esc_html_e('Saved.'); ?></span>
     270            </span>
     271        </h3>
     272        <div class="attachment-info">
     273            <div class="thumbnail thumbnail-{{ data.type }}">
     274                <# if ( data.uploading ) { #>
     275                    <div class="media-progress-bar"><div></div></div>
     276                <# } else if ( 'image' === data.type ) { #>
     277                    <img src="{{ data.sizes.full.url }}" draggable="false" />
     278                <# } else { #>
     279                    <img src="{{ data.icon }}" class="icon" draggable="false" />
     280                <# } #>
     281            </div>
     282            <div class="details">
     283                <div class="filename">{{ data.filename }}</div>
     284                <div class="uploaded">{{ data.dateFormatted }}</div>
     285
     286                <div class="file-size">{{ data.filesizeHumanReadable }}</div>
     287                <# if ( 'image' === data.type && ! data.uploading ) { #>
     288                    <# if ( data.width && data.height ) { #>
     289                        <div class="dimensions">{{ data.width }} &times; {{ data.height }}</div>
     290                    <# } #>
     291
     292                    <# if ( data.can.save ) { #>
     293                        <a class="edit-attachment" href="{{ data.editLink }}&amp;image-editor" target="_blank"><?php _e( 'Edit Image' ); ?></a>
     294                        <a class="refresh-attachment" href="#"><?php _e( 'Refresh' ); ?></a>
     295                    <# } #>
     296                <# } #>
     297
     298                <# if ( data.fileLength ) { #>
     299                    <div class="file-length"><?php _e( 'Length:' ); ?> {{ data.fileLength }}</div>
     300                <# } #>
     301
     302                <# if ( ! data.uploading && data.can.remove ) { #>
     303                    <?php if ( MEDIA_TRASH ): ?>
     304                        <a class="trash-attachment" href="#"><?php _e( 'Trash' ); ?></a>
     305                    <?php else: ?>
     306                        <a class="delete-attachment" href="#"><?php _e( 'Delete Permanently' ); ?></a>
     307                    <?php endif; ?>
     308                <# } #>
     309
     310                <div class="compat-meta">
     311                    <# if ( data.compat && data.compat.meta ) { #>
     312                        {{{ data.compat.meta }}}
     313                    <# } #>
     314                </div>
     315            </div>
     316            <# if ( 'audio' === data.type ) { #>
     317            <div class="wp-media-wrapper">
     318                <audio style="visibility: hidden" controls class="wp-audio-shortcode" width="100%" preload="none">
     319                    <source type="{{ data.mime }}" src="{{ data.url }}"/>
     320                </audio>
     321            </div>
     322            <# } else if ( 'video' === data.type ) { #>
     323            <div style="max-width: 100%; width: {{ data.width }}px" class="wp-media-wrapper">
     324                <video controls class="wp-video-shortcode" preload="metadata"
     325                    width="{{ data.width }}" height="{{ data.height }}"
     326                    <# if ( data.image && data.image.src !== data.icon ) { #>poster="{{ data.image.src }}"<# } #>>
     327                    <source type="{{ data.mime }}" src="{{ data.url }}"/>
     328                </video>
     329            </div>
     330            <# } #>
     331        </div>
     332        <div class="attachment-fields">
     333            <label class="setting" data-setting="url">
     334                <span class="name"><?php _e('URL'); ?></span>
     335                <input type="text" value="{{ data.url }}" readonly />
     336            </label>
     337            <# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
     338            <label class="setting" data-setting="title">
     339                <span class="name"><?php _e('Title'); ?></span>
     340                <input type="text" value="{{ data.title }}" {{ maybeReadOnly }} />
     341            </label>
     342            <label class="setting" data-setting="caption">
     343                <span class="name"><?php _e('Caption'); ?></span>
     344                <textarea {{ maybeReadOnly }}>{{ data.caption }}</textarea>
     345            </label>
     346            <# if ( 'image' === data.type ) { #>
     347                <label class="setting" data-setting="alt">
     348                    <span class="name"><?php _e('Alt Text'); ?></span>
     349                    <input type="text" value="{{ data.alt }}" {{ maybeReadOnly }} />
     350                </label>
     351            <# } #>
     352            <label class="setting" data-setting="description">
     353                <span class="name"><?php _e('Description'); ?></span>
     354                <textarea {{ maybeReadOnly }}>{{ data.description }}</textarea>
     355            </label>
     356            <label class="setting">
     357                    <span class="name"><?php _e( 'Uploaded By' ); ?></span>
     358                    <span class="value">{{ data.authorName }}</span>
     359                </label>
     360            <# if ( data.uploadedTo ) { #>
     361                <label class="setting">
     362                    <span class="name"><?php _e('Uploaded To'); ?></span>
     363                    <span class="value"><a href="{{ data.uploadedToLink }}">{{ data.uploadedToTitle }}</a></span>
     364                </label>
     365            <# } #>
     366        </div>
     367    </script>
     368
    244369    <script type="text/html" id="tmpl-attachment">
     370        <# if ( _.contains( data.controller.options.mode, 'grid' ) ) { #>
     371        <div class="inline-toolbar">
     372            <div class="dashicons dashicons-edit edit edit-media"></div>
     373        </div>
     374        <# } #>
    245375        <div class="attachment-preview type-{{ data.type }} subtype-{{ data.subtype }} {{ data.orientation }}">
    246376            <# if ( data.uploading ) { #>
     
    252382                    </div>
    253383                </div>
    254             <# } else { #>
     384            <# } else {
     385                if ( data.thumb && data.thumb.src && data.thumb.src !== data.icon ) {
     386                #><img src="{{ data.thumb.src }}" class="thumbnail" draggable="false" /><#
     387                } #>
    255388                <img src="{{ data.icon }}" class="icon" draggable="false" />
    256389                <div class="filename">
     
    258391                </div>
    259392            <# } #>
    260 
    261393            <# if ( data.buttons.close ) { #>
    262394                <a class="close media-modal-icon" href="#" title="<?php esc_attr_e('Remove'); ?>"></a>
     
    269401        <#
    270402        var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly';
    271         if ( data.describe ) { #>
    272             <# if ( 'image' === data.type ) { #>
     403        if ( data.describe ) {
     404            if ( 'image' === data.type ) { #>
    273405                <input type="text" value="{{ data.caption }}" class="describe" data-setting="caption"
    274406                    placeholder="<?php esc_attr_e('Caption this image&hellip;'); ?>" {{ maybeReadOnly }} />
     
    282414                        placeholder="<?php esc_attr_e('Describe this media file&hellip;'); ?>"
    283415                    <# } #> {{ maybeReadOnly }} />
    284             <# } #>
     416            <# }
     417        }
     418
     419        if ( _.contains( data.controller.options.mode, 'grid' ) ) { #>
     420        <div class="data-fields">
     421        <# _.each( data.showAttachmentFields, function( field ) { #>
     422            <div class="data-field data-{{ field }}"><#
     423                if ( 'uploadedTo' === field ) {
     424                    if ( data[field] ) {
     425                    #><?php _e( 'Uploaded To:' ) ?><#
     426                    } else {
     427                    #><?php _e( 'Unattached' ) ?><#
     428                    }
     429                } else if ( 'title' === field && ! data[ field ] ) {
     430                #><?php _e( '(No title)' ) ?><#
     431                }
     432
     433                if ( data[ field ] ) {
     434                    #>{{ data[ field ] }}<#
     435                }
     436            #></div>
     437        <# }); #>
     438        </div>
    285439        <# } #>
     440
    286441    </script>
    287442
Note: See TracChangeset for help on using the changeset viewer.