WordPress.org

Make WordPress Core

Changeset 8304


Ignore:
Timestamp:
07/10/2008 03:49:52 AM (13 years ago)
Author:
ryan
Message:

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

Location:
trunk
Files:
3 added
5 edited

Legend:

Unmodified
Added
Removed
  • trunk/wp-admin/css/media.css

    r7988 r8304  
    3333    display:block;
    3434    font-weight: bold;
     35    font-size: 13px;
    3536    margin-bottom: 0.5em;
    3637    margin: 0 0 0.5em 0;
     
    229230
    230231.filename {
     232    float: left;
    231233    line-height: 36px;
    232234    margin-left: 10px;
    233     float: left;
     235    overflow: hidden;
     236    max-width: 430px;
    234237}
    235238#media-upload .describe {
     
    277280    margin: 5px 0;
    278281}
     282
     283.menu_order {
     284    float: right;
     285    font-size: 11px;
     286    margin: 10px 10px 0;
     287}
     288
     289.menu_order_input {
     290    border: 1px solid #DDDDDD;
     291    font-size: 10px;
     292    padding: 1px;
     293    width: 23px;
     294}
     295
     296.ui-sortable-helper {
     297    background-color: #fff;
     298    border: 1px solid #aaa;
     299    opacity: 0.6;
     300    filter: alpha(opacity=60);
     301}
     302
     303#media-upload th.order-head {
     304     width: 25%;
     305     text-align: center;
     306}
     307
     308#media-upload .widefat {
     309    width: 626px;
     310    border-style: solid solid none;
     311}
     312
     313.sorthelper {
     314    z-index: -1;
     315}
  • trunk/wp-admin/gears-manifest.php

    r8290 r8304  
    6565{
    6666"betaManifestVersion" : 1,
    67 "version" : "<?php echo $man_version; ?>_20080704",
     67"version" : "<?php echo $man_version; ?>_20080709",
    6868"entries" : [
    6969<?php echo $defaults; ?>
     
    100100{ "url" : "images/loading-publish.gif" },
    101101{ "url" : "images/loading.gif" },
     102{ "url" : "images/required.gif" },
     103{ "url" : "images/no.png" },
     104{ "url" : "images/yes.png" },
    102105
    103106{ "url" : "../wp-includes/images/crystal/archive.png" },
  • trunk/wp-admin/includes/media.php

    r8265 r8304  
    2727
    2828function the_media_upload_tabs() {
     29    global $redir_tab;
    2930    $tabs = media_upload_tabs();
    3031
    3132    if ( !empty($tabs) ) {
    3233        echo "<ul id='sidemenu'>\n";
    33         if ( isset($_GET['tab']) && array_key_exists($_GET['tab'], $tabs) )
     34        if ( isset($redir_tab) && array_key_exists($redir_tab, $tabs) )
     35            $current = $redir_tab;
     36        elseif ( isset($_GET['tab']) && array_key_exists($_GET['tab'], $tabs) )
    3437            $current = $_GET['tab'];
    3538        else {
     
    155158            $content = $image_meta['caption'];
    156159    }
    157    
     160
    158161    $title = @$desc;
    159162
     
    326329    }
    327330
    328     if ( isset($_POST['save']) )
     331    if ( isset($_POST['save']) ) {
    329332        $errors['upload_notice'] = __('Saved.');
     333        return media_upload_gallery();
     334    }
    330335
    331336    return wp_iframe( 'media_upload_type_form', 'image', $errors, $id );
     
    337342        $file_array['tmp_name'] = download_url($file);
    338343        $desc = @$desc;
    339        
     344
    340345        $id = media_handle_sideload($file_array, $post_id, $desc);
    341346        $src = $id;
     
    386391    }
    387392
    388     if ( isset($_POST['save']) )
     393    if ( isset($_POST['save']) ) {
    389394        $errors['upload_notice'] = __('Saved.');
     395        return media_upload_gallery();
     396    }
    390397
    391398    return wp_iframe( 'media_upload_type_form', 'audio', $errors, $id );
     
    424431    }
    425432
    426     if ( isset($_POST['save']) )
     433    if ( isset($_POST['save']) ) {
    427434        $errors['upload_notice'] = __('Saved.');
     435        return media_upload_gallery();
     436    }
    428437
    429438    return wp_iframe( 'media_upload_type_form', 'video', $errors, $id );
     
    462471    }
    463472
    464     if ( isset($_POST['save']) )
     473    if ( isset($_POST['save']) ) {
    465474        $errors['upload_notice'] = __('Saved.');
     475        return media_upload_gallery();
     476    }
    466477
    467478    return wp_iframe( 'media_upload_type_form', 'file', $errors, $id );
     
    674685
    675686function get_media_item( $attachment_id, $args = null ) {
     687    global $redir_tab;
     688
    676689    $default_args = array( 'errors' => null, 'send' => true, 'delete' => true, 'toggle' => true );
    677690    $args = wp_parse_args( $args, $default_args );
     
    721734
    722735    $display_title = ( !empty( $title ) ) ? $title : $filename; // $title shouldn't ever be empty, but just in case
    723     $display_title = wp_html_excerpt($display_title, 100);
     736    $display_title = wp_html_excerpt($display_title, 60);
     737
     738    $gallery = ( (isset($_REQUEST['tab']) && 'gallery' == $_REQUEST['tab']) || (isset($redir_tab) && 'gallery' == $redir_tab) ) ? true : false;
     739    $order = '';
     740
     741    foreach ( $form_fields as $key => $val ) {
     742        if ( 'menu_order' == $key ) {
     743            if ( $gallery )
     744                $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>';
     745            else
     746                $order = '<input type="hidden" name="attachments['.$attachment_id.'][menu_order]" value="'.$val['value'].'" />';
     747
     748            unset($form_fields['menu_order']);
     749            break;
     750        }
     751    }
    724752
    725753    $item = "
    726754    $type
    727755    $toggle_links
     756    $order
    728757    <div class='filename new'>$display_title</div>
    729758    <table class='slidetoggle describe $class'>
     
    959988</div>
    960989
     990<script type="text/javascript">
     991//<![CDATA[
     992var addExtImage = {
     993
     994    width : '',
     995    height : '',
     996    align : 'alignnone',
     997
     998    insert : function() {
     999        var t = this, html, f = document.forms[0], cls, title = '', alt = '', caption = null;
     1000
     1001        if ( '' == f.src.value || '' == t.width ) return false;
     1002
     1003        if ( f.title.value ) {
     1004            title = f.title.value.replace(/['"<>]+/g, '');
     1005            title = ' title="'+title+'"';
     1006        }
     1007
     1008        if ( f.alt.value ) {
     1009            alt = f.alt.value.replace(/['"<>]+/g, '');
     1010            caption = f.alt.value.replace(/'/g, '&#39;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
     1011        }
     1012
     1013        cls = caption ? '' : ' class="'+t.align+'"';
     1014
     1015        html = '<img alt="'+alt+'" src="'+f.src.value+'"'+title+cls+' width="'+t.width+'" height="'+t.height+'" />';
     1016
     1017        if ( f.url.value )
     1018            html = '<a href="'+f.url.value+'">'+html+'</a>';
     1019
     1020        if ( caption )
     1021            html = '[wp_caption id="" align="'+t.align+'" width="'+t.width+'" caption="'+caption+'"]'+html+'[/wp_caption]';
     1022
     1023        var win = window.dialogArguments || opener || parent || top;
     1024        win.send_to_editor(html);
     1025    },
     1026
     1027    resetImageData : function() {
     1028        var t = addExtImage;
     1029
     1030        t.width = t.height = '';
     1031        document.getElementById('go_button').style.color = '#bbb';
     1032        if ( ! document.forms[0].src.value )
     1033            document.getElementById('status_img').src = 'images/required.gif';
     1034        else document.getElementById('status_img').src = 'images/no.png';
     1035    },
     1036
     1037    updateImageData : function() {
     1038        var t = addExtImage;
     1039
     1040        t.width = t.preloadImg.width;
     1041        t.height = t.preloadImg.height;
     1042        document.getElementById('go_button').style.color = '#333';
     1043        document.getElementById('status_img').src = 'images/yes.png';
     1044    },
     1045
     1046    getImageData : function() {
     1047        var t = addExtImage, src = document.forms[0].src.value;
     1048
     1049        if ( ! src ) {
     1050            t.resetImageData();
     1051            return false;
     1052        }
     1053        document.getElementById('status_img').src = 'images/loading.gif';
     1054        t.preloadImg = new Image();
     1055        t.preloadImg.onload = t.updateImageData;
     1056        t.preloadImg.onerror = t.resetImageData;
     1057        t.preloadImg.src = src;
     1058    }
     1059}
     1060//]]>
     1061</script>
     1062
    9611063<div id="media-items">
    9621064<div class="media-item media-blank">
     
    9701072
    9711073function media_upload_gallery_form($errors) {
     1074    global $redir_tab;
     1075
     1076    $redir_tab = 'gallery';
    9721077    media_upload_header();
    9731078
    9741079    $post_id = intval($_REQUEST['post_id']);
    975 
    9761080    $form_action_url = admin_url("media-upload.php?type={$GLOBALS['type']}&tab=gallery&post_id=$post_id");
    977 
    9781081?>
    9791082
     
    9931096<?php wp_nonce_field('media-form'); ?>
    9941097<?php //media_upload_form( $errors ); ?>
    995 
     1098<table class="widefat">
     1099<thead><tr>
     1100<th><?php _e('Media'); ?></th>
     1101<th class="order-head"><?php _e('Order'); ?></th>
     1102</tr></thead>
     1103</table>
    9961104<div id="media-items">
    9971105<?php echo get_media_items($post_id, $errors); ?>
    9981106</div>
     1107<p class="ml-submit">
    9991108<input type="submit" class="button savebutton" name="save" value="<?php echo attribute_escape( __( 'Save all changes' ) ); ?>" />
    10001109<input type="submit" class="button insert-gallery" name="insert-gallery" value="<?php echo attribute_escape( __( 'Insert gallery into post' ) ); ?>" />
     
    10021111<input type="hidden" name="type" value="<?php echo attribute_escape( $GLOBALS['type'] ); ?>" />
    10031112<input type="hidden" name="tab" value="<?php echo attribute_escape( $GLOBALS['tab'] ); ?>" />
     1113</p>
    10041114</form>
    10051115<?php
     
    11561266    <table class="describe"><tbody>
    11571267        <tr>
     1268            <th valign="top" scope="row" class="label" style="width:120px;">
     1269                <span class="alignleft"><label for="src">' . __('Source') . '</label></span>
     1270                <span class="alignright"><img id="status_img" src="images/required.gif" title="required" alt="required" /></span>
     1271            </th>
     1272            <td class="field"><input id="src" name="src" value="" type="text" aria-required="true" onblur="addExtImage.getImageData()"></td>
     1273        </tr>
     1274
     1275        <tr>
    11581276            <th valign="top" scope="row" class="label">
    1159                 <span class="alignleft"><label for="insertonly[src]">' . __('Image URL') . '</label></span>
     1277                <span class="alignleft"><label for="title">' . __('Image Title') . '</label></span>
    11601278                <span class="alignright"><abbr title="required" class="required">*</abbr></span>
    11611279            </th>
    1162             <td class="field"><input id="insertonly[src]" name="insertonly[src]" value="" type="text" aria-required="true"></td>
    1163         </tr>
     1280            <td class="field"><p><input id="title" name="title" value="" type="text" aria-required="true" /></p></td>
     1281        </tr>
     1282
    11641283        <tr>
    11651284            <th valign="top" scope="row" class="label">
    1166                 <span class="alignleft"><label for="insertonly[alt]">' . __('Description') . '</label></span>
    1167                 <span class="alignright"><abbr title="required" class="required">*</abbr></span>
     1285                <span class="alignleft"><label for="alt">' . __('Image Caption') . '</label></span>
    11681286            </th>
    1169             <td class="field"><input id="insertonly[alt]" name="insertonly[alt]" value="" type="text" aria-required="true"></td>
    1170         </tr>
    1171         <tr><td></td><td class="help">' . __('Alternate text, e.g. "The Mona Lisa"') . '</td></tr>
     1287            <td class="field"><input id="alt" name="alt" value="" type="text" aria-required="true" />
     1288            <p class="help">' . __('Also used as alternate text for the image') . '</p></td>
     1289        </tr>
     1290
    11721291        <tr class="align">
    1173             <th valign="top" scope="row" class="label"><label for="insertonly[align]">' . __('Alignment') . '</label></th>
     1292            <th valign="top" scope="row" class="label"><p><label for="align">' . __('Alignment') . '</label></p></th>
    11741293            <td class="field">
    1175                 <input name="insertonly[align]" id="image-align-none-0" value="none" type="radio" checked="checked" />
    1176                 <label for="image-align-none-0" class="align image-align-none-label">' . __('None') . '</label>
    1177                 <input name="insertonly[align]" id="image-align-left-0" value="left" type="radio" />
    1178                 <label for="image-align-left-0" class="align image-align-left-label">' . __('Left') . '</label>
    1179                 <input name="insertonly[align]" id="image-align-center-0" value="center" type="radio" />
    1180                 <label for="image-align-center-0" class="align image-align-center-label">' . __('Center') . '</label>
    1181                 <input name="insertonly[align]" id="image-align-right-0" value="right" type="radio" />
    1182                 <label for="image-align-right-0" class="align image-align-right-label">' . __('Right') . '</label>
     1294                <input name="align" id="align-none" value="alignnone" onclick="addExtImage.align=this.value" type="radio" checked="checked" />
     1295                <label for="align-none" class="align image-align-none-label">' . __('None') . '</label>
     1296                <input name="align" id="align-left" value="alignleft" onclick="addExtImage.align=this.value" type="radio" />
     1297                <label for="align-left" class="align image-align-left-label">' . __('Left') . '</label>
     1298                <input name="align" id="align-center" value="aligncenter" onclick="addExtImage.align=this.value" type="radio" />
     1299                <label for="align-center" class="align image-align-center-label">' . __('Center') . '</label>
     1300                <input name="align" id="align-right" value="alignright" onclick="addExtImage.align=this.value" type="radio" />
     1301                <label for="align-right" class="align image-align-right-label">' . __('Right') . '</label>
    11831302            </td>
    11841303        </tr>
     1304
     1305        <tr>
     1306            <th valign="top" scope="row" class="label">
     1307                <span class="alignleft"><label for="url">' . __('Link URL') . '</label></span>
     1308            </th>
     1309            <td class="field"><input id="url" name="url" value="" type="text" /><br />
     1310
     1311            <button type="button" class="button" value="" onclick="document.forms[0].url.value=null">' . __('None') . '</button>
     1312            <button type="button" class="button" value="" onclick="document.forms[0].url.value=document.forms[0].src.value">' . __('Link to image') . '</button>
     1313            <p class="help">' . __('Enter a link URL or click above for presets.') . '</p></td>
     1314        </tr>
     1315
    11851316        <tr>
    11861317            <td></td>
    11871318            <td>
    1188                 <input type="submit" class="button" name="insertonlybutton" value="' . attribute_escape(__('Insert into Post')) . '" />
     1319                <input type="button" class="button" id="go_button" style="color:#bbb;" onclick="addExtImage.insert()" value="' . attribute_escape(__('Insert into Post')) . '" />
    11891320            </td>
    11901321        </tr>
  • trunk/wp-admin/js/gallery.js

    r8259 r8304  
    55            items: '.media-item',
    66            placeholder: 'sorthelper',
     7            axis: 'y',
     8            distance: 2,
    79            update: galleryReorder
    810        } );
     
    1214    var galleryReorder = function(e, sort) {
    1315        jQuery.each(sort['element'].sortable('toArray'), function(i, id) {
    14             jQuery('#' + id + ' .menu_order input')[0].value = i;
     16            jQuery('#' + id + ' .menu_order input')[0].value = (1+i);
    1517        });
    1618    }
     
    1921    gallerySortableInit();
    2022});
     23
     24jQuery(document).ready(function($){
     25    $('.menu_order_input').each(function(){
     26        if ( this.value == '0' ) this.value = '';
     27    });
     28});
  • trunk/wp-includes/script-loader.php

    r8297 r8304  
    159159            'edit' => __('Edit'),
    160160        ) );
    161         $scripts->add( 'admin-gallery', '/wp-admin/js/gallery.js', array( 'jquery-ui-sortable' ), '20080705' );
     161        $scripts->add( 'admin-gallery', '/wp-admin/js/gallery.js', array( 'jquery-ui-sortable' ), '20080709' );
    162162        $scripts->add( 'media-upload', '/wp-admin/js/media-upload.js', array( 'thickbox' ), '20080702' );
    163163        $scripts->localize( 'upload', 'uploadL10n', array(
     
    225225
    226226    $styles->add( 'global', '/wp-admin/css/global.css' );
    227     $styles->add( 'media', '/wp-admin/css/media.css', array(), '20080523' );
     227    $styles->add( 'media', '/wp-admin/css/media.css', array(), '20080709' );
    228228    $styles->add( 'widgets', '/wp-admin/css/widgets.css' );
    229229    $styles->add( 'dashboard', '/wp-admin/css/dashboard.css' );
Note: See TracChangeset for help on using the changeset viewer.