Make WordPress Core


Ignore:
Timestamp:
04/17/2013 04:08:46 AM (11 years ago)
Author:
markjaquith
Message:

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.

File:
1 edited

Legend:

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

    r23985 r24006  
    11<?php
    22global $wp_embed;
     3
    34$format_meta = get_post_format_meta( $post_ID );
    45
    56?>
    6 <div class="post-format-description"></div>
     7<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>
    78<div class="post-formats-fields">
    89
     
    1920    </div>
    2021
    21     <?php
    22     $image = false;
    23     if ( ! empty( $format_meta['image'] ) && is_numeric( $format_meta['image'] ) ) {
    24         $format_meta['image'] = absint( $format_meta['image'] );
    25         $image = wp_get_attachment_url( $format_meta['image'] );
    26     }
    27     ?>
    2822    <div class="field wp-format-image">
    29         <div data-format="image" class="wp-format-media-holder hide-if-no-js<?php if ( ! $image ) echo ' empty'; ?>">
     23        <?php if ( ! empty( $format_meta['image'] ) ) : ?>
     24        <div id="image-preview" class="wp-format-media-preview">
     25            <?php
     26                if ( is_numeric( $format_meta['image'] ) ) {
     27                    $format_meta['image'] = absint( $format_meta['image'] );
     28                    $image = wp_get_attachment_url( $format_meta['image'] );
     29                    printf( '<img src="%s" alt="%s" />', esc_url( $image ), get_the_title( $format_meta['image'] ) );
     30                } elseif ( preg_match( '/' . get_shortcode_regex() . '/s', $format_meta['image'] ) ) {
     31                    echo do_shortcode( $format_meta['image'] );
     32                } elseif ( ! preg_match( '#<[^>]+>#', $format_meta['image'] ) ) {
     33                    printf( '<img src="%s" alt="" />', esc_url( $format_meta['image'] ) );
     34                } else {
     35                    echo $format_meta['image'];
     36                }
     37            ?>
     38        </div>
     39        <?php endif ?>
     40        <label for="wp_format_image"><?php
     41            if ( current_user_can( 'unfiltered_html' ) )
     42                _e( 'Image HTML or URL' );
     43            else
     44                _e( 'Image URL' );
     45        ?></label>
     46        <textarea id="wp_format_image" type="text" name="_wp_format_image" class="widefat"><?php esc_html_e( $format_meta['image'] ); ?></textarea>
     47        <div data-format="image" class="wp-format-media-holder hide-if-no-js">
    3048            <a href="#" class="wp-format-media-select"
    3149                data-choose="<?php esc_attr_e( 'Choose an Image' ); ?>"
    3250                data-update="<?php esc_attr_e( 'Select Image' ); ?>">
    33                 <?php
    34                     if ( $image )
    35                         printf( '<img src="%s" alt="%s" />', esc_url( $image ), get_the_title( $format_meta['image'] ) );
    36                     else
    37                         _e( 'Select / Upload Image' );
    38                 ?>
     51                <?php _e( 'Select / Upload Image' ); ?>
    3952            </a>
    4053        </div>
    41         <input id="wp_format_image" type="hidden" name="_wp_format_image" value="<?php echo esc_attr( $format_meta['image'] ); ?>" />
    4254    </div>
    4355
     
    4759    </div>
    4860
    49     <?php
    50     $show_video_preview = ! empty( $format_meta['video'] );
    51     ?>
    52     <div class="field wp-format-video<?php if ( $show_video_preview ) echo ' has-media-preview'; ?>">
    53         <?php if ( $show_video_preview ): ?>
     61    <div class="field wp-format-video">
     62        <?php if ( ! empty( $format_meta['video'] ) ): ?>
    5463        <div id="video-preview" class="wp-format-media-preview">
    5564            <?php
     
    7786        ?></label>
    7887        <textarea id="wp_format_video" type="text" name="_wp_format_video" class="widefat"><?php esc_html_e( $format_meta['video'] ); ?></textarea>
    79         <div data-format="video" class="wp-format-media-holder hide-if-no-js<?php if ( ! $image ) echo ' empty'; ?>">
     88        <div data-format="video" class="wp-format-media-holder hide-if-no-js">
    8089            <a href="#" class="wp-format-media-select"
    8190                data-choose="<?php esc_attr_e( 'Choose a Video' ); ?>"
     
    8695    </div>
    8796
    88     <?php
    89     $show_audio_preview = ! empty( $format_meta['audio'] );
    90     ?>
    91     <div class="field wp-format-audio<?php if ( $show_audio_preview ) echo ' has-media-preview' ?>">
    92         <?php if ( $show_audio_preview ): ?>
     97    <div class="field wp-format-audio">
     98        <?php if ( ! empty( $format_meta['audio'] ) ): ?>
    9399        <div id="audio-preview" class="wp-format-media-preview">
    94100            <?php
     
    115121                _e( 'Audio URL' );
    116122        ?></label>
    117         <textarea id="wp_format_audio" name="_wp_format_audio" class="widefat"><?php esc_html_e( $format_meta['audio'] );
    118 ?></textarea>
    119         <div data-format="audio" class="wp-format-media-holder hide-if-no-js<?php if ( empty( $format_meta['audio'] ) ) echo ' empty'; ?>">
     123        <textarea id="wp_format_audio" name="_wp_format_audio" class="widefat"><?php esc_html_e( $format_meta['audio'] ); ?></textarea>
     124        <div data-format="audio" class="wp-format-media-holder hide-if-no-js">
    120125            <a href="#" class="wp-format-media-select" data-choose="<?php esc_attr_e( 'Choose Audio' ); ?>" data-update="<?php esc_attr_e( 'Select Audio' ); ?>">
    121126                <?php _e( 'Select Audio From Media Library' ) ?>
Note: See TracChangeset for help on using the changeset viewer.