WordPress.org
Get WordPress

Make WordPress Core

Changeset 22532


Ignore:
Timestamp:
11/10/2012 06:25:04 PM (12 years ago)
Author:
koopersmith
Message:

Media: Add title, caption, and alt text, and attachment info to sidebar.

  • Improve sidebar styles.
  • Separate the hybrid title/caption field.
  • Improve the sidebar image thumbnail.
  • Remove filenames from inside the non-image icon thumbnail.
  • Properly sync title/caption/alt.

see #21390.

Location:
trunk
Files:
5 edited

Legend:

Unmodified
Added
Removed

  • trunk/wp-admin/includes/ajax-actions.php

    r22521 r22532  
    18591859        $args['post_excerpt'] = $changes['caption'];
    18601860
     1861    if ( ! empty( $changes['alt'] ) )
     1862        $args['_wp_attachment_image_alt'] = $changes['alt'];
     1863
    18611864    if ( $args )
    1862         wp_update_post( array_merge( $args, array( 'ID' => $id ) ) );
     1865        edit_post( array_merge( $args, array( 'post_ID' => $id ) ) );
    18631866
    18641867    wp_send_json_success();

  • trunk/wp-admin/includes/post.php

    r22410 r22532  
    166166    if ( is_wp_error($post_data) )
    167167        wp_die( $post_data->get_error_message() );
    168     if ( 'autosave' != $post_data['action'] && 'auto-draft' == $post_data['post_status'] )
     168    if ( ( empty( $post_data['action'] ) || 'autosave' != $post_data['action'] ) && 'auto-draft' == $post_data['post_status'] ) {
    169169        $post_data['post_status'] = 'draft';
     170    }
    170171
    171172    if ( isset($post_data['visibility']) ) {

  • trunk/wp-includes/css/media-views.css

    r22529 r22532  
    171171    padding-top: 5px;
    172172}
     173
     174.media-sidebar h3 {
     175    position: relative;
     176    font-weight: bold;
     177    text-transform: uppercase;
     178    font-size: 12px;
     179    color: #777;
     180    text-shadow: 0 1px 0 #fff;
     181    margin: 24px 0 8px;
     182}
     183
     184/*.media-sidebar h3:before {
     185    content: '\25B8';
     186    display: block;
     187    position: absolute;
     188    top: -1px;
     189    left: -12px;
     190    font-size: 14px;
     191    color: #ccc;
     192}
     193*/
     194.media-sidebar .setting {
     195    display: block;
     196    float: left;
     197    width: 100%;
     198    margin: 1px 0;
     199}
     200
     201.media-sidebar .setting span {
     202    float: left;
     203    min-width: 78px;
     204    min-height: 24px;
     205    margin-right: 7px;
     206    padding-top: 8px;
     207    line-height: 16px;
     208    text-align: right;
     209    color: #999;
     210    text-shadow: 0 1px 0 #fff;
     211}
     212
     213.media-sidebar .setting input,
     214.media-sidebar .setting textarea,
     215.media-sidebar .setting > .button-group {
     216    min-width: 180px;
     217    float: right;
     218}
     219
     220.media-sidebar .setting input,
     221.media-sidebar .setting textarea {
     222    padding: 6px 8px;
     223    line-height: 16px;
     224    resize: none;
     225}
     226
     227.media-sidebar .setting textarea {
     228    height: 62px;
     229}
     230
     231.media-sidebar .setting select {
     232    height: 28px;
     233    line-height: 28px;
     234    margin-top: 3px;
     235}
     236
    173237
    174238/**
    … …  
    788852}
    789853
    790 .attachment-details-preview {
    791     cursor: default;
    792 }
    793 
    794 .attachment-details-preview {
    795     width: auto;
    796     height: auto;
     854.attachment-info {
     855    overflow: hidden;
     856    min-height: 60px;
     857    margin-bottom: 16px;
     858    line-height: 18px;
     859    color: #999;
     860    border-bottom: 1px solid #e5e5e5;
     861    box-shadow: 0 1px 0 #fff;
     862    padding-bottom: 16px;
     863}
     864
     865.attachment-info .filename {
     866    font-weight: bold;
     867    color: #464646;
     868}
     869
     870.attachment-info .thumbnail {
    797871    position: relative;
    798 }
    799 
    800 .attachment-details-preview .thumbnail {
    801     width: 100%;
    802     height: auto;
    803 }
    804 
    805 .attachment-details-preview .thumbnail:after {
     872    float: left;
     873    max-width: 120px;
     874    max-height: 120px;
     875    margin-right: 10px;
     876}
     877
     878.attachment-info .thumbnail:after {
    806879    content: '';
    807880    display: block;
    … …  
    811884    right: 0;
    812885    bottom: 0;
    813     box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
    814     overflow: hidden;
    815 }
    816 
    817 .attachment-details-preview .thumbnail img {
    818     display: block;
    819     max-width: 100%;
    820     max-height: 132px;
     886    box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
     887    overflow: hidden;
     888}
     889
     890.attachment-info .thumbnail img {
     891    display: block;
     892    max-width: 120px;
     893    max-height: 120px;
    821894    margin: 0 auto;
    822895}
    823896
    824 .attachment-details .describe {
    825     float: left;
    826     margin: 10px 0 0;
    827     border-radius: 3px;
     897.attachment-info .details {
     898    float: left;
    828899}
    829900
    … …  
    835906    margin: 1.4em 0 0.4em;
    836907}
     908
     909.gallery-settings {
     910    overflow: hidden;
     911}

  • trunk/wp-includes/js/media-views.js

    r22529 r22532  
    19071907
    19081908        events: {
    1909             'mousedown .attachment-preview': 'toggleSelection',
    1910             'change .describe':          'describe'
     1909            'mousedown .attachment-preview':  'toggleSelection',
     1910            'change [data-setting]':          'updateSetting',
     1911            'change [data-setting] input':    'updateSetting',
     1912            'change [data-setting] select':   'updateSetting',
     1913            'change [data-setting] textarea': 'updateSetting'
    19111914        },
    19121915
    … …  
    20402043        },
    20412044
    2042         describe: function( event ) {
    2043             if ( 'image' === this.model.get('type') )
    2044                 this.model.save( 'caption', event.target.value );
    2045             else
    2046                 this.model.save( 'title', event.target.value );
     2045        updateSetting: function( event ) {
     2046            var $setting = $( event.target ).closest('[data-setting]');
     2047
     2048            if ( ! $setting.length )
     2049                return;
     2050
     2051            this.model.save( $setting.data('setting'), event.target.value );
    20472052        }
    20482053    });
    … …  
    25932598
    25942599        events: {
    2595             'change .describe': 'describe'
     2600            'change [data-setting]':          'updateSetting',
     2601            'change [data-setting] input':    'updateSetting',
     2602            'change [data-setting] select':   'updateSetting',
     2603            'change [data-setting] textarea': 'updateSetting'
    25962604        }
    25972605    });

  • trunk/wp-includes/media.php

    r22529 r22532  
    12631263        'subtype'     => $subtype,
    12641264        'icon'        => wp_mime_type_icon( $attachment->ID ),
     1265        'dateFormatted' => mysql2date( get_option('date_format'), $attachment->post_date ),
    12651266    );
    12661267
    … …  
    14371438
    14381439    <script type="text/html" id="tmpl-attachment-details">
    1439         <h3><?php _e('Edit Attachment Details'); ?></h3>
    1440         <div class="attachment-preview attachment-details-preview type-{{ type }} subtype-{{ subtype }} {{ orientation }}">
    1441             <# if ( uploading ) { #>
    1442                 <div class="media-progress-bar"><div></div></div>
    1443             <# } else if ( 'image' === type ) { #>
    1444                 <div class="thumbnail">
     1440        <h3><?php _e('Attachment Details'); ?></h3>
     1441        <div class="attachment-info">
     1442            <div class="thumbnail">
     1443                <# if ( uploading ) { #>
     1444                    <div class="media-progress-bar"><div></div></div>
     1445                <# } else if ( 'image' === type ) { #>
    14451446                    <img src="{{ url }}" draggable="false" />
    1446                 </div>
    1447             <# } else { #>
    1448                 <div class="icon-thumbnail">
     1447                <# } else { #>
    14491448                    <img src="{{ icon }}" class="icon" draggable="false" />
    1450                     <div class="filename">{{ filename }}</div>
    1451                 </div>
    1452             <# } #>
     1449                <# } #>
     1450            </div>
     1451            <div class="details">
     1452                <div class="filename">{{ filename }}</div>
     1453                <div class="uploaded">{{ dateFormatted }}</div>
     1454                <# if ( 'image' === type ) { #>
     1455                    <div class="dimensions">{{ width }} &times; {{ height }}</div>
     1456                <# } #>
     1457            </div>
    14531458        </div>
    14541459
    14551460        <# if ( 'image' === type ) { #>
    1456             <textarea class="describe"
    1457                 placeholder="<?php esc_attr_e('Describe this image&hellip;'); ?>"
    1458                 >{{ caption }}</textarea>
     1461            <label class="setting" data-setting="title">
     1462                <span><?php _e('Title'); ?></span>
     1463                <input type="text" value="{{ title }}" />
     1464            </label>
     1465            <label class="setting" data-setting="caption">
     1466                <span><?php _e('Caption'); ?></span>
     1467                <textarea
     1468                    placeholder="<?php esc_attr_e('Describe this image&hellip;'); ?>"
     1469                    >{{ caption }}</textarea>
     1470            </label>
     1471            <label class="setting" data-setting="alt">
     1472                <span><?php _e('Alt Text'); ?></span>
     1473                <input type="text" value="{{ alt }}" />
     1474            </label>
    14591475        <# } else { #>
    1460             <textarea class="describe"
     1476            <label class="setting" data-setting="title">
     1477                <span><?php _e('Title'); ?></span>
     1478                <input type="text" value="{{ title }}"
    14611479                <# if ( 'video' === type ) { #>
    14621480                    placeholder="<?php esc_attr_e('Describe this video&hellip;'); ?>"
    … …  
    14651483                <# } else { #>
    14661484                    placeholder="<?php esc_attr_e('Describe this media file&hellip;'); ?>"
    1467                 <# } #>
    1468                 >{{ title }}</textarea>
     1485                <# } #>/>
     1486            </label>
    14691487        <# } #>
    14701488    </script>
    … …  
    14961514        <h3><?php _e('Attachment Display Settings'); ?></h3>
    14971515
    1498         <h4><?php _e('Alignment'); ?></h4>
    1499         <div class="alignment button-group button-large"
    1500             data-setting="align"
    1501             <# if ( userSettings ) { #>
    1502                 data-user-setting="align"
    1503             <# } #>>
    1504 
    1505             <button class="button" value="left">
    1506                 <?php esc_attr_e('Left'); ?>
    1507             </button>
    1508             <button class="button" value="center">
    1509                 <?php esc_attr_e('Center'); ?>
    1510             </button>
    1511             <button class="button" value="right">
    1512                 <?php esc_attr_e('Right'); ?>
    1513             </button>
    1514             <button class="button active" value="none">
    1515                 <?php esc_attr_e('None'); ?>
    1516             </button>
    1517         </div>
    1518 
    1519         <h4><?php _e('Link To'); ?></h4>
    1520         <div class="link-to button-group button-large"
    1521             data-setting="link"
    1522             <# if ( userSettings ) { #>
    1523                 data-user-setting="urlbutton"
    1524             <# } #>>
    1525 
    1526             <button class="button active" value="post">
    1527                 <?php esc_attr_e('Attachment Page'); ?>
    1528             </button>
    1529             <button class="button" value="file">
    1530                 <?php esc_attr_e('Media File'); ?>
    1531             </button>
    1532             <button class="button" value="none">
    1533                 <?php esc_attr_e('None'); ?>
    1534             </button>
    1535         </div>
    1536 
    1537         <# if ( ! _.isUndefined( sizes ) ) { #>
    1538             <h4><?php _e('Size'); ?></h4>
    1539             <select class="size" name="size"
    1540                 data-setting="size"
     1516        <label class="setting">
     1517            <span><?php _e('Alignment'); ?></span>
     1518            <select class="alignment"
     1519                data-setting="align"
    15411520                <# if ( userSettings ) { #>
    1542                     data-user-setting="imgsize"
     1521                    data-user-setting="align"
    15431522                <# } #>>
    1544                 <?php
    1545 
    1546                 $sizes = apply_filters( 'image_size_names_choose', array(
    1547                     'thumbnail' => __('Thumbnail'),
    1548                     'medium'    => __('Medium'),
    1549                     'large'     => __('Large'),
    1550                 ) );
    1551 
    1552                 foreach ( $sizes as $value => $name ) : ?>
    1553                     <# if ( ! _.isUndefined( sizes['<?php echo esc_js( $value ); ?>'] ) ) { #>
    1554                         <option value="<?php echo esc_attr( $value ); ?>" <?php selected( $value, 'medium' ); ?>>
    1555                             <?php echo esc_html( $name ); ?>
    1556                         </option>
    1557                     <# } #>>
    1558                 <?php endforeach; ?>
    1559 
    1560                 <option value="full">
    1561                     <?php echo esc_html_e( 'Full Size' ); ?>
     1523
     1524                <option value="left">
     1525                    <?php esc_attr_e('Left'); ?>
     1526                </option>
     1527                <option value="center">
     1528                    <?php esc_attr_e('Center'); ?>
     1529                </option>
     1530                <option value="right">
     1531                    <?php esc_attr_e('Right'); ?>
     1532                </option>
     1533                <option value="none" selected>
     1534                    <?php esc_attr_e('None'); ?>
    15621535                </option>
    15631536            </select>
     1537        </label>
     1538
     1539        <label class="setting">
     1540            <span><?php _e('Link To'); ?></span>
     1541            <select class="link-to"
     1542                data-setting="link"
     1543                <# if ( userSettings ) { #>
     1544                    data-user-setting="urlbutton"
     1545                <# } #>>
     1546
     1547                <option value="post" selected>
     1548                    <?php esc_attr_e('Attachment Page'); ?>
     1549                </option>
     1550                <option value="file">
     1551                    <?php esc_attr_e('Media File'); ?>
     1552                </option>
     1553                <option value="none">
     1554                    <?php esc_attr_e('None'); ?>
     1555                </option>
     1556            </select>
     1557        </label>
     1558
     1559        <# if ( ! _.isUndefined( sizes ) ) { #>
     1560            <label class="setting">
     1561                <span><?php _e('Size'); ?></span>
     1562                <select class="size" name="size"
     1563                    data-setting="size"
     1564                    <# if ( userSettings ) { #>
     1565                        data-user-setting="imgsize"
     1566                    <# } #>>
     1567                    <?php
     1568
     1569                    $sizes = apply_filters( 'image_size_names_choose', array(
     1570                        'thumbnail' => __('Thumbnail'),
     1571                        'medium'    => __('Medium'),
     1572                        'large'     => __('Large'),
     1573                    ) );
     1574
     1575                    foreach ( $sizes as $value => $name ) : ?>
     1576                        <# if ( ! _.isUndefined( sizes['<?php echo esc_js( $value ); ?>'] ) ) { #>
     1577                            <option value="<?php echo esc_attr( $value ); ?>" <?php selected( $value, 'medium' ); ?>>
     1578                                <?php echo esc_html( $name ); ?>
     1579                            </option>
     1580                        <# } #>>
     1581                    <?php endforeach; ?>
     1582
     1583                    <option value="full">
     1584                        <?php echo esc_html_e( 'Full Size' ); ?>
     1585                    </option>
     1586                </select>
     1587            </label>
    15641588        <# } #>
    15651589    </script>
    … …  
    15681592        <h3><?php _e('Gallery Settings'); ?></h3>
    15691593
    1570         <h4><?php _e('Link To'); ?></h4>
    1571         <div class="link-to button-group"
    1572             data-setting="link">
    1573 
    1574             <button class="button active" value="post">
    1575                 <?php esc_attr_e('Attachment Page'); ?>
    1576             </button>
    1577             <button class="button" value="file">
    1578                 <?php esc_attr_e('Media File'); ?>
    1579             </button>
    1580         </div>
    1581 
    1582         <h4><?php _e('Gallery Columns'); ?></h4>
    1583 
    1584         <select class="columns" name="columns"
    1585             data-setting="columns">
    1586             <?php for ( $i = 1; $i <= 9; $i++ ) : ?>
    1587                 <option value="<?php echo esc_attr( $i ); ?>" <?php selected( $i, 3 ); ?>>
    1588                     <?php echo esc_html( $i ); ?>
     1594        <label class="setting">
     1595            <span><?php _e('Link To'); ?></span>
     1596            <select class="link-to"
     1597                data-setting="link"
     1598                <# if ( userSettings ) { #>
     1599                    data-user-setting="urlbutton"
     1600                <# } #>>
     1601
     1602                <option value="post" selected>
     1603                    <?php esc_attr_e('Attachment Page'); ?>
    15891604                </option>
    1590             <?php endfor; ?>
    1591         </select>
     1605                <option value="file">
     1606                    <?php esc_attr_e('Media File'); ?>
     1607                </option>
     1608            </select>
     1609        </label>
     1610
     1611        <label class="setting">
     1612            <span><?php _e('Columns'); ?></span>
     1613            <select class="columns" name="columns"
     1614                data-setting="columns">
     1615                <?php for ( $i = 1; $i <= 9; $i++ ) : ?>
     1616                    <option value="<?php echo esc_attr( $i ); ?>" <?php selected( $i, 3 ); ?>>
     1617                        <?php echo esc_html( $i ); ?>
     1618                    </option>
     1619                <?php endfor; ?>
     1620            </select>
     1621        </label>
    15921622    </script>
    15931623
Note: See TracChangeset for help on using the changeset viewer.