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'] ) )
$args['post_excerpt'] = $changes['caption'];
if ( ! empty( $changes['alt'] ) )
$args['_wp_attachment_image_alt'] = $changes['alt'];
if ( $args )
wp_update_post( array_merge( $args, array( 'ID' => $id ) ) );
edit_post( array_merge( $args, array( 'post_ID' => $id ) ) );
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 );
if ( is_wp_error($post_data) )
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';
}
if ( isset($post_data['visibility']) ) {
switch ( $post_data['visibility'] ) {

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

@ -171,6 +171,70 @@
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
*/
@ -787,22 +851,31 @@
overflow: auto;
}
.attachment-details-preview {
cursor: default;
.attachment-info {
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 {
width: auto;
height: auto;
.attachment-info .filename {
font-weight: bold;
color: #464646;
}
.attachment-info .thumbnail {
position: relative;
float: left;
max-width: 120px;
max-height: 120px;
margin-right: 10px;
}
.attachment-details-preview .thumbnail {
width: 100%;
height: auto;
}
.attachment-details-preview .thumbnail:after {
.attachment-info .thumbnail:after {
content: '';
display: block;
position: absolute;
@ -810,21 +883,19 @@
left: 0;
right: 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;
}
.attachment-details-preview .thumbnail img {
.attachment-info .thumbnail img {
display: block;
max-width: 100%;
max-height: 132px;
max-width: 120px;
max-height: 120px;
margin: 0 auto;
}
.attachment-details .describe {
.attachment-info .details {
float: left;
margin: 10px 0 0;
border-radius: 3px;
}
/**
@ -833,4 +904,8 @@
.attachment-display-settings h4 {
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'),
events: {
'mousedown .attachment-preview': 'toggleSelection',
'change .describe': 'describe'
'mousedown .attachment-preview': 'toggleSelection',
'change [data-setting]': 'updateSetting',
'change [data-setting] input': 'updateSetting',
'change [data-setting] select': 'updateSetting',
'change [data-setting] textarea': 'updateSetting'
},
buttons: {},
@ -2039,11 +2042,13 @@
}
},
describe: function( event ) {
if ( 'image' === this.model.get('type') )
this.model.save( 'caption', event.target.value );
else
this.model.save( 'title', event.target.value );
updateSetting: function( event ) {
var $setting = $( event.target ).closest('[data-setting]');
if ( ! $setting.length )
return;
this.model.save( $setting.data('setting'), event.target.value );
}
});
@ -2592,7 +2597,10 @@
template: media.template('attachment-details'),
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,
'subtype' => $subtype,
'icon' => wp_mime_type_icon( $attachment->ID ),
'dateFormatted' => mysql2date( get_option('date_format'), $attachment->post_date ),
);
if ( $meta && 'image' === $type ) {
@ -1436,36 +1437,53 @@ function wp_print_media_templates( $attachment ) {
</script>
<script type="text/html" id="tmpl-attachment-details">
<h3><?php _e('Edit Attachment Details'); ?></h3>
<div class="attachment-preview attachment-details-preview type-{{ type }} subtype-{{ subtype }} {{ orientation }}">
<# if ( uploading ) { #>
<div class="media-progress-bar"><div></div></div>
<# } else if ( 'image' === type ) { #>
<div class="thumbnail">
<h3><?php _e('Attachment Details'); ?></h3>
<div class="attachment-info">
<div class="thumbnail">
<# if ( uploading ) { #>
<div class="media-progress-bar"><div></div></div>
<# } else if ( 'image' === type ) { #>
<img src="{{ url }}" draggable="false" />
</div>
<# } else { #>
<div class="icon-thumbnail">
<# } else { #>
<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>
<# if ( 'image' === type ) { #>
<textarea class="describe"
placeholder="<?php esc_attr_e('Describe this image&hellip;'); ?>"
>{{ caption }}</textarea>
<label class="setting" data-setting="title">
<span><?php _e('Title'); ?></span>
<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 { #>
<textarea class="describe"
<label class="setting" data-setting="title">
<span><?php _e('Title'); ?></span>
<input type="text" value="{{ title }}"
<# if ( 'video' === type ) { #>
placeholder="<?php esc_attr_e('Describe this video&hellip;'); ?>"
<# } else if ( 'audio' === type ) { #>
placeholder="<?php esc_attr_e('Describe this audio file&hellip;'); ?>"
<# } else { #>
placeholder="<?php esc_attr_e('Describe this media file&hellip;'); ?>"
<# } #>
>{{ title }}</textarea>
<# } #>/>
</label>
<# } #>
</script>
@ -1495,100 +1513,112 @@ function wp_print_media_templates( $attachment ) {
<script type="text/html" id="tmpl-attachment-display-settings">
<h3><?php _e('Attachment Display Settings'); ?></h3>
<h4><?php _e('Alignment'); ?></h4>
<div class="alignment button-group button-large"
data-setting="align"
<# if ( userSettings ) { #>
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"
<label class="setting">
<span><?php _e('Alignment'); ?></span>
<select class="alignment"
data-setting="align"
<# if ( userSettings ) { #>
data-user-setting="imgsize"
data-user-setting="align"
<# } #>>
<?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 value="left">
<?php esc_attr_e('Left'); ?>
</option>
<option value="center">
<?php esc_attr_e('Center'); ?>
</option>
<option value="right">
<?php esc_attr_e('Right'); ?>
</option>
<option value="none" selected>
<?php esc_attr_e('None'); ?>
</option>
</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 type="text/html" id="tmpl-gallery-settings">
<h3><?php _e('Gallery Settings'); ?></h3>
<h4><?php _e('Link To'); ?></h4>
<div class="link-to button-group"
data-setting="link">
<label class="setting">
<span><?php _e('Link To'); ?></span>
<select class="link-to"
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>
</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 value="post" selected>
<?php esc_attr_e('Attachment Page'); ?>
</option>
<?php endfor; ?>
</select>
<option value="file">
<?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 type="text/html" id="tmpl-editor-attachment">