WordPress.org
Get WordPress

Make WordPress Core

Changeset 23095


Ignore:
Timestamp:
12/06/2012 05:52:19 AM (14 years ago)
Author:
markjaquith
Message:

Add the ability to click "Edit" and kick out to the advanced image editor from within the Media modal. New window, with "Refresh" offered on your return. fixes #22743. props koopersmith, nacin, helenyhou.

Location:
trunk
Files:
6 edited

Legend:

Unmodified
Added
Removed

  • trunk/wp-admin/css/wp-admin.css

    r23083 r23095  
    41514151}
    41524152
     4153.post-php .imgedit-wrap table {
     4154        width: 100%;
     4155}
     4156
    41534157.describe .imgedit-wrap table td,
    41544158.wp_attachment_holder .imgedit-wrap table td {
    … …  
    41574161}
    41584162
    4159 .imgedit-wrap p,
    4160 .describe .imgedit-wrap table td {
    4161         font-size: 11px;
    4162         line-height: 18px;
    4163 }
    4164 
    41654163.describe .imgedit-wrap table td.imgedit-settings {
    41664164        padding: 0 5px;
    41674165}
    41684166
     4167.wp_attachment_holder .imgedit-wrap table td.imgedit-settings {
     4168        width: 250px;
     4169}
     4170
    41694171td.imgedit-settings input {
     4172        margin-top: 0;
    41704173        vertical-align: middle;
    41714174}
    … …  
    43504353}
    43514354
    4352 .imgedit-help ul li {
    4353         font-size: 11px;
    4354 }
    4355 
    43564355a.imgedit-help-toggle {
    43574356        text-decoration: none;
    4358 }
    4359 
    4360 #wpbody-content .imgedit-response div {
    4361         width: 600px;
    4362         margin: 8px;
    43634357}
    43644358
    … …  
    43904384        border-width: 1px;
    43914385        border-style: solid;
    4392         -webkit-border-radius: 8px;
    4393         border-radius: 8px;
     4386        -webkit-border-radius: 3px;
     4387        border-radius: 3px;
    43944388        margin-bottom: 8px;
    43954389        padding: 2px 10px;

  • trunk/wp-admin/includes/image-edit.php

    r22863 r23095  
    192192        </tbody></table>
    193193        <div class="imgedit-wait" id="imgedit-wait-<?php echo $post_id; ?>"></div>
    194         <script type="text/javascript">imageEdit.init(<?php echo $post_id; ?>);</script>
     194        <script type="text/javascript">jQuery( function() { imageEdit.init(<?php echo $post_id; ?>); });</script>
    195195        <div class="hidden" id="imgedit-leaving-<?php echo $post_id; ?>"><?php _e("There are unsaved changes that will be lost. 'OK' to continue, 'Cancel' to return to the Image Editor."); ?></div>
    196196        </div>

  • trunk/wp-admin/includes/media.php

    r23086 r23095  
    22712271        $post = get_post();
    22722272
     2273        $open = isset( $_GET['image-editor'] );
     2274        if ( $open )
     2275                require_once ABSPATH . 'wp-admin/includes/image-edit.php';
     2276
    22732277        $thumb_url = false;
    22742278        if ( $attachment_id = intval( $post->ID ) )
    2275                 $thumb_url = wp_get_attachment_image_src( $attachment_id, array( 900, 600 ), true );
     2279                $thumb_url = wp_get_attachment_image_src( $attachment_id, array( 900, 450 ), true );
    22762280
    22772281        $filename = esc_html( basename( $post->guid ) );
    22782282        $title = esc_attr( $post->post_title );
    22792283        $alt_text = get_post_meta( $post->ID, '_wp_attachment_image_alt', true );
    2280 
    2281         $media_dims = '';
    2282         $meta = wp_get_attachment_metadata( $post->ID );
    2283         if ( is_array( $meta ) && array_key_exists( 'width', $meta ) && array_key_exists( 'height', $meta ) )
    2284                 $media_dims .= "<span id='media-dims-$post->ID'>{$meta['width']}&nbsp;&times;&nbsp;{$meta['height']}</span> ";
    2285         $media_dims = apply_filters( 'media_meta', $media_dims, $post );
    22862284
    22872285        $att_url = wp_get_attachment_url( $post->ID );
    … …  
    22972295                <div class="imgedit-response" id="imgedit-response-<?php echo $attachment_id; ?>"></div>
    22982296
    2299                 <div class="wp_attachment_image" id="media-head-<?php echo $attachment_id; ?>">
     2297                <div<?php if ( $open ) echo ' style="display:none"'; ?> class="wp_attachment_image" id="media-head-<?php echo $attachment_id; ?>">
    23002298                        <p id="thumbnail-head-<?php echo $attachment_id; ?>"><img class="thumbnail" src="<?php echo set_url_scheme( $thumb_url[0] ); ?>" style="max-width:100%" alt="" /></p>
    23012299                        <p><?php echo $image_edit_button; ?></p>
    23022300                </div>
    2303                 <div style="display:none" class="image-editor" id="image-editor-<?php echo $attachment_id; ?>"></div>
     2301                <div<?php if ( ! $open ) echo ' style="display:none"'; ?> class="image-editor" id="image-editor-<?php echo $attachment_id; ?>">
     2302                        <?php if ( $open ) wp_image_editor( $attachment_id ); ?>
     2303                </div>
    23042304        </div>
    23052305        <?php endif; ?>

  • trunk/wp-includes/css/media-views.css

    r23077 r23095  
    13091309        max-width: 120px;
    13101310        max-height: 120px;
     1311        margin-top: 5px;
    13111312        margin-right: 10px;
    13121313        margin-bottom: 5px;
    … …  
    13481349}
    13491350
    1350 .attachment-info .delete-attachment a {
    1351         color: red;
    1352         padding: 2px 4px;
    1353         margin: -2px -4px;
     1351.attachment-info .edit-attachment,
     1352.attachment-info .refresh-attachment,
     1353.attachment-info .delete-attachment {
     1354        display: block;
    13541355        text-decoration: none;
    13551356        white-space: nowrap;
    13561357}
    13571358
    1358 .attachment-info .delete-attachment a:hover {
    1359         color: #fff;
    1360         background: red;
     1359.attachment-info .refresh-attachment,
     1360.attachment-details.needs-refresh .attachment-info .edit-attachment {
     1361        display: none;
     1362}
     1363
     1364.attachment-details.needs-refresh .attachment-info .refresh-attachment,
     1365.attachment-info .edit-attachment {
     1366        display: block;
     1367}
     1368
     1369.attachment-info .delete-attachment {
     1370        color: #bc0b0b;
     1371}
     1372
     1373.attachment-info .delete-attachment:hover {
     1374        color: red;
    13611375}
    13621376

  • trunk/wp-includes/js/media-views.js

    r23089 r23095  
    40224022                        'change [data-setting] select':   'updateSetting',
    40234023                        'change [data-setting] textarea': 'updateSetting',
    4024                         'click .delete-attachment':       'deleteAttachment'
     4024                        'click .delete-attachment':       'deleteAttachment',
     4025                        'click .edit-attachment':         'editAttachment',
     4026                        'click .refresh-attachment':      'refreshAttachment'
    40254027                },
    40264028
    … …  
    40394041                },
    40404042
    4041                 deleteAttachment: function(event) {
     4043                deleteAttachment: function( event ) {
    40424044                        event.preventDefault();
    40434045
    40444046                        if ( confirm( l10n.warnDelete ) )
    40454047                                this.model.destroy();
     4048                },
     4049
     4050                editAttachment: function( event ) {
     4051                        this.$el.addClass('needs-refresh');
     4052                },
     4053
     4054                refreshAttachment: function( event ) {
     4055                        this.$el.removeClass('needs-refresh');
     4056                        event.preventDefault();
     4057                        this.model.fetch();
    40464058                }
    40474059        });

  • trunk/wp-includes/media.php

    r23087 r23095  
    13381338                        'delete' => false,
    13391339                ),
     1340                'editLink'   => false,
    13401341        );
    13411342
    1342         if ( current_user_can( 'edit_post', $attachment->ID ) )
     1343        if ( current_user_can( 'edit_post', $attachment->ID ) ) {
    13431344                $response['nonces']['update'] = wp_create_nonce( 'update-post_' . $attachment->ID );
     1345                $response['editLink'] = get_edit_post_link( $attachment->ID, 'raw' );
     1346        }
    13441347
    13451348        if ( current_user_can( 'delete_post', $attachment->ID ) )
    … …  
    17041707                                <div class="filename">{{ data.filename }}</div>
    17051708                                <div class="uploaded">{{ data.dateFormatted }}</div>
    1706                                 <# if ( 'image' === data.type && ! data.uploading && data.width && data.height ) { #>
    1707                                         <div class="dimensions">{{ data.width }} &times; {{ data.height }}</div>
     1709
     1710                                <# if ( 'image' === data.type && ! data.uploading ) { #>
     1711                                        <# if ( data.width && data.height ) { #>
     1712                                                <div class="dimensions">{{ data.width }} &times; {{ data.height }}</div>
     1713                                        <# } #>
     1714
     1715                                        <# if ( data.can.save ) { #>
     1716                                                <a class="edit-attachment" href="{{ data.editLink }}&amp;image-editor" target="_blank"><?php _e( 'Edit Image' ); ?></a>
     1717                                                <a class="refresh-attachment" href="#"><?php _e( 'Refresh' ); ?></a>
     1718                                        <# } #>
    17081719                                <# } #>
     1720
    17091721                                <# if ( ! data.uploading && data.can.remove ) { #>
    1710                                         <div class="delete-attachment">
    1711                                                 <a href="#"><?php _e( 'Delete Permanently' ); ?></a>
    1712                                         </div>
     1722                                        <a class="delete-attachment" href="#"><?php _e( 'Delete Permanently' ); ?></a>
    17131723                                <# } #>
     1724
    17141725                                <div class="compat-meta">
    17151726                                        <# if ( data.compat && data.compat.meta ) { #>
Note: See TracChangeset for help on using the changeset viewer.