WordPress-C
/
WordPress
mirror of https://github.com/WordPress/WordPress.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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.


git-svn-id: http://core.svn.wordpress.org/trunk@22532 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Daryl Koopersmith 2012-11-10 18:25:04 +00:00
parent e7767b1eba
commit 30e0a600bf
5 changed files with 244 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
wp-admin/includes/ajax-actions.php
View File

@ -1858,8 +1858,11 @@ function wp_ajax_save_attachment() {
if ( ! empty( $changes['caption'] ) ) if ( ! empty( $changes['caption'] ) )
$args['post_excerpt'] = $changes['caption']; $args['post_excerpt'] = $changes['caption'];
if ( ! empty( $changes['alt'] ) )
$args['_wp_attachment_image_alt'] = $changes['alt'];
if ( $args ) if ( $args )
wp_update_post( array_merge( $args, array( 'ID' => $id ) ) ); edit_post( array_merge( $args, array( 'post_ID' => $id ) ) );
wp_send_json_success(); wp_send_json_success();
} }

3
wp-admin/includes/post.php
View File

@ -165,8 +165,9 @@ function edit_post( $post_data = null ) {
$post_data = _wp_translate_postdata( true, $post_data ); $post_data = _wp_translate_postdata( true, $post_data );
if ( is_wp_error($post_data) ) if ( is_wp_error($post_data) )
wp_die( $post_data->get_error_message() ); wp_die( $post_data->get_error_message() );
if ( 'autosave' != $post_data['action'] && 'auto-draft' == $post_data['post_status'] ) if ( ( empty( $post_data['action'] ) || 'autosave' != $post_data['action'] ) && 'auto-draft' == $post_data['post_status'] ) {
$post_data['post_status'] = 'draft'; $post_data['post_status'] = 'draft';
}
if ( isset($post_data['visibility']) ) { if ( isset($post_data['visibility']) ) {
switch ( $post_data['visibility'] ) { switch ( $post_data['visibility'] ) {

111
wp-includes/css/media-views.css
View File

@ -171,6 +171,70 @@
padding-top: 5px; padding-top: 5px;
} }
.media-sidebar h3 {
position: relative;
font-weight: bold;
text-transform: uppercase;
font-size: 12px;
color: #777;
text-shadow: 0 1px 0 #fff;
margin: 24px 0 8px;
}
/*.media-sidebar h3:before {
content: '\25B8';
display: block;
position: absolute;
top: -1px;
left: -12px;
font-size: 14px;
color: #ccc;
}
*/
.media-sidebar .setting {
display: block;
float: left;
width: 100%;
margin: 1px 0;
}
.media-sidebar .setting span {
float: left;
min-width: 78px;
min-height: 24px;
margin-right: 7px;
padding-top: 8px;
line-height: 16px;
text-align: right;
color: #999;
text-shadow: 0 1px 0 #fff;
}
.media-sidebar .setting input,
.media-sidebar .setting textarea,
.media-sidebar .setting > .button-group {
min-width: 180px;
float: right;
}
.media-sidebar .setting input,
.media-sidebar .setting textarea {
padding: 6px 8px;
line-height: 16px;
resize: none;
}
.media-sidebar .setting textarea {
height: 62px;
}
.media-sidebar .setting select {
height: 28px;
line-height: 28px;
margin-top: 3px;
}
/** /**
* Menu * Menu
*/ */
@ -787,22 +851,31 @@
overflow: auto; overflow: auto;
} }
.attachment-details-preview { .attachment-info {
cursor: default; overflow: hidden;
min-height: 60px;
margin-bottom: 16px;
line-height: 18px;
color: #999;
border-bottom: 1px solid #e5e5e5;
box-shadow: 0 1px 0 #fff;
padding-bottom: 16px;
} }
.attachment-details-preview { .attachment-info .filename {
width: auto; font-weight: bold;
height: auto; color: #464646;
}
.attachment-info .thumbnail {
position: relative; position: relative;
float: left;
max-width: 120px;
max-height: 120px;
margin-right: 10px;
} }
.attachment-details-preview .thumbnail { .attachment-info .thumbnail:after {
width: 100%;
height: auto;
}
.attachment-details-preview .thumbnail:after {
content: ''; content: '';
display: block; display: block;
position: absolute; position: absolute;
@ -810,21 +883,19 @@
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 ); box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
overflow: hidden; overflow: hidden;
} }
.attachment-details-preview .thumbnail img { .attachment-info .thumbnail img {
display: block; display: block;
max-width: 100%; max-width: 120px;
max-height: 132px; max-height: 120px;
margin: 0 auto; margin: 0 auto;
} }
.attachment-details .describe { .attachment-info .details {
float: left; float: left;
margin: 10px 0 0;
border-radius: 3px;
} }
/** /**
@ -833,4 +904,8 @@
.attachment-display-settings h4 { .attachment-display-settings h4 {
margin: 1.4em 0 0.4em; margin: 1.4em 0 0.4em;
}
.gallery-settings {
overflow: hidden;
} }

24
wp-includes/js/media-views.js
View File

@ -1906,8 +1906,11 @@
template: media.template('attachment'), template: media.template('attachment'),
events: { events: {
'mousedown .attachment-preview': 'toggleSelection', 'mousedown .attachment-preview': 'toggleSelection',
'change .describe': 'describe' 'change [data-setting]': 'updateSetting',
'change [data-setting] input': 'updateSetting',
'change [data-setting] select': 'updateSetting',
'change [data-setting] textarea': 'updateSetting'
}, },
buttons: {}, buttons: {},
@ -2039,11 +2042,13 @@
} }
}, },
describe: function( event ) { updateSetting: function( event ) {
if ( 'image' === this.model.get('type') ) var $setting = $( event.target ).closest('[data-setting]');
this.model.save( 'caption', event.target.value );
else if ( ! $setting.length )
this.model.save( 'title', event.target.value ); return;
this.model.save( $setting.data('setting'), event.target.value );
} }
}); });
@ -2592,7 +2597,10 @@
template: media.template('attachment-details'), template: media.template('attachment-details'),
events: { events: {
'change .describe': 'describe' 'change [data-setting]': 'updateSetting',
'change [data-setting] input': 'updateSetting',
'change [data-setting] select': 'updateSetting',
'change [data-setting] textarea': 'updateSetting'
} }
}); });

228
wp-includes/media.php
View File

@ -1262,6 +1262,7 @@ function wp_prepare_attachment_for_js( $attachment ) {
'type' => $type, 'type' => $type,
'subtype' => $subtype, 'subtype' => $subtype,
'icon' => wp_mime_type_icon( $attachment->ID ), 'icon' => wp_mime_type_icon( $attachment->ID ),
'dateFormatted' => mysql2date( get_option('date_format'), $attachment->post_date ),
); );
if ( $meta && 'image' === $type ) { if ( $meta && 'image' === $type ) {
@ -1436,36 +1437,53 @@ function wp_print_media_templates( $attachment ) {
</script> </script>
<script type="text/html" id="tmpl-attachment-details"> <script type="text/html" id="tmpl-attachment-details">
<h3><?php _e('Edit Attachment Details'); ?></h3> <h3><?php _e('Attachment Details'); ?></h3>
<div class="attachment-preview attachment-details-preview type-{{ type }} subtype-{{ subtype }} {{ orientation }}"> <div class="attachment-info">
<# if ( uploading ) { #> <div class="thumbnail">
<div class="media-progress-bar"><div></div></div> <# if ( uploading ) { #>
<# } else if ( 'image' === type ) { #> <div class="media-progress-bar"><div></div></div>
<div class="thumbnail"> <# } else if ( 'image' === type ) { #>
<img src="{{ url }}" draggable="false" /> <img src="{{ url }}" draggable="false" />
</div> <# } else { #>
<# } else { #>
<div class="icon-thumbnail">
<img src="{{ icon }}" class="icon" draggable="false" /> <img src="{{ icon }}" class="icon" draggable="false" />
<div class="filename">{{ filename }}</div> <# } #>
</div> </div>
<# } #> <div class="details">
<div class="filename">{{ filename }}</div>
<div class="uploaded">{{ dateFormatted }}</div>
<# if ( 'image' === type ) { #>
<div class="dimensions">{{ width }} &times; {{ height }}</div>
<# } #>
</div>
</div> </div>
<# if ( 'image' === type ) { #> <# if ( 'image' === type ) { #>
<textarea class="describe" <label class="setting" data-setting="title">
placeholder="<?php esc_attr_e('Describe this image&hellip;'); ?>" <span><?php _e('Title'); ?></span>
>{{ caption }}</textarea> <input type="text" value="{{ title }}" />
</label>
<label class="setting" data-setting="caption">
<span><?php _e('Caption'); ?></span>
<textarea
placeholder="<?php esc_attr_e('Describe this image&hellip;'); ?>"
>{{ caption }}</textarea>
</label>
<label class="setting" data-setting="alt">
<span><?php _e('Alt Text'); ?></span>
<input type="text" value="{{ alt }}" />
</label>
<# } else { #> <# } else { #>
<textarea class="describe" <label class="setting" data-setting="title">
<span><?php _e('Title'); ?></span>
<input type="text" value="{{ title }}"
<# if ( 'video' === type ) { #> <# if ( 'video' === type ) { #>
placeholder="<?php esc_attr_e('Describe this video&hellip;'); ?>" placeholder="<?php esc_attr_e('Describe this video&hellip;'); ?>"
<# } else if ( 'audio' === type ) { #> <# } else if ( 'audio' === type ) { #>
placeholder="<?php esc_attr_e('Describe this audio file&hellip;'); ?>" placeholder="<?php esc_attr_e('Describe this audio file&hellip;'); ?>"
<# } else { #> <# } else { #>
placeholder="<?php esc_attr_e('Describe this media file&hellip;'); ?>" placeholder="<?php esc_attr_e('Describe this media file&hellip;'); ?>"
<# } #> <# } #>/>
>{{ title }}</textarea> </label>
<# } #> <# } #>
</script> </script>
@ -1495,100 +1513,112 @@ function wp_print_media_templates( $attachment ) {
<script type="text/html" id="tmpl-attachment-display-settings"> <script type="text/html" id="tmpl-attachment-display-settings">
<h3><?php _e('Attachment Display Settings'); ?></h3> <h3><?php _e('Attachment Display Settings'); ?></h3>
<h4><?php _e('Alignment'); ?></h4> <label class="setting">
<div class="alignment button-group button-large" <span><?php _e('Alignment'); ?></span>
data-setting="align" <select class="alignment"
<# if ( userSettings ) { #> data-setting="align"
data-user-setting="align"
<# } #>>
<button class="button" value="left">
<?php esc_attr_e('Left'); ?>
</button>
<button class="button" value="center">
<?php esc_attr_e('Center'); ?>
</button>
<button class="button" value="right">
<?php esc_attr_e('Right'); ?>
</button>
<button class="button active" value="none">
<?php esc_attr_e('None'); ?>
</button>
</div>
<h4><?php _e('Link To'); ?></h4>
<div class="link-to button-group button-large"
data-setting="link"
<# if ( userSettings ) { #>
data-user-setting="urlbutton"
<# } #>>
<button class="button active" value="post">
<?php esc_attr_e('Attachment Page'); ?>
</button>
<button class="button" value="file">
<?php esc_attr_e('Media File'); ?>
</button>
<button class="button" value="none">
<?php esc_attr_e('None'); ?>
</button>
</div>
<# if ( ! _.isUndefined( sizes ) ) { #>
<h4><?php _e('Size'); ?></h4>
<select class="size" name="size"
data-setting="size"
<# if ( userSettings ) { #> <# if ( userSettings ) { #>
data-user-setting="imgsize" data-user-setting="align"
<# } #>> <# } #>>
<?php
$sizes = apply_filters( 'image_size_names_choose', array( <option value="left">
'thumbnail' => __('Thumbnail'), <?php esc_attr_e('Left'); ?>
'medium' => __('Medium'), </option>
'large' => __('Large'), <option value="center">
) ); <?php esc_attr_e('Center'); ?>
</option>
foreach ( $sizes as $value => $name ) : ?> <option value="right">
<# if ( ! _.isUndefined( sizes['<?php echo esc_js( $value ); ?>'] ) ) { #> <?php esc_attr_e('Right'); ?>
<option value="<?php echo esc_attr( $value ); ?>" <?php selected( $value, 'medium' ); ?>> </option>
<?php echo esc_html( $name ); ?> <option value="none" selected>
</option> <?php esc_attr_e('None'); ?>
<# } #>>
<?php endforeach; ?>
<option value="full">
<?php echo esc_html_e( 'Full Size' ); ?>
</option> </option>
</select> </select>
</label>
<label class="setting">
<span><?php _e('Link To'); ?></span>
<select class="link-to"
data-setting="link"
<# if ( userSettings ) { #>
data-user-setting="urlbutton"
<# } #>>
<option value="post" selected>
<?php esc_attr_e('Attachment Page'); ?>
</option>
<option value="file">
<?php esc_attr_e('Media File'); ?>
</option>
<option value="none">
<?php esc_attr_e('None'); ?>
</option>
</select>
</label>
<# if ( ! _.isUndefined( sizes ) ) { #>
<label class="setting">
<span><?php _e('Size'); ?></span>
<select class="size" name="size"
data-setting="size"
<# if ( userSettings ) { #>
data-user-setting="imgsize"
<# } #>>
<?php
$sizes = apply_filters( 'image_size_names_choose', array(
'thumbnail' => __('Thumbnail'),
'medium' => __('Medium'),
'large' => __('Large'),
) );
foreach ( $sizes as $value => $name ) : ?>
<# if ( ! _.isUndefined( sizes['<?php echo esc_js( $value ); ?>'] ) ) { #>
<option value="<?php echo esc_attr( $value ); ?>" <?php selected( $value, 'medium' ); ?>>
<?php echo esc_html( $name ); ?>
</option>
<# } #>>
<?php endforeach; ?>
<option value="full">
<?php echo esc_html_e( 'Full Size' ); ?>
</option>
</select>
</label>
<# } #> <# } #>
</script> </script>
<script type="text/html" id="tmpl-gallery-settings"> <script type="text/html" id="tmpl-gallery-settings">
<h3><?php _e('Gallery Settings'); ?></h3> <h3><?php _e('Gallery Settings'); ?></h3>
<h4><?php _e('Link To'); ?></h4> <label class="setting">
<div class="link-to button-group" <span><?php _e('Link To'); ?></span>
data-setting="link"> <select class="link-to"
data-setting="link"
<# if ( userSettings ) { #>
data-user-setting="urlbutton"
<# } #>>
<button class="button active" value="post"> <option value="post" selected>
<?php esc_attr_e('Attachment Page'); ?> <?php esc_attr_e('Attachment Page'); ?>
</button>
<button class="button" value="file">
<?php esc_attr_e('Media File'); ?>
</button>
</div>
<h4><?php _e('Gallery Columns'); ?></h4>
<select class="columns" name="columns"
data-setting="columns">
<?php for ( $i = 1; $i <= 9; $i++ ) : ?>
<option value="<?php echo esc_attr( $i ); ?>" <?php selected( $i, 3 ); ?>>
<?php echo esc_html( $i ); ?>
</option> </option>
<?php endfor; ?> <option value="file">
</select> <?php esc_attr_e('Media File'); ?>
</option>
</select>
</label>
<label class="setting">
<span><?php _e('Columns'); ?></span>
<select class="columns" name="columns"
data-setting="columns">
<?php for ( $i = 1; $i <= 9; $i++ ) : ?>
<option value="<?php echo esc_attr( $i ); ?>" <?php selected( $i, 3 ); ?>>
<?php echo esc_html( $i ); ?>
</option>
<?php endfor; ?>
</select>
</label>
</script> </script>
<script type="text/html" id="tmpl-editor-attachment"> <script type="text/html" id="tmpl-editor-attachment">