Media Uploader improvements from azaozz: Improves the insert external image dialog, redirects to the gallery tab after "Save all changes" is clicked, shows the "Order" fields on the closed tabs, where they are easier to use, and only in the Gallery. see #7274
git-svn-id: https://develop.svn.wordpress.org/trunk@8304 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Ryan Boren
parent
002de2af3b
commit
261e73a0ff
|
|
@ -32,6 +32,7 @@ form {
|
|||
.media-upload-form label, .media-upload-form legend {
|
||||
display:block;
|
||||
font-weight: bold;
|
||||
font-size: 13px;
|
||||
margin-bottom: 0.5em;
|
||||
margin: 0 0 0.5em 0;
|
||||
}
|
||||
|
|
@ -228,9 +229,11 @@ abbr.required {
|
|||
}
|
||||
|
||||
.filename {
|
||||
float: left;
|
||||
line-height: 36px;
|
||||
margin-left: 10px;
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
max-width: 430px;
|
||||
}
|
||||
#media-upload .describe {
|
||||
border-top-width: 1px;
|
||||
|
|
@ -276,3 +279,37 @@ abbr.required {
|
|||
display: none;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.menu_order {
|
||||
float: right;
|
||||
font-size: 11px;
|
||||
margin: 10px 10px 0;
|
||||
}
|
||||
|
||||
.menu_order_input {
|
||||
border: 1px solid #DDDDDD;
|
||||
font-size: 10px;
|
||||
padding: 1px;
|
||||
width: 23px;
|
||||
}
|
||||
|
||||
.ui-sortable-helper {
|
||||
background-color: #fff;
|
||||
border: 1px solid #aaa;
|
||||
opacity: 0.6;
|
||||
filter: alpha(opacity=60);
|
||||
}
|
||||
|
||||
#media-upload th.order-head {
|
||||
width: 25%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#media-upload .widefat {
|
||||
width: 626px;
|
||||
border-style: solid solid none;
|
||||
}
|
||||
|
||||
.sorthelper {
|
||||
z-index: -1;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@ header( 'Content-Type: application/x-javascript; charset=UTF-8' );
|
|||
?>
|
||||
{
|
||||
"betaManifestVersion" : 1,
|
||||
"version" : "<?php echo $man_version; ?>_20080704",
|
||||
"version" : "<?php echo $man_version; ?>_20080709",
|
||||
"entries" : [
|
||||
<?php echo $defaults; ?>
|
||||
|
||||
|
|
@ -99,6 +99,9 @@ header( 'Content-Type: application/x-javascript; charset=UTF-8' );
|
|||
{ "url" : "images/xit.gif" },
|
||||
{ "url" : "images/loading-publish.gif" },
|
||||
{ "url" : "images/loading.gif" },
|
||||
{ "url" : "images/required.gif" },
|
||||
{ "url" : "images/no.png" },
|
||||
{ "url" : "images/yes.png" },
|
||||
|
||||
{ "url" : "../wp-includes/images/crystal/archive.png" },
|
||||
{ "url" : "../wp-includes/images/crystal/audio.png" },
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 792 B |
Binary file not shown.
|
After Width: | Height: | Size: 62 B |
Binary file not shown.
|
After Width: | Height: | Size: 612 B |
|
|
@ -26,11 +26,14 @@ function update_gallery_tab($tabs) {
|
|||
add_filter('media_upload_tabs', 'update_gallery_tab');
|
||||
|
||||
function the_media_upload_tabs() {
|
||||
global $redir_tab;
|
||||
$tabs = media_upload_tabs();
|
||||
|
||||
if ( !empty($tabs) ) {
|
||||
echo "<ul id='sidemenu'>\n";
|
||||
if ( isset($_GET['tab']) && array_key_exists($_GET['tab'], $tabs) )
|
||||
if ( isset($redir_tab) && array_key_exists($redir_tab, $tabs) )
|
||||
$current = $redir_tab;
|
||||
elseif ( isset($_GET['tab']) && array_key_exists($_GET['tab'], $tabs) )
|
||||
$current = $_GET['tab'];
|
||||
else {
|
||||
$keys = array_keys($tabs);
|
||||
|
|
@ -154,7 +157,7 @@ function media_handle_sideload($file_array, $post_id, $desc = null, $post_data =
|
|||
if ( trim($image_meta['caption']) )
|
||||
$content = $image_meta['caption'];
|
||||
}
|
||||
|
||||
|
||||
$title = @$desc;
|
||||
|
||||
// Construct the attachment array
|
||||
|
|
@ -325,8 +328,10 @@ function media_upload_image() {
|
|||
$errors = $return;
|
||||
}
|
||||
|
||||
if ( isset($_POST['save']) )
|
||||
if ( isset($_POST['save']) ) {
|
||||
$errors['upload_notice'] = __('Saved.');
|
||||
return media_upload_gallery();
|
||||
}
|
||||
|
||||
return wp_iframe( 'media_upload_type_form', 'image', $errors, $id );
|
||||
}
|
||||
|
|
@ -336,7 +341,7 @@ function media_sideload_image($file, $post_id, $desc = null) {
|
|||
$file_array['name'] = basename($file);
|
||||
$file_array['tmp_name'] = download_url($file);
|
||||
$desc = @$desc;
|
||||
|
||||
|
||||
$id = media_handle_sideload($file_array, $post_id, $desc);
|
||||
$src = $id;
|
||||
|
||||
|
|
@ -385,8 +390,10 @@ function media_upload_audio() {
|
|||
$errors = $return;
|
||||
}
|
||||
|
||||
if ( isset($_POST['save']) )
|
||||
if ( isset($_POST['save']) ) {
|
||||
$errors['upload_notice'] = __('Saved.');
|
||||
return media_upload_gallery();
|
||||
}
|
||||
|
||||
return wp_iframe( 'media_upload_type_form', 'audio', $errors, $id );
|
||||
}
|
||||
|
|
@ -423,8 +430,10 @@ function media_upload_video() {
|
|||
$errors = $return;
|
||||
}
|
||||
|
||||
if ( isset($_POST['save']) )
|
||||
if ( isset($_POST['save']) ) {
|
||||
$errors['upload_notice'] = __('Saved.');
|
||||
return media_upload_gallery();
|
||||
}
|
||||
|
||||
return wp_iframe( 'media_upload_type_form', 'video', $errors, $id );
|
||||
}
|
||||
|
|
@ -461,8 +470,10 @@ function media_upload_file() {
|
|||
$errors = $return;
|
||||
}
|
||||
|
||||
if ( isset($_POST['save']) )
|
||||
if ( isset($_POST['save']) ) {
|
||||
$errors['upload_notice'] = __('Saved.');
|
||||
return media_upload_gallery();
|
||||
}
|
||||
|
||||
return wp_iframe( 'media_upload_type_form', 'file', $errors, $id );
|
||||
}
|
||||
|
|
@ -673,6 +684,8 @@ function get_media_items( $post_id, $errors ) {
|
|||
}
|
||||
|
||||
function get_media_item( $attachment_id, $args = null ) {
|
||||
global $redir_tab;
|
||||
|
||||
$default_args = array( 'errors' => null, 'send' => true, 'delete' => true, 'toggle' => true );
|
||||
$args = wp_parse_args( $args, $default_args );
|
||||
extract( $args, EXTR_SKIP );
|
||||
|
|
@ -720,11 +733,27 @@ function get_media_item( $attachment_id, $args = null ) {
|
|||
}
|
||||
|
||||
$display_title = ( !empty( $title ) ) ? $title : $filename; // $title shouldn't ever be empty, but just in case
|
||||
$display_title = wp_html_excerpt($display_title, 100);
|
||||
$display_title = wp_html_excerpt($display_title, 60);
|
||||
|
||||
$gallery = ( (isset($_REQUEST['tab']) && 'gallery' == $_REQUEST['tab']) || (isset($redir_tab) && 'gallery' == $redir_tab) ) ? true : false;
|
||||
$order = '';
|
||||
|
||||
foreach ( $form_fields as $key => $val ) {
|
||||
if ( 'menu_order' == $key ) {
|
||||
if ( $gallery )
|
||||
$order = '<div class="menu_order"> <input class="menu_order_input" type="text" id="attachments['.$attachment_id.'][menu_order]" name="attachments['.$attachment_id.'][menu_order]" value="'.$val['value'].'" /></div>';
|
||||
else
|
||||
$order = '<input type="hidden" name="attachments['.$attachment_id.'][menu_order]" value="'.$val['value'].'" />';
|
||||
|
||||
unset($form_fields['menu_order']);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
$item = "
|
||||
$type
|
||||
$toggle_links
|
||||
$order
|
||||
<div class='filename new'>$display_title</div>
|
||||
<table class='slidetoggle describe $class'>
|
||||
<thead class='media-item-info'>
|
||||
|
|
@ -958,6 +987,79 @@ jQuery(function($){
|
|||
<h3><?php _e('From URL'); ?></h3>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
//<![CDATA[
|
||||
var addExtImage = {
|
||||
|
||||
width : '',
|
||||
height : '',
|
||||
align : 'alignnone',
|
||||
|
||||
insert : function() {
|
||||
var t = this, html, f = document.forms[0], cls, title = '', alt = '', caption = null;
|
||||
|
||||
if ( '' == f.src.value || '' == t.width ) return false;
|
||||
|
||||
if ( f.title.value ) {
|
||||
title = f.title.value.replace(/['"<>]+/g, '');
|
||||
title = ' title="'+title+'"';
|
||||
}
|
||||
|
||||
if ( f.alt.value ) {
|
||||
alt = f.alt.value.replace(/['"<>]+/g, '');
|
||||
caption = f.alt.value.replace(/'/g, ''').replace(/"/g, '"').replace(/</g, '<').replace(/>/g, '>');
|
||||
}
|
||||
|
||||
cls = caption ? '' : ' class="'+t.align+'"';
|
||||
|
||||
html = '<img alt="'+alt+'" src="'+f.src.value+'"'+title+cls+' width="'+t.width+'" height="'+t.height+'" />';
|
||||
|
||||
if ( f.url.value )
|
||||
html = '<a href="'+f.url.value+'">'+html+'</a>';
|
||||
|
||||
if ( caption )
|
||||
html = '[wp_caption id="" align="'+t.align+'" width="'+t.width+'" caption="'+caption+'"]'+html+'[/wp_caption]';
|
||||
|
||||
var win = window.dialogArguments || opener || parent || top;
|
||||
win.send_to_editor(html);
|
||||
},
|
||||
|
||||
resetImageData : function() {
|
||||
var t = addExtImage;
|
||||
|
||||
t.width = t.height = '';
|
||||
document.getElementById('go_button').style.color = '#bbb';
|
||||
if ( ! document.forms[0].src.value )
|
||||
document.getElementById('status_img').src = 'images/required.gif';
|
||||
else document.getElementById('status_img').src = 'images/no.png';
|
||||
},
|
||||
|
||||
updateImageData : function() {
|
||||
var t = addExtImage;
|
||||
|
||||
t.width = t.preloadImg.width;
|
||||
t.height = t.preloadImg.height;
|
||||
document.getElementById('go_button').style.color = '#333';
|
||||
document.getElementById('status_img').src = 'images/yes.png';
|
||||
},
|
||||
|
||||
getImageData : function() {
|
||||
var t = addExtImage, src = document.forms[0].src.value;
|
||||
|
||||
if ( ! src ) {
|
||||
t.resetImageData();
|
||||
return false;
|
||||
}
|
||||
document.getElementById('status_img').src = 'images/loading.gif';
|
||||
t.preloadImg = new Image();
|
||||
t.preloadImg.onload = t.updateImageData;
|
||||
t.preloadImg.onerror = t.resetImageData;
|
||||
t.preloadImg.src = src;
|
||||
}
|
||||
}
|
||||
//]]>
|
||||
</script>
|
||||
|
||||
<div id="media-items">
|
||||
<div class="media-item media-blank">
|
||||
<?php echo call_user_func($callback); ?>
|
||||
|
|
@ -969,12 +1071,13 @@ jQuery(function($){
|
|||
}
|
||||
|
||||
function media_upload_gallery_form($errors) {
|
||||
global $redir_tab;
|
||||
|
||||
$redir_tab = 'gallery';
|
||||
media_upload_header();
|
||||
|
||||
$post_id = intval($_REQUEST['post_id']);
|
||||
|
||||
$form_action_url = admin_url("media-upload.php?type={$GLOBALS['type']}&tab=gallery&post_id=$post_id");
|
||||
|
||||
?>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
|
@ -992,15 +1095,22 @@ jQuery(function($){
|
|||
<form enctype="multipart/form-data" method="post" action="<?php echo attribute_escape($form_action_url); ?>" class="media-upload-form validate" id="gallery-form">
|
||||
<?php wp_nonce_field('media-form'); ?>
|
||||
<?php //media_upload_form( $errors ); ?>
|
||||
|
||||
<table class="widefat">
|
||||
<thead><tr>
|
||||
<th><?php _e('Media'); ?></th>
|
||||
<th class="order-head"><?php _e('Order'); ?></th>
|
||||
</tr></thead>
|
||||
</table>
|
||||
<div id="media-items">
|
||||
<?php echo get_media_items($post_id, $errors); ?>
|
||||
</div>
|
||||
<p class="ml-submit">
|
||||
<input type="submit" class="button savebutton" name="save" value="<?php echo attribute_escape( __( 'Save all changes' ) ); ?>" />
|
||||
<input type="submit" class="button insert-gallery" name="insert-gallery" value="<?php echo attribute_escape( __( 'Insert gallery into post' ) ); ?>" />
|
||||
<input type="hidden" name="post_id" id="post_id" value="<?php echo (int) $post_id; ?>" />
|
||||
<input type="hidden" name="type" value="<?php echo attribute_escape( $GLOBALS['type'] ); ?>" />
|
||||
<input type="hidden" name="tab" value="<?php echo attribute_escape( $GLOBALS['tab'] ); ?>" />
|
||||
</p>
|
||||
</form>
|
||||
<?php
|
||||
}
|
||||
|
|
@ -1155,37 +1265,58 @@ function type_form_image() {
|
|||
return '
|
||||
<table class="describe"><tbody>
|
||||
<tr>
|
||||
<th valign="top" scope="row" class="label">
|
||||
<span class="alignleft"><label for="insertonly[src]">' . __('Image URL') . '</label></span>
|
||||
<span class="alignright"><abbr title="required" class="required">*</abbr></span>
|
||||
<th valign="top" scope="row" class="label" style="width:120px;">
|
||||
<span class="alignleft"><label for="src">' . __('Source') . '</label></span>
|
||||
<span class="alignright"><img id="status_img" src="images/required.gif" title="required" alt="required" /></span>
|
||||
</th>
|
||||
<td class="field"><input id="insertonly[src]" name="insertonly[src]" value="" type="text" aria-required="true"></td>
|
||||
<td class="field"><input id="src" name="src" value="" type="text" aria-required="true" onblur="addExtImage.getImageData()"></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th valign="top" scope="row" class="label">
|
||||
<span class="alignleft"><label for="insertonly[alt]">' . __('Description') . '</label></span>
|
||||
<span class="alignleft"><label for="title">' . __('Image Title') . '</label></span>
|
||||
<span class="alignright"><abbr title="required" class="required">*</abbr></span>
|
||||
</th>
|
||||
<td class="field"><input id="insertonly[alt]" name="insertonly[alt]" value="" type="text" aria-required="true"></td>
|
||||
<td class="field"><p><input id="title" name="title" value="" type="text" aria-required="true" /></p></td>
|
||||
</tr>
|
||||
<tr><td></td><td class="help">' . __('Alternate text, e.g. "The Mona Lisa"') . '</td></tr>
|
||||
|
||||
<tr>
|
||||
<th valign="top" scope="row" class="label">
|
||||
<span class="alignleft"><label for="alt">' . __('Image Caption') . '</label></span>
|
||||
</th>
|
||||
<td class="field"><input id="alt" name="alt" value="" type="text" aria-required="true" />
|
||||
<p class="help">' . __('Also used as alternate text for the image') . '</p></td>
|
||||
</tr>
|
||||
|
||||
<tr class="align">
|
||||
<th valign="top" scope="row" class="label"><label for="insertonly[align]">' . __('Alignment') . '</label></th>
|
||||
<th valign="top" scope="row" class="label"><p><label for="align">' . __('Alignment') . '</label></p></th>
|
||||
<td class="field">
|
||||
<input name="insertonly[align]" id="image-align-none-0" value="none" type="radio" checked="checked" />
|
||||
<label for="image-align-none-0" class="align image-align-none-label">' . __('None') . '</label>
|
||||
<input name="insertonly[align]" id="image-align-left-0" value="left" type="radio" />
|
||||
<label for="image-align-left-0" class="align image-align-left-label">' . __('Left') . '</label>
|
||||
<input name="insertonly[align]" id="image-align-center-0" value="center" type="radio" />
|
||||
<label for="image-align-center-0" class="align image-align-center-label">' . __('Center') . '</label>
|
||||
<input name="insertonly[align]" id="image-align-right-0" value="right" type="radio" />
|
||||
<label for="image-align-right-0" class="align image-align-right-label">' . __('Right') . '</label>
|
||||
<input name="align" id="align-none" value="alignnone" onclick="addExtImage.align=this.value" type="radio" checked="checked" />
|
||||
<label for="align-none" class="align image-align-none-label">' . __('None') . '</label>
|
||||
<input name="align" id="align-left" value="alignleft" onclick="addExtImage.align=this.value" type="radio" />
|
||||
<label for="align-left" class="align image-align-left-label">' . __('Left') . '</label>
|
||||
<input name="align" id="align-center" value="aligncenter" onclick="addExtImage.align=this.value" type="radio" />
|
||||
<label for="align-center" class="align image-align-center-label">' . __('Center') . '</label>
|
||||
<input name="align" id="align-right" value="alignright" onclick="addExtImage.align=this.value" type="radio" />
|
||||
<label for="align-right" class="align image-align-right-label">' . __('Right') . '</label>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th valign="top" scope="row" class="label">
|
||||
<span class="alignleft"><label for="url">' . __('Link URL') . '</label></span>
|
||||
</th>
|
||||
<td class="field"><input id="url" name="url" value="" type="text" /><br />
|
||||
|
||||
<button type="button" class="button" value="" onclick="document.forms[0].url.value=null">' . __('None') . '</button>
|
||||
<button type="button" class="button" value="" onclick="document.forms[0].url.value=document.forms[0].src.value">' . __('Link to image') . '</button>
|
||||
<p class="help">' . __('Enter a link URL or click above for presets.') . '</p></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>
|
||||
<input type="submit" class="button" name="insertonlybutton" value="' . attribute_escape(__('Insert into Post')) . '" />
|
||||
<input type="button" class="button" id="go_button" style="color:#bbb;" onclick="addExtImage.insert()" value="' . attribute_escape(__('Insert into Post')) . '" />
|
||||
</td>
|
||||
</tr>
|
||||
</tbody></table>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,8 @@ jQuery(function($) {
|
|||
gallerySortable = $('#media-items').sortable( {
|
||||
items: '.media-item',
|
||||
placeholder: 'sorthelper',
|
||||
axis: 'y',
|
||||
distance: 2,
|
||||
update: galleryReorder
|
||||
} );
|
||||
}
|
||||
|
|
@ -11,10 +13,16 @@ jQuery(function($) {
|
|||
// When an update has occurred, adjust the order for each item
|
||||
var galleryReorder = function(e, sort) {
|
||||
jQuery.each(sort['element'].sortable('toArray'), function(i, id) {
|
||||
jQuery('#' + id + ' .menu_order input')[0].value = i;
|
||||
jQuery('#' + id + ' .menu_order input')[0].value = (1+i);
|
||||
});
|
||||
}
|
||||
|
||||
// initialize sortable
|
||||
gallerySortableInit();
|
||||
});
|
||||
|
||||
jQuery(document).ready(function($){
|
||||
$('.menu_order_input').each(function(){
|
||||
if ( this.value == '0' ) this.value = '';
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -158,7 +158,7 @@ function wp_default_scripts( &$scripts ) {
|
|||
'cancel' => __('Cancel'),
|
||||
'edit' => __('Edit'),
|
||||
) );
|
||||
$scripts->add( 'admin-gallery', '/wp-admin/js/gallery.js', array( 'jquery-ui-sortable' ), '20080705' );
|
||||
$scripts->add( 'admin-gallery', '/wp-admin/js/gallery.js', array( 'jquery-ui-sortable' ), '20080709' );
|
||||
$scripts->add( 'media-upload', '/wp-admin/js/media-upload.js', array( 'thickbox' ), '20080702' );
|
||||
$scripts->localize( 'upload', 'uploadL10n', array(
|
||||
'browseTitle' => attribute_escape(__('Browse your files')),
|
||||
|
|
@ -224,7 +224,7 @@ function wp_default_styles( &$styles ) {
|
|||
$styles->add_data( 'colors-fresh', 'rtl', true );
|
||||
|
||||
$styles->add( 'global', '/wp-admin/css/global.css' );
|
||||
$styles->add( 'media', '/wp-admin/css/media.css', array(), '20080523' );
|
||||
$styles->add( 'media', '/wp-admin/css/media.css', array(), '20080709' );
|
||||
$styles->add( 'widgets', '/wp-admin/css/widgets.css' );
|
||||
$styles->add( 'dashboard', '/wp-admin/css/dashboard.css' );
|
||||
$styles->add( 'install', '/wp-admin/css/install.css', array(), '20080708' );
|
||||
|
|
|
|||
Loading…
Reference in New Issue