Make WordPress Core


Ignore:
Timestamp:
05/09/2013 10:45:14 PM (12 years ago)
Author:
markjaquith
Message:

Improve the UX and flow of the Image post format.

  • Drag-and-drop
  • Textarea for HTML/URL hidden to start
  • Bigger click target for entering Media modal
  • Image preview height-contrained to 300 pixels
  • Hid the alignment, size, etc options that didn't have an effect anyway
  • Got wp-format-{format} into the <body> class

props DrewAPicture, aaroncampbell, markjaquith, azaozz. see #24291.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/wp-admin/includes/post-formats.php

    r24184 r24226  
    3939            </div>
    4040            <?php endif ?>
    41             <label for="wp_format_image"><?php
    42                 if ( current_user_can( 'unfiltered_html' ) )
    43                     _e( 'Image HTML or URL' );
    44                 else
    45                     _e( 'Image URL' );
    46             ?></label>
    47             <textarea id="wp_format_image" type="text" name="_format_image" class="widefat"><?php esc_html_e( $format_meta['image'] ); ?></textarea>
    4841            <div data-format="image" class="wp-format-media-holder hide-if-no-js">
     42                <div><h3><?php _e( 'Drop image file to upload' ); ?></h3></div>
    4943                <a href="#" class="wp-format-media-select"
    5044                    data-choose="<?php esc_attr_e( 'Choose an Image' ); ?>"
     
    5347                </a>
    5448            </div>
     49            <div class="wp-format-image-textarea hide-if-js">
     50                <label for="wp_format_image"><?php
     51                    if ( current_user_can( 'unfiltered_html' ) )
     52                        _e( 'Image HTML or URL' );
     53                    else
     54                        _e( 'Image URL' );
     55                ?></label>
     56                <textarea id="wp_format_image" type="text" name="_format_image" class="widefat"><?php esc_html_e( $format_meta['image'] ); ?></textarea>
     57            </div>
     58            <p class="use-url-or-html hide-if-no-js"><span><?php printf( __( '(or %suse an image URL or HTML%s)' ), '<a href="#">', '</a>' ); ?></span>
     59                <span style="display: none"><?php printf( __( '(or %sselect/upload an image%s)' ), '<a href="#">', '</a>' ); ?></span></p>
    5560        </div>
    5661
Note: See TracChangeset for help on using the changeset viewer.