WordPress.org
Get WordPress

Make WordPress Core

Changeset 8304


Ignore:
Timestamp:
07/10/2008 03:49:52 AM (18 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.