WordPress.org

Make WordPress Core

Changeset 22532


Ignore:
Timestamp:
11/10/12 18:25:04 (17 months 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.