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.
git-svn-id: http://core.svn.wordpress.org/trunk@24226 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Mark Jaquith
parent
351fda2958
commit
f63001eb2c
|
|
@ -85,6 +85,17 @@ $admin_body_class .= ' version-' . str_replace( '.', '-', preg_replace( '/^([.0-
|
|||
$admin_body_class .= ' admin-color-' . sanitize_html_class( get_user_option( 'admin_color' ), 'fresh' );
|
||||
$admin_body_class .= ' locale-' . sanitize_html_class( strtolower( str_replace( '_', '-', get_locale() ) ) );
|
||||
|
||||
if ( false !== $post_format = get_post_format() ) {
|
||||
if ( ! $post_format ) {
|
||||
$post_format = 'standard';
|
||||
|
||||
if ( ! empty( $_REQUEST['format'] ) && in_array( $_REQUEST['format'], get_post_format_slugs() ) )
|
||||
$post_format = $_REQUEST['format'];
|
||||
}
|
||||
|
||||
$admin_body_class .= ' wp-format-' . $post_format;
|
||||
}
|
||||
|
||||
if ( wp_is_mobile() )
|
||||
$admin_body_class .= ' mobile';
|
||||
|
||||
|
|
|
|||
|
|
@ -4004,19 +4004,19 @@ body .ui-slider-tooltip {
|
|||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.wp-format-gallery .post-formats-fields,
|
||||
.wp-format-image .post-formats-fields,
|
||||
.wp-format-link .post-formats-fields,
|
||||
.wp-format-quote .post-formats-fields,
|
||||
.wp-format-video .post-formats-fields,
|
||||
.wp-format-audio .post-formats-fields,
|
||||
.wp-format-gallery .field.wp-format-gallery,
|
||||
.wp-format-image .field.wp-format-image,
|
||||
.wp-format-chat .field.wp-format-chat,
|
||||
.wp-format-link .field.wp-format-link,
|
||||
.wp-format-quote .field.wp-format-quote,
|
||||
.wp-format-video .field.wp-format-video,
|
||||
.wp-format-audio .field.wp-format-audio {
|
||||
#post-body-content.wp-format-gallery .post-formats-fields,
|
||||
#post-body-content.wp-format-image .post-formats-fields,
|
||||
#post-body-content.wp-format-link .post-formats-fields,
|
||||
#post-body-content.wp-format-quote .post-formats-fields,
|
||||
#post-body-content.wp-format-video .post-formats-fields,
|
||||
#post-body-content.wp-format-audio .post-formats-fields,
|
||||
#post-body-content.wp-format-gallery .field.wp-format-gallery,
|
||||
#post-body-content.wp-format-image .field.wp-format-image,
|
||||
#post-body-content.wp-format-chat .field.wp-format-chat,
|
||||
#post-body-content.wp-format-link .field.wp-format-link,
|
||||
#post-body-content.wp-format-quote .field.wp-format-quote,
|
||||
#post-body-content.wp-format-video .field.wp-format-video,
|
||||
#post-body-content.wp-format-audio .field.wp-format-audio {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
|
@ -4032,9 +4032,9 @@ body .ui-slider-tooltip {
|
|||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.wp-format-image label,
|
||||
.wp-format-video label,
|
||||
.wp-format-audio label {
|
||||
#post-body-content.wp-format-image label,
|
||||
#post-body-content.wp-format-video label,
|
||||
#post-body-content.wp-format-audio label {
|
||||
float: left;
|
||||
}
|
||||
|
||||
|
|
@ -4043,25 +4043,84 @@ body .ui-slider-tooltip {
|
|||
overflow: hidden;
|
||||
width: 40%;
|
||||
height: auto;
|
||||
padding: 55px 0 20px;
|
||||
border: 1px dashed #dfdfdf;
|
||||
background: #f5f5f5 url(../images/media-button-2x.png) no-repeat 50% 25%;
|
||||
box-sizing: border-box;
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.wp-format-media-holder:hover {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.wp-format-media-preview {
|
||||
margin-bottom: 20px;
|
||||
.wp-format-media-holder.drag-over {
|
||||
background: rgba( 0, 86, 132, 0.9 );
|
||||
border-color:transparent;
|
||||
}
|
||||
|
||||
.wp-format-status #titlewrap,
|
||||
.wp-format-image .wp-media-buttons .insert-media,
|
||||
.wp-format-audio .wp-media-buttons .insert-media,
|
||||
.wp-format-video .wp-media-buttons .insert-media,
|
||||
.wp-format-aside .wp-media-buttons .insert-media,
|
||||
.wp-format-status .wp-media-buttons .insert-media {
|
||||
.wp-format-media-holder div {
|
||||
display: none;
|
||||
}
|
||||
.wp-format-media-holder.drag-over div {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
border: 1px dashed #fff;
|
||||
display:block;
|
||||
}
|
||||
|
||||
#poststuff .wp-format-media-holder.drag-over div h3 {
|
||||
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
-webkit-transform: translateY( -50% );
|
||||
-moz-transform: translateY( -50% );
|
||||
-ms-transform: translateY( -50% );
|
||||
-o-transform: translateY( -50% );
|
||||
transform: translateY( -50% );
|
||||
|
||||
font-size: 20px;
|
||||
font-weight: 200;
|
||||
color: #fff;
|
||||
padding: 0;
|
||||
text-align:center;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
#post-body-content.wp-format-image .wp-format-media-holder {
|
||||
margin-top: 17px;
|
||||
}
|
||||
|
||||
.wp-format-media-preview {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
#image-preview img {
|
||||
width: auto;
|
||||
max-height: 300px;
|
||||
}
|
||||
|
||||
#post-body-content .wp-format-image p.use-url-or-html {
|
||||
padding-top: 10px;
|
||||
clear: both;
|
||||
width: 40%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
body.wp-format-image .attachment-display-settings {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.wp-format-status #titlewrap,
|
||||
body.wp-format-image .wp-media-buttons .insert-media,
|
||||
body.wp-format-audio .wp-media-buttons .insert-media,
|
||||
body.wp-format-video .wp-media-buttons .insert-media,
|
||||
body.wp-format-aside .wp-media-buttons .insert-media,
|
||||
body.wp-format-status .wp-media-buttons .insert-media {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
@ -4072,7 +4131,8 @@ body .ui-slider-tooltip {
|
|||
|
||||
.wp-format-media-select {
|
||||
display: block;
|
||||
height: 200px;
|
||||
height: 20px;
|
||||
padding: 55px 0 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
@ -4081,10 +4141,6 @@ body .ui-slider-tooltip {
|
|||
max-height: 100%;
|
||||
}
|
||||
|
||||
.wp-format-media-select {
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.empty .wp-format-media-metaedit {
|
||||
height: 20px;
|
||||
display: block;
|
||||
|
|
@ -4101,56 +4157,56 @@ body .ui-slider-tooltip {
|
|||
#wp_format_video {
|
||||
float: left;
|
||||
margin-right: 23px;
|
||||
max-width: 50%;
|
||||
max-width: 40%;
|
||||
min-height: 97px;
|
||||
}
|
||||
|
||||
#icon-edit.wp-format-standard,
|
||||
body.wp-format-standard #icon-edit,
|
||||
.post-format-options .standard {
|
||||
background: url(../images/post-formats32.png) no-repeat -3px -4px;
|
||||
}
|
||||
|
||||
#icon-edit.wp-format-image,
|
||||
body.wp-format-image #icon-edit,
|
||||
.post-format-options .image {
|
||||
background: url(../images/post-formats32.png) no-repeat -43px -4px;
|
||||
}
|
||||
|
||||
#icon-edit.wp-format-gallery,
|
||||
body.wp-format-gallery #icon-edit,
|
||||
.post-format-options .gallery {
|
||||
background: url(../images/post-formats32.png) no-repeat -83px -4px;
|
||||
}
|
||||
|
||||
#icon-edit.wp-format-audio,
|
||||
body.wp-format-audio #icon-edit,
|
||||
.post-format-options .audio {
|
||||
background: url(../images/post-formats32.png) no-repeat -123px -4px;
|
||||
}
|
||||
|
||||
#icon-edit.wp-format-video,
|
||||
body.wp-format-video #icon-edit,
|
||||
.post-format-options .video {
|
||||
background: url(../images/post-formats32.png) no-repeat -163px -4px;
|
||||
}
|
||||
|
||||
#icon-edit.wp-format-chat,
|
||||
body.wp-format-chat #icon-edit,
|
||||
.post-format-options .chat {
|
||||
background: url(../images/post-formats32.png) no-repeat -202px -4px;
|
||||
}
|
||||
|
||||
#icon-edit.wp-format-status,
|
||||
body.wp-format-status #icon-edit,
|
||||
.post-format-options .status {
|
||||
background: url(../images/post-formats32.png) no-repeat -242px -4px;
|
||||
}
|
||||
|
||||
#icon-edit.wp-format-aside,
|
||||
body.wp-format-aside #icon-edit,
|
||||
.post-format-options .aside {
|
||||
background: url(../images/post-formats32.png) no-repeat -282px -4px;
|
||||
}
|
||||
|
||||
#icon-edit.wp-format-quote,
|
||||
body.wp-format-quote #icon-edit,
|
||||
.post-format-options .quote {
|
||||
background: url(../images/post-formats32.png) no-repeat -322px -4px;
|
||||
}
|
||||
|
||||
#icon-edit.wp-format-link,
|
||||
body.wp-format-link #icon-edit,
|
||||
.post-format-options .link {
|
||||
background: url(../images/post-formats32.png) no-repeat -362px -4px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -38,6 +38,15 @@ wp_nonce_field( 'show-post-format-ui_' . $post_type, 'show_post_format_ui_nonce'
|
|||
?>
|
||||
</div>
|
||||
<?php endif ?>
|
||||
<div data-format="image" class="wp-format-media-holder hide-if-no-js">
|
||||
<div><h3><?php _e( 'Drop image file to upload' ); ?></h3></div>
|
||||
<a href="#" class="wp-format-media-select"
|
||||
data-choose="<?php esc_attr_e( 'Choose an Image' ); ?>"
|
||||
data-update="<?php esc_attr_e( 'Select Image' ); ?>">
|
||||
<?php _e( 'Select / Upload Image' ); ?>
|
||||
</a>
|
||||
</div>
|
||||
<div class="wp-format-image-textarea hide-if-js">
|
||||
<label for="wp_format_image"><?php
|
||||
if ( current_user_can( 'unfiltered_html' ) )
|
||||
_e( 'Image HTML or URL' );
|
||||
|
|
@ -45,13 +54,9 @@ wp_nonce_field( 'show-post-format-ui_' . $post_type, 'show_post_format_ui_nonce'
|
|||
_e( 'Image URL' );
|
||||
?></label>
|
||||
<textarea id="wp_format_image" type="text" name="_format_image" class="widefat"><?php esc_html_e( $format_meta['image'] ); ?></textarea>
|
||||
<div data-format="image" class="wp-format-media-holder hide-if-no-js">
|
||||
<a href="#" class="wp-format-media-select"
|
||||
data-choose="<?php esc_attr_e( 'Choose an Image' ); ?>"
|
||||
data-update="<?php esc_attr_e( 'Select Image' ); ?>">
|
||||
<?php _e( 'Select / Upload Image' ); ?>
|
||||
</a>
|
||||
</div>
|
||||
<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>
|
||||
<span style="display: none"><?php printf( __( '(or %sselect/upload an image%s)' ), '<a href="#">', '</a>' ); ?></span></p>
|
||||
</div>
|
||||
|
||||
<div class="field wp-format-link">
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ window.wp = window.wp || {};
|
|||
"use strict";
|
||||
|
||||
var mediaFrame, insertMediaButton, container, icon, formatField,
|
||||
body,
|
||||
lastMimeType,
|
||||
classRegex = /\s?\bwp-format-[^ ]+/g,
|
||||
shortHeight = 120,
|
||||
|
|
@ -17,16 +18,65 @@ window.wp = window.wp || {};
|
|||
shortContentFormats = ['status', 'aside'],
|
||||
noUIFormats = ['standard', 'chat', 'status', 'aside', 'gallery'];
|
||||
|
||||
function imageFormatUploadProgress( uploader, file ) {
|
||||
var $bar = $( '#' + uploader.settings.drop_element + ' .media-progress-bar div' );
|
||||
$bar.width( file.percent + '%' );
|
||||
}
|
||||
|
||||
function imageFormatUploadStart( uploader ) {
|
||||
$( '#' + uploader.settings.drop_element + ' .wp-format-media-select' ).append('<div class="media-progress-bar"><div></div></div>');
|
||||
}
|
||||
|
||||
function imageFormatUploadError() {
|
||||
$( '.media-progress-bar', $('.wp-format-media-holder[data-format=image]') ).remove();
|
||||
}
|
||||
|
||||
function imageFormatUploadSuccess( attachment ) {
|
||||
var $holder, $field, html = wp.media.string.image({
|
||||
size : 'full',
|
||||
align : false,
|
||||
link : getUserSetting( 'urlbutton' )
|
||||
}, attachment.attributes );
|
||||
|
||||
$holder = $('.wp-format-media-holder[data-format=image]');
|
||||
$( '.media-progress-bar', $holder ).remove();
|
||||
|
||||
if ( 'image' !== attachment.attributes.type )
|
||||
return;
|
||||
|
||||
$field = $( '#wp_format_' + $holder.data( 'format' ) );
|
||||
|
||||
// set the hidden input's value
|
||||
$field.val( html );
|
||||
|
||||
$( '#image-preview' ).remove();
|
||||
|
||||
$holder.parent().prepend( ['<div id="image-preview" class="wp-format-media-preview">',
|
||||
'<img src="', attachment.get('url'), '"',
|
||||
attachment.get('width') ? ' width="' + attachment.get('width') + '"' : '',
|
||||
attachment.get('height') ? ' height="' + attachment.get('height') + '"' : '',
|
||||
' />',
|
||||
'</div>'].join( '' ) );
|
||||
}
|
||||
|
||||
var uploader = {
|
||||
dropzone: $('.wp-format-media-holder[data-format=image]'),
|
||||
success: imageFormatUploadSuccess,
|
||||
error: imageFormatUploadError,
|
||||
plupload: {},
|
||||
params: {}
|
||||
};
|
||||
uploader = new wp.Uploader( uploader );
|
||||
uploader.uploader.bind( 'BeforeUpload', imageFormatUploadStart );
|
||||
uploader.uploader.bind( 'UploadProgress', imageFormatUploadProgress );
|
||||
|
||||
function switchFormatClass( format ) {
|
||||
formatField.val( format );
|
||||
|
||||
container
|
||||
.prop( 'className', container.prop( 'className' ).replace( classRegex, '' ) )
|
||||
.addClass( 'wp-format-' + format );
|
||||
|
||||
icon
|
||||
.prop( 'className', icon.prop( 'className' ).replace( classRegex, '' ) )
|
||||
$.each( [ container, icon, body ], function(i, thing) {
|
||||
thing.prop( 'className', thing.prop( 'className' ).replace( classRegex, '' ) )
|
||||
.addClass( 'wp-format-' + format );
|
||||
});
|
||||
}
|
||||
|
||||
function resizeContent( format, noAnimate ) {
|
||||
|
|
@ -137,6 +187,7 @@ window.wp = window.wp || {};
|
|||
}
|
||||
|
||||
$(function () {
|
||||
body = $( 'body' );
|
||||
container = $( '#post-body-content' );
|
||||
icon = $( '.icon32' );
|
||||
formatField = $( '#post_format' );
|
||||
|
|
@ -163,6 +214,13 @@ window.wp = window.wp || {};
|
|||
switchFormat( $( e.currentTarget ) );
|
||||
} );
|
||||
|
||||
// Toggle select/upload and URL/HTML for images
|
||||
$( '.use-url-or-html' ).on( 'click', 'a', function(e) {
|
||||
e.preventDefault();
|
||||
$( '.wp-format-media-holder, .wp-format-image-textarea' ).toggle();
|
||||
$(this).closest( 'p' ).find( 'span' ).toggle();
|
||||
});
|
||||
|
||||
// Media selection
|
||||
$( '.wp-format-media-select' ).click( function (e) {
|
||||
e.preventDefault();
|
||||
|
|
@ -242,8 +300,8 @@ window.wp = window.wp || {};
|
|||
mediaPreview( attachment );
|
||||
} else {
|
||||
html = wp.media.string.image({
|
||||
align : getUserSetting( 'align' ),
|
||||
size : getUserSetting( 'imgsize' ),
|
||||
size: 'full',
|
||||
align : false,
|
||||
link : getUserSetting( 'urlbutton' )
|
||||
}, attachment);
|
||||
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ function get_post_format( $post = null ) {
|
|||
$_format = get_the_terms( $post->ID, 'post_format' );
|
||||
|
||||
if ( empty( $_format ) )
|
||||
return false;
|
||||
return '';
|
||||
|
||||
$format = array_shift( $_format );
|
||||
|
||||
|
|
|
|||
|
|
@ -407,7 +407,7 @@ function wp_default_scripts( &$scripts ) {
|
|||
'comma' => _x( ',', 'tag delimiter' ),
|
||||
) );
|
||||
|
||||
$scripts->add( 'post-formats', "/wp-admin/js/post-formats$suffix.js", array( 'media-models' ), false, 1 );
|
||||
$scripts->add( 'post-formats', "/wp-admin/js/post-formats$suffix.js", array( 'media-models', 'wp-plupload' ), false, 1 );
|
||||
|
||||
$scripts->add( 'link', "/wp-admin/js/link$suffix.js", array( 'wp-lists', 'postbox' ), false, 1 );
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue