New Post Format UI chooser treatment in response to testing.
* Bigger icons * Format description under each * UI hides after choice * Saving without choosing implies "Standard" * Helpful text, with "Change format" link see #24046. props lessbloat, wonderboymusic. git-svn-id: http://core.svn.wordpress.org/trunk@24006 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Mark Jaquith
parent
7ed04565bb
commit
56d5d62a19
|
|
@ -971,28 +971,7 @@ table.diff td, table.diff th {
|
|||
11.4 - Post format selection
|
||||
------------------------------------------------------------------------------*/
|
||||
|
||||
.post-format-options a {
|
||||
border-left: 1px solid #ebebeb;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.post-format-options a:first-child {
|
||||
-webkit-border-bottom-left-radius: 0;
|
||||
-webkit-border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
|
||||
.post-format-options a:last-child {
|
||||
-webkit-border-bottom-right-radius: 3px;
|
||||
-webkit-border-top-right-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
border-top-right-radius: 3px;
|
||||
}
|
||||
|
||||
.post-format-tip {
|
||||
float: left;
|
||||
}
|
||||
|
||||
/*------------------------------------------------------------------------------
|
||||
12.0 - Categories
|
||||
|
|
|
|||
|
|
@ -3024,7 +3024,7 @@ ul.cat-checklist {
|
|||
|
||||
#titlediv {
|
||||
position: relative;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
#titlediv label {
|
||||
|
|
@ -3047,6 +3047,7 @@ ul.cat-checklist {
|
|||
height: 1.7em;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
margin: 1px 0;
|
||||
}
|
||||
|
||||
#titlediv #title-prompt-text,
|
||||
|
|
@ -3087,10 +3088,10 @@ input#link_url {
|
|||
}
|
||||
|
||||
#edit-slug-box {
|
||||
line-height: 23px;
|
||||
min-height: 23px;
|
||||
line-height: 24px;
|
||||
min-height: 25px; /* Yes, line-height + 1 */
|
||||
margin-top: 5px;
|
||||
padding: 0 10px;
|
||||
padding-right: 6px;
|
||||
}
|
||||
|
||||
#edit-slug-box .cancel {
|
||||
|
|
@ -3930,6 +3931,7 @@ body .ui-tooltip {
|
|||
|
||||
.post-formats-fields {
|
||||
display: none;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.wp-format-gallery .post-formats-fields,
|
||||
|
|
@ -3960,6 +3962,7 @@ body .ui-tooltip {
|
|||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.wp-format-image label,
|
||||
.wp-format-video label,
|
||||
.wp-format-audio label {
|
||||
float: left;
|
||||
|
|
@ -3969,16 +3972,10 @@ body .ui-tooltip {
|
|||
float: left;
|
||||
overflow: hidden;
|
||||
width: 40%;
|
||||
height: 200px;
|
||||
border: 1px dashed #dfdfdf;
|
||||
background: #f5f5f5 url(../images/media-button-2x.png) no-repeat 50% 25%;
|
||||
}
|
||||
|
||||
.wp-format-media-holder.empty,
|
||||
.wp-format-audio .wp-format-media-holder,
|
||||
.wp-format-video .wp-format-media-holder {
|
||||
height: auto;
|
||||
padding: 55px 0 20px;
|
||||
border: 1px dashed #dfdfdf;
|
||||
background: #f5f5f5 url(../images/media-button-2x.png) no-repeat 50% 25%;
|
||||
}
|
||||
|
||||
.wp-format-media-holder:hover {
|
||||
|
|
@ -4005,9 +4002,7 @@ body .ui-tooltip {
|
|||
max-height: 100%;
|
||||
}
|
||||
|
||||
.empty .wp-format-media-select,
|
||||
.wp-format-audio .wp-format-media-select,
|
||||
.wp-format-video .wp-format-media-select {
|
||||
.wp-format-media-select {
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
|
|
@ -4022,6 +4017,7 @@ body .ui-tooltip {
|
|||
margin: 5px 0;
|
||||
}
|
||||
|
||||
#wp_format_image,
|
||||
#wp_format_audio,
|
||||
#wp_format_video {
|
||||
float: left;
|
||||
|
|
@ -4030,147 +4026,208 @@ body .ui-tooltip {
|
|||
min-height: 97px;
|
||||
}
|
||||
|
||||
#icon-edit.standard {
|
||||
#icon-edit.standard,
|
||||
.post-format-options .standard {
|
||||
background: url(../images/post-formats32.png) no-repeat -3px -4px;
|
||||
}
|
||||
|
||||
#icon-edit.image {
|
||||
#icon-edit.image,
|
||||
.post-format-options .image {
|
||||
background: url(../images/post-formats32.png) no-repeat -43px -4px;
|
||||
}
|
||||
|
||||
#icon-edit.gallery {
|
||||
#icon-edit.gallery,
|
||||
.post-format-options .gallery {
|
||||
background: url(../images/post-formats32.png) no-repeat -83px -4px;
|
||||
}
|
||||
|
||||
#icon-edit.audio {
|
||||
#icon-edit.audio,
|
||||
.post-format-options .audio {
|
||||
background: url(../images/post-formats32.png) no-repeat -123px -4px;
|
||||
}
|
||||
|
||||
#icon-edit.video {
|
||||
#icon-edit.video,
|
||||
.post-format-options .video {
|
||||
background: url(../images/post-formats32.png) no-repeat -163px -4px;
|
||||
}
|
||||
|
||||
#icon-edit.chat {
|
||||
#icon-edit.chat,
|
||||
.post-format-options .chat {
|
||||
background: url(../images/post-formats32.png) no-repeat -202px -4px;
|
||||
}
|
||||
|
||||
#icon-edit.status {
|
||||
#icon-edit.status,
|
||||
.post-format-options .status {
|
||||
background: url(../images/post-formats32.png) no-repeat -242px -4px;
|
||||
}
|
||||
|
||||
#icon-edit.aside {
|
||||
#icon-edit.aside,
|
||||
.post-format-options .aside {
|
||||
background: url(../images/post-formats32.png) no-repeat -282px -4px;
|
||||
}
|
||||
|
||||
#icon-edit.quote {
|
||||
#icon-edit.quote,
|
||||
.post-format-options .quote {
|
||||
background: url(../images/post-formats32.png) no-repeat -322px -4px;
|
||||
}
|
||||
|
||||
#icon-edit.link {
|
||||
#icon-edit.link,
|
||||
.post-format-options .link {
|
||||
background: url(../images/post-formats32.png) no-repeat -362px -4px;
|
||||
}
|
||||
|
||||
.post-format-description {
|
||||
color: #666;
|
||||
display: none;
|
||||
margin: 10px 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.post-format-options {
|
||||
height: 29px;
|
||||
background: #f9f9f9;
|
||||
border: 1px solid #dfdfdf;
|
||||
-webkit-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
margin: 0 0 9px 1px;
|
||||
height: 50px;
|
||||
margin: 13px 0 10px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.post-format-options a {
|
||||
border-right: 1px solid #ebebeb;
|
||||
display: inline-block;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
padding: 6px;
|
||||
height: 34px;
|
||||
margin-right: 33px;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.post-format-options a:first-child {
|
||||
-webkit-border-bottom-left-radius: 3px;
|
||||
-webkit-border-top-left-radius: 3px;
|
||||
border-bottom-left-radius: 3px;
|
||||
border-top-left-radius: 3px;
|
||||
}
|
||||
|
||||
.post-format-options a.active,
|
||||
.post-format-options a:focus,
|
||||
.post-format-options a:hover {
|
||||
background: #eee;
|
||||
-webkit-box-shadow: inset 0 0 10px #ddd;
|
||||
box-shadow: inset 0 0 10px #ddd;
|
||||
outline: none;
|
||||
opacity: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.post-format-options a div {
|
||||
height: 34px;
|
||||
width: 34px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.post-format-title {
|
||||
color: #777;
|
||||
display: block;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.post-format-change, .post-format-set .post-format-options {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.post-format-set .post-format-change {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#poststuff .post-format-change {
|
||||
margin: 11px 0 13px;
|
||||
padding: 0;
|
||||
font-size: 1.5em;
|
||||
line-height: 18px;
|
||||
clear: left;
|
||||
}
|
||||
|
||||
.post-format-change span.icon {
|
||||
float: left;
|
||||
height: 16px;
|
||||
margin: 2px 5px 0 0;
|
||||
width: 16px;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.post-format-options a.active div,
|
||||
.post-format-options a:focus div,
|
||||
.post-format-options a:hover div {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.post-format-options .standard {
|
||||
.post-format-change span.icon.standard {
|
||||
background: url(../images/post-formats.png) no-repeat -8px -8px;
|
||||
}
|
||||
|
||||
.post-format-options .image {
|
||||
.post-format-change span.icon.image {
|
||||
background: url(../images/post-formats.png) no-repeat -40px -8px;
|
||||
}
|
||||
|
||||
.post-format-options .gallery {
|
||||
.post-format-change span.icon.gallery {
|
||||
background: url(../images/post-formats.png) no-repeat -72px -8px;
|
||||
}
|
||||
|
||||
.post-format-options .audio {
|
||||
.post-format-change span.icon.audio {
|
||||
background: url(../images/post-formats.png) no-repeat -104px -8px;
|
||||
}
|
||||
|
||||
.post-format-options .video {
|
||||
.post-format-change span.icon.video {
|
||||
background: url(../images/post-formats.png) no-repeat -136px -8px;
|
||||
}
|
||||
|
||||
.post-format-options .chat {
|
||||
.post-format-change span.icon.chat {
|
||||
background: url(../images/post-formats.png) no-repeat -168px -8px;
|
||||
}
|
||||
|
||||
.post-format-options .status {
|
||||
.post-format-change span.icon.status {
|
||||
background: url(../images/post-formats.png) no-repeat -200px -8px;
|
||||
}
|
||||
|
||||
.post-format-options .aside {
|
||||
.post-format-change span.icon.aside {
|
||||
background: url(../images/post-formats.png) no-repeat -232px -8px;
|
||||
}
|
||||
|
||||
.post-format-options .quote {
|
||||
.post-format-change span.icon.quote {
|
||||
background: url(../images/post-formats.png) no-repeat -264px -8px;
|
||||
}
|
||||
|
||||
.post-format-options .link {
|
||||
.post-format-change span.icon.link {
|
||||
background: url(../images/post-formats.png) no-repeat -296px -8px;
|
||||
}
|
||||
|
||||
.post-format-tip {
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
float: right;
|
||||
padding: 6px 10px;
|
||||
text-transform: capitalize;
|
||||
.post-format-change a {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 782px) {
|
||||
.post-format-options {
|
||||
height: 33px;
|
||||
}
|
||||
|
||||
.post-format-options a {
|
||||
margin-right: 19px;
|
||||
}
|
||||
|
||||
.post-format-options a div {
|
||||
height: 18px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.post-format-options .standard {
|
||||
background: url(../images/post-formats.png) no-repeat -8px -8px;
|
||||
}
|
||||
|
||||
.post-format-options .image {
|
||||
background: url(../images/post-formats.png) no-repeat -40px -8px;
|
||||
}
|
||||
|
||||
.post-format-options .gallery {
|
||||
background: url(../images/post-formats.png) no-repeat -72px -8px;
|
||||
}
|
||||
|
||||
.post-format-options .audio {
|
||||
background: url(../images/post-formats.png) no-repeat -104px -8px;
|
||||
}
|
||||
|
||||
.post-format-options .video {
|
||||
background: url(../images/post-formats.png) no-repeat -136px -8px;
|
||||
}
|
||||
|
||||
.post-format-options .chat {
|
||||
background: url(../images/post-formats.png) no-repeat -168px -8px;
|
||||
}
|
||||
|
||||
.post-format-options .status {
|
||||
background: url(../images/post-formats.png) no-repeat -200px -8px;
|
||||
}
|
||||
|
||||
.post-format-options .aside {
|
||||
background: url(../images/post-formats.png) no-repeat -232px -8px;
|
||||
}
|
||||
|
||||
.post-format-options .quote {
|
||||
background: url(../images/post-formats.png) no-repeat -264px -8px;
|
||||
}
|
||||
|
||||
.post-format-options .link {
|
||||
background: url(../images/post-formats.png) no-repeat -296px -8px;
|
||||
}
|
||||
}
|
||||
|
||||
/*------------------------------------------------------------------------------
|
||||
|
|
|
|||
|
|
@ -133,19 +133,23 @@ if ( post_type_supports( $post_type, 'post-formats' ) && apply_filters( 'show_po
|
|||
wp_enqueue_script( 'wp-mediaelement' );
|
||||
wp_enqueue_style( 'wp-mediaelement' );
|
||||
$post_format = get_post_format();
|
||||
$post_format_set_class = 'post-format-set';
|
||||
|
||||
if ( ! $post_format )
|
||||
if ( ! $post_format ) {
|
||||
$post_format = 'standard';
|
||||
if ( 'auto-draft' == $post->post_status )
|
||||
$post_format_set_class = '';
|
||||
}
|
||||
|
||||
$format_class = " class='wp-format-{$post_format}'";
|
||||
|
||||
|
||||
$all_post_formats = array(
|
||||
'standard' => array (
|
||||
'description' => __( 'Add a title and use the editor to compose your post.' )
|
||||
'description' => __( 'Use the editor below to compose your post.' )
|
||||
),
|
||||
'image' => array (
|
||||
'description' => __( 'Select or upload an image to use for your post.' )
|
||||
'description' => __( 'Select or upload an image for your post.' )
|
||||
),
|
||||
'gallery' => array (
|
||||
'description' => __( 'Use the Add Media button to select or upload images for your gallery.' )
|
||||
|
|
@ -166,10 +170,10 @@ if ( post_type_supports( $post_type, 'post-formats' ) && apply_filters( 'show_po
|
|||
'description' => __( 'Use the editor to compose a status update. What’s new?' )
|
||||
),
|
||||
'quote' => array (
|
||||
'description' => __( 'Copy a quotation into the box. Also add the source and URL if you have them.' )
|
||||
'description' => __( 'Copy a quotation into the box below. Add a source and URL if you have them.' )
|
||||
),
|
||||
'aside' => array (
|
||||
'description' => __( 'An aside is a quick thought or side topic. Use the editor to compose one.' )
|
||||
'description' => __( 'Use the editor to share a quick thought or side topic.' )
|
||||
)
|
||||
);
|
||||
$post_format_options = '';
|
||||
|
|
@ -181,7 +185,7 @@ if ( post_type_supports( $post_type, 'post-formats' ) && apply_filters( 'show_po
|
|||
$active_post_type_slug = $slug;
|
||||
}
|
||||
|
||||
$post_format_options .= '<a ' . $class . ' href="?format=' . $slug . '" data-description="' . $attr['description'] . '" data-wp-format="' . $slug . '" title="' . ucfirst( sprintf( __( '%s Post' ), $slug ) ) . '"><div class="' . $slug . '"></div></a>';
|
||||
$post_format_options .= '<a ' . $class . ' href="?format=' . $slug . '" data-description="' . $attr['description'] . '" data-wp-format="' . $slug . '" title="' . ucfirst( $slug ) . '"><div class="' . $slug . '"></div><span class="post-format-title">' . ucfirst( $slug ) . '</span></a>';
|
||||
}
|
||||
|
||||
$current_post_format = array( 'currentPostFormat' => esc_html( $active_post_type_slug ) );
|
||||
|
|
@ -358,7 +362,7 @@ if ( 'post' == $post_type ) {
|
|||
require_once('./admin-header.php');
|
||||
?>
|
||||
|
||||
<div class="wrap">
|
||||
<div class="wrap <?php echo $post_format_set_class; ?>">
|
||||
<?php screen_icon(); ?>
|
||||
<h2><?php
|
||||
echo esc_html( $title );
|
||||
|
|
@ -374,6 +378,11 @@ if ( isset( $post_new_file ) && current_user_can( $post_type_object->cap->create
|
|||
<div id="lost-connection-notice" class="error hidden">
|
||||
<p><?php _e("You have lost your connection with the server, and saving has been disabled. This message will vanish once you've reconnected."); ?></p>
|
||||
</div>
|
||||
<?php if ( ! empty( $post_format_options ) ) : ?>
|
||||
<div class="post-format-options">
|
||||
<?php echo $post_format_options; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<form name="post" action="post.php" method="post" id="post"<?php do_action('post_edit_form_tag'); ?>>
|
||||
<?php wp_nonce_field($nonce_action); ?>
|
||||
<input type="hidden" id="user-id" name="user_ID" value="<?php echo (int) $user_ID ?>" />
|
||||
|
|
@ -400,14 +409,6 @@ wp_nonce_field( 'closedpostboxes', 'closedpostboxesnonce', false );
|
|||
<div id="poststuff">
|
||||
<div id="post-body" class="metabox-holder columns-<?php echo 1 == get_current_screen()->get_columns() ? '1' : '2'; ?>">
|
||||
<div id="post-body-content"<?php echo $format_class; ?>>
|
||||
|
||||
<?php if ( ! empty( $post_format_options ) ) : ?>
|
||||
<div class="post-format-options">
|
||||
<span class="post-format-tip">Standard Post</span>
|
||||
<?php echo $post_format_options; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ( post_type_supports($post_type, 'title') ) { ?>
|
||||
<div id="titlediv">
|
||||
<div id="titlewrap">
|
||||
|
|
@ -424,7 +425,7 @@ if ( !empty($shortlink) )
|
|||
if ( $post_type_object->public && ! ( 'pending' == get_post_status( $post ) && !current_user_can( $post_type_object->cap->publish_posts ) ) ) {
|
||||
$has_sample_permalink = $sample_permalink_html && 'auto-draft' != $post->post_status;
|
||||
?>
|
||||
<div id="edit-slug-box" class="hide-if-no-js<?php if ( ! $has_sample_permalink ) echo ' hidden' ?>">
|
||||
<div id="edit-slug-box" class="hide-if-no-js">
|
||||
<?php
|
||||
if ( $has_sample_permalink )
|
||||
echo $sample_permalink_html;
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
<?php
|
||||
global $wp_embed;
|
||||
|
||||
$format_meta = get_post_format_meta( $post_ID );
|
||||
|
||||
?>
|
||||
<div class="post-format-description"></div>
|
||||
<div class="post-format-change"><span class="icon <?php echo esc_attr( $post_format ); ?>"></span> <span class="post-format-description"><?php echo $all_post_formats[$post_format]['description']; ?></span> <a href="#"><?php _e('Change format'); ?></a></div>
|
||||
<div class="post-formats-fields">
|
||||
|
||||
<input type="hidden" name="post_format" id="post_format" value="<?php echo esc_attr( $post_format ); ?>" />
|
||||
|
|
@ -18,27 +19,38 @@ $format_meta = get_post_format_meta( $post_ID );
|
|||
<input type="text" id="wp_format_quote_source" name="_wp_format_quote_source" value="<?php echo esc_attr( $format_meta['quote_source'] ); ?>" class="widefat" />
|
||||
</div>
|
||||
|
||||
<?php
|
||||
$image = false;
|
||||
if ( ! empty( $format_meta['image'] ) && is_numeric( $format_meta['image'] ) ) {
|
||||
$format_meta['image'] = absint( $format_meta['image'] );
|
||||
$image = wp_get_attachment_url( $format_meta['image'] );
|
||||
}
|
||||
?>
|
||||
<div class="field wp-format-image">
|
||||
<div data-format="image" class="wp-format-media-holder hide-if-no-js<?php if ( ! $image ) echo ' empty'; ?>">
|
||||
<?php if ( ! empty( $format_meta['image'] ) ) : ?>
|
||||
<div id="image-preview" class="wp-format-media-preview">
|
||||
<?php
|
||||
if ( is_numeric( $format_meta['image'] ) ) {
|
||||
$format_meta['image'] = absint( $format_meta['image'] );
|
||||
$image = wp_get_attachment_url( $format_meta['image'] );
|
||||
printf( '<img src="%s" alt="%s" />', esc_url( $image ), get_the_title( $format_meta['image'] ) );
|
||||
} elseif ( preg_match( '/' . get_shortcode_regex() . '/s', $format_meta['image'] ) ) {
|
||||
echo do_shortcode( $format_meta['image'] );
|
||||
} elseif ( ! preg_match( '#<[^>]+>#', $format_meta['image'] ) ) {
|
||||
printf( '<img src="%s" alt="" />', esc_url( $format_meta['image'] ) );
|
||||
} else {
|
||||
echo $format_meta['image'];
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
<?php endif ?>
|
||||
<label for="wp_format_image"><?php
|
||||
if ( current_user_can( 'unfiltered_html' ) )
|
||||
_e( 'Image HTML or URL' );
|
||||
else
|
||||
_e( 'Image URL' );
|
||||
?></label>
|
||||
<textarea id="wp_format_image" type="text" name="_wp_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
|
||||
if ( $image )
|
||||
printf( '<img src="%s" alt="%s" />', esc_url( $image ), get_the_title( $format_meta['image'] ) );
|
||||
else
|
||||
_e( 'Select / Upload Image' );
|
||||
?>
|
||||
<?php _e( 'Select / Upload Image' ); ?>
|
||||
</a>
|
||||
</div>
|
||||
<input id="wp_format_image" type="hidden" name="_wp_format_image" value="<?php echo esc_attr( $format_meta['image'] ); ?>" />
|
||||
</div>
|
||||
|
||||
<div class="field wp-format-link wp-format-quote wp-format-image">
|
||||
|
|
@ -46,11 +58,8 @@ $format_meta = get_post_format_meta( $post_ID );
|
|||
<input type="text" id="wp_format_url" name="_wp_format_url" value="<?php echo esc_url( $format_meta['url'] ); ?>" class="widefat" />
|
||||
</div>
|
||||
|
||||
<?php
|
||||
$show_video_preview = ! empty( $format_meta['video'] );
|
||||
?>
|
||||
<div class="field wp-format-video<?php if ( $show_video_preview ) echo ' has-media-preview'; ?>">
|
||||
<?php if ( $show_video_preview ): ?>
|
||||
<div class="field wp-format-video">
|
||||
<?php if ( ! empty( $format_meta['video'] ) ): ?>
|
||||
<div id="video-preview" class="wp-format-media-preview">
|
||||
<?php
|
||||
if ( is_numeric( $format_meta['video'] ) ) {
|
||||
|
|
@ -76,7 +85,7 @@ $format_meta = get_post_format_meta( $post_ID );
|
|||
_e( 'Video URL' );
|
||||
?></label>
|
||||
<textarea id="wp_format_video" type="text" name="_wp_format_video" class="widefat"><?php esc_html_e( $format_meta['video'] ); ?></textarea>
|
||||
<div data-format="video" class="wp-format-media-holder hide-if-no-js<?php if ( ! $image ) echo ' empty'; ?>">
|
||||
<div data-format="video" class="wp-format-media-holder hide-if-no-js">
|
||||
<a href="#" class="wp-format-media-select"
|
||||
data-choose="<?php esc_attr_e( 'Choose a Video' ); ?>"
|
||||
data-update="<?php esc_attr_e( 'Select Video' ); ?>">
|
||||
|
|
@ -85,11 +94,8 @@ $format_meta = get_post_format_meta( $post_ID );
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<?php
|
||||
$show_audio_preview = ! empty( $format_meta['audio'] );
|
||||
?>
|
||||
<div class="field wp-format-audio<?php if ( $show_audio_preview ) echo ' has-media-preview' ?>">
|
||||
<?php if ( $show_audio_preview ): ?>
|
||||
<div class="field wp-format-audio">
|
||||
<?php if ( ! empty( $format_meta['audio'] ) ): ?>
|
||||
<div id="audio-preview" class="wp-format-media-preview">
|
||||
<?php
|
||||
if ( is_numeric( $format_meta['audio'] ) ) {
|
||||
|
|
@ -114,9 +120,8 @@ $format_meta = get_post_format_meta( $post_ID );
|
|||
else
|
||||
_e( 'Audio URL' );
|
||||
?></label>
|
||||
<textarea id="wp_format_audio" name="_wp_format_audio" class="widefat"><?php esc_html_e( $format_meta['audio'] );
|
||||
?></textarea>
|
||||
<div data-format="audio" class="wp-format-media-holder hide-if-no-js<?php if ( empty( $format_meta['audio'] ) ) echo ' empty'; ?>">
|
||||
<textarea id="wp_format_audio" name="_wp_format_audio" class="widefat"><?php esc_html_e( $format_meta['audio'] ); ?></textarea>
|
||||
<div data-format="audio" class="wp-format-media-holder hide-if-no-js">
|
||||
<a href="#" class="wp-format-media-select" data-choose="<?php esc_attr_e( 'Choose Audio' ); ?>" data-update="<?php esc_attr_e( 'Select Audio' ); ?>">
|
||||
<?php _e( 'Select Audio From Media Library' ) ?>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -1,103 +1,101 @@
|
|||
window.wp = window.wp || {};
|
||||
|
||||
(function($) {
|
||||
var container, mediaFrame, lastMimeType, lastMenu, mediaPreview, noUIFormats = ['standard', 'chat', 'status', 'aside', 'gallery'];
|
||||
var container, mediaFrame, lastMimeType, lastMenu, mediaPreview,
|
||||
noUIFormats = ['standard', 'chat', 'status', 'aside', 'gallery'],
|
||||
$container = $( '.post-formats-fields' );
|
||||
|
||||
function switchFormatClass( format ) {
|
||||
container.get(0).className = container.get(0).className.replace( /\bwp-format-[^ ]+/, '' );
|
||||
container.get(0).className = container.get(0).className.replace( /\bwp-format-[^ ]+/g, '' );
|
||||
container.addClass('wp-format-' + format);
|
||||
}
|
||||
|
||||
$(function(){
|
||||
var $container = $( '.post-formats-fields' );
|
||||
|
||||
// Post formats selection
|
||||
$('.post-format-options').on( 'click', 'a', function(e){
|
||||
e.preventDefault();
|
||||
var $this = $(this), editor, body,
|
||||
parent = $this.parent(),
|
||||
format = $this.data('wp-format'),
|
||||
description = $('.post-format-description');
|
||||
function switchFormat ($this) {
|
||||
var editor, body,
|
||||
parent = $this.parent(),
|
||||
format = $this.data('wp-format'),
|
||||
description = $('.post-format-description'),
|
||||
postTitle = $('#title');
|
||||
|
||||
if ( typeof container === 'undefined' )
|
||||
container = $('#post-body-content');
|
||||
|
||||
// Already on this post format. Bail.
|
||||
if ( format === postFormats.currentPostFormat )
|
||||
return;
|
||||
parent.slideUp().find('a.active').removeClass('active');
|
||||
$this.addClass('active');
|
||||
$('#post_format').val(format);
|
||||
$('.post-format-change').show().find('span.icon').removeClass(postFormats.currentPostFormat).addClass(format);
|
||||
// container.addClass('wp-format-set');
|
||||
|
||||
parent.find('a.active').removeClass('active');
|
||||
$this.addClass('active');
|
||||
$('#icon-edit').removeClass(postFormats.currentPostFormat).addClass(format);
|
||||
$('#post_format').val(format);
|
||||
if ( -1 < $.inArray( format, noUIFormats ) ) {
|
||||
switchFormatClass( format ); // No slide
|
||||
$container.hide();
|
||||
} else {
|
||||
$container.slideUp( 200, function(){
|
||||
switchFormatClass( format );
|
||||
$container.slideDown( 400 );
|
||||
});
|
||||
}
|
||||
|
||||
if ( -1 < $.inArray( format, noUIFormats ) && -1 < $.inArray( postFormats.currentPostFormat, noUIFormats ) ) {
|
||||
switchFormatClass( format ); // No slide
|
||||
} else {
|
||||
$container.slideUp( 200, function(){
|
||||
switchFormatClass( format );
|
||||
$container.slideDown( 400 );
|
||||
});
|
||||
postTitle.focus();
|
||||
|
||||
if ( '' === postTitle.val() )
|
||||
$('#title-prompt-text').removeClass('screen-reader-text');
|
||||
|
||||
// Update description line
|
||||
description.html($this.data('description'));
|
||||
|
||||
if (description.not(':visible'))
|
||||
description.slideDown('fast');
|
||||
|
||||
if ( typeof tinymce != 'undefined' ) {
|
||||
editor = tinymce.get('content');
|
||||
|
||||
if ( editor ) {
|
||||
body = editor.getBody();
|
||||
body.className = body.className.replace( /\bpost-format-[^ ]+/, '' );
|
||||
editor.dom.addClass( body, 'post-format-' + format );
|
||||
}
|
||||
}
|
||||
|
||||
$('#title').focus();
|
||||
postFormats.currentPostFormat = format;
|
||||
}
|
||||
|
||||
// Update description line
|
||||
description.html($this.data('description'));
|
||||
$(function(){
|
||||
|
||||
if (description.not(':visible'))
|
||||
description.slideDown('fast');
|
||||
$('.post-format-change a').click(function () {
|
||||
$('.post-formats-fields, .post-format-change').slideUp();
|
||||
$('.post-format-options').slideDown();
|
||||
return false;
|
||||
});
|
||||
|
||||
if ( typeof tinymce != 'undefined' ) {
|
||||
editor = tinymce.get('content');
|
||||
|
||||
if ( editor ) {
|
||||
body = editor.getBody();
|
||||
body.className = body.className.replace( /\bpost-format-[^ ]+/, '' );
|
||||
editor.dom.addClass( body, 'post-format-' + format );
|
||||
}
|
||||
}
|
||||
|
||||
postFormats.currentPostFormat = format;
|
||||
}).on('mouseenter focusin', 'a', function () {
|
||||
$('.post-format-tip').html( $(this).prop('title') );
|
||||
}).on('mouseleave focusout', 'a', function () {
|
||||
$('.post-format-tip').html( $('.post-format-options a.active').prop('title') );
|
||||
// Post formats selection
|
||||
$('.post-format-options').on( 'click', 'a', function(e){
|
||||
e.preventDefault();
|
||||
switchFormat($(this));
|
||||
});
|
||||
|
||||
// Media selection
|
||||
$('.wp-format-media-select').click(function (event) {
|
||||
event.preventDefault();
|
||||
var $el = $(this), $holder, $field, mime = 'image', menu = '',
|
||||
var $el = $(this), mime,
|
||||
$holder = $el.closest('.wp-format-media-holder'),
|
||||
$field = $( '#wp_format_' + $holder.data('format') );
|
||||
|
||||
switch ( $holder.data('format') ) {
|
||||
case 'audio':
|
||||
mime = 'audio';
|
||||
break;
|
||||
case 'video':
|
||||
mime = 'video';
|
||||
break;
|
||||
}
|
||||
mime = $holder.data('format');
|
||||
|
||||
// If the media frame already exists, reopen it.
|
||||
if ( mediaFrame && lastMimeType === mime && lastMenu === menu ) {
|
||||
if ( mediaFrame && lastMimeType === mime ) {
|
||||
mediaFrame.open();
|
||||
return;
|
||||
}
|
||||
|
||||
lastMimeType = mime;
|
||||
lastMenu = menu;
|
||||
|
||||
// Create the media frame.
|
||||
mediaFrame = wp.media.frames.formatMedia = wp.media({
|
||||
// Set the title of the modal.
|
||||
title: $el.data('choose'),
|
||||
|
||||
// Set the menu sidebar of the modal, if applicable
|
||||
toolbar: menu,
|
||||
|
||||
// Tell the modal to show only items matching the current mime type.
|
||||
library: {
|
||||
type: mime
|
||||
|
|
@ -142,7 +140,7 @@ window.wp = window.wp || {};
|
|||
// When an image is selected, run a callback.
|
||||
mediaFrame.on( 'select', function () {
|
||||
// Grab the selected attachment.
|
||||
var attachment = mediaFrame.state().get('selection').first().toJSON();
|
||||
var w = 0, h = 0, html, attachment = mediaFrame.state().get('selection').first().toJSON();
|
||||
|
||||
if ( 0 === attachment.mime.indexOf('audio') ) {
|
||||
$field.val(attachment.url);
|
||||
|
|
@ -157,11 +155,22 @@ window.wp = window.wp || {};
|
|||
// show one preview at a time
|
||||
mediaPreview(attachment);
|
||||
} else {
|
||||
html = wp.media.string.image({}, attachment);
|
||||
// set the hidden input's value
|
||||
$field.val(attachment.id);
|
||||
// Show the image in the placeholder
|
||||
$el.html('<img src="' + attachment.url + '" />');
|
||||
$holder.removeClass('empty').show();
|
||||
$field.val(html);
|
||||
$('#image-preview').remove();
|
||||
if ( attachment.width )
|
||||
w = attachment.width > 600 ? 600 : attachment.width;
|
||||
if ( attachment.height )
|
||||
h = attachment.height;
|
||||
if ( w < attachment.width )
|
||||
h = Math.round( ( h * w ) / attachment.width );
|
||||
$holder.parent().prepend( ['<div id="image-preview" class="wp-format-media-preview">',
|
||||
'<img src="', attachment.url, '"',
|
||||
w ? ' width="' + w + '"' : '',
|
||||
h ? ' height="' + h + '"' : '',
|
||||
' />',
|
||||
'</div>'].join('') );
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -191,7 +191,7 @@
|
|||
props = wp.media.string.props( props, attachment );
|
||||
classes = props.classes || [];
|
||||
|
||||
img.src = props.url;
|
||||
img.src = attachment.url;
|
||||
_.extend( img, _.pick( props, 'width', 'height', 'alt' ) );
|
||||
|
||||
// Only assign the align class to the image if we're not printing
|
||||
|
|
|
|||
|
|
@ -2406,7 +2406,16 @@ function get_the_post_format_image( $attached_size = 'full', &$post = null ) {
|
|||
$link_fmt = '<a href="' . esc_url( $meta['url'] ) . '">%s</a>';
|
||||
|
||||
if ( ! empty( $meta['image'] ) ) {
|
||||
$post->format_content = sprintf( $link_fmt, wp_get_attachment_image( $meta['image'], $attached_size ) );
|
||||
if ( is_numeric( $meta['image'] ) )
|
||||
$image = wp_get_attachment_image( absint( $meta['image'] ), $attached_size );
|
||||
elseif ( preg_match( '/' . get_shortcode_regex() . '/s', $meta['image'] ) )
|
||||
$image = do_shortcode( $meta['image'] );
|
||||
elseif ( ! preg_match( '#<[^>]+>#', $meta['image'] ) )
|
||||
$image = sprintf( '<img src="%s" alt="" />', esc_url( $meta['image'] ) );
|
||||
else
|
||||
$image = $meta['image'];
|
||||
|
||||
$post->format_content = sprintf( $link_fmt, $image );
|
||||
return $post->format_content;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue