WordPress.org
Get WordPress

Make WordPress Core


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.

File:
1 edited

Legend:

Unmodified
Added
Removed

  • 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.