Changeset 21770

Timestamp:

09/06/2012 08:49:35 AM (12 years ago)

Author:

koopersmith

Message:

First pass at integrating featured images with the new media workflow.

Updates the featured image when the publish/update button is clicked (rather than instantly). Uses the existing post_thumbnail_meta_box() function. Does not remove the old featured image meta box JS, ajax handler, or CSS.

see #21776, #21390.

Location:

trunk

Files:

• wp-admin/css/wp-admin.css (modified) (2 diffs)
• wp-admin/includes/meta-boxes.php (modified) (1 diff)
• wp-admin/includes/post.php (modified) (1 diff)
• wp-includes/script-loader.php (modified) (1 diff)

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

@@ -24 +24 @@
     11.1 - Custom Fields
     11.2 - Post Revisions
+    11.3 - Featured Images
 12.0 - Categories
 13.0 - Tags
@@ -3240 +3241 @@
 }
 
+/*------------------------------------------------------------------------------
+  11.3 - Featured Images
+------------------------------------------------------------------------------*/
+
+#select-featured-image {
+    padding: 4px 0;
+    overflow: hidden;
+}
+
+#select-featured-image img {
+    max-width: 100%;
+    height: auto;
+    margin-bottom: 10px;
+}
+
+#select-featured-image a {
+    float: left;
+    clear: both;
+}
+
+#select-featured-image .remove {
+    display: none;
+    margin-top: 10px;
+}
+
+#select-featured-image.has-featured-image .remove {
+    display: inline-block;
+}
 
 /*------------------------------------------------------------------------------

trunk/wp-admin/includes/meta-boxes.php

@@ -912 +912 @@
  */
 function post_thumbnail_meta_box( $post ) {
-    $thumbnail_id = get_post_meta( $post->ID, '_thumbnail_id', true );
-    echo _wp_post_thumbnail_html( $thumbnail_id );
-}
+    global $_wp_additional_image_sizes;
+
+    ?><script type="text/javascript">
+    jQuery( function($) {
+        var $element     = $('#select-featured-image'),
+            $thumbnailId = $element.find('input[name="thumbnail_id"]'),
+            title        = '<?php _e( "Choose a Featured Image" ); ?>',
+            workflow, setFeaturedImage;
+
+        setFeaturedImage = function( thumbnailId ) {
+            $element.find('img').remove();
+            $element.toggleClass( 'has-featured-image', -1 != thumbnailId );
+            $thumbnailId.val( thumbnailId );
+        };
+
+        $element.on( 'click', '.choose, img', function( event ) {
+            event.preventDefault();
+
+            if ( ! workflow ) {
+                workflow = wp.media();
+                workflow.selection.on( 'add', function( model ) {
+                    var sizes = model.get('sizes'),
+                        size;
+
+                    setFeaturedImage( model.id );
+
+                    // @todo: might need a size hierarchy equivalent.
+                    if ( sizes )
+                        size = sizes['post-thumbnail'] || sizes.medium;
+
+                    // @todo: Need a better way of accessing full size
+                    // data besides just calling toJSON().
+                    size = size || model.toJSON();
+
+                    workflow.modal.close();
+                    workflow.selection.clear();
+
+                    $( '<img />', {
+                        src:    size.url,
+                        width:  size.width
+                    }).prependTo( $element );
+                });
+                workflow.modal.title( title );
+            }
+
+            workflow.modal.open();
+        });
+
+        $element.on( 'click', '.remove', function( event ) {
+            event.preventDefault();
+            setFeaturedImage( -1 );
+        });
+    });
+    </script>
+
+    <?php
+    $thumbnail_id   = get_post_meta( $post->ID, '_thumbnail_id', true );
+    $thumbnail_size = isset( $_wp_additional_image_sizes['post-thumbnail'] ) ? 'post-thumbnail' : 'medium';
+    $thumbnail_html = wp_get_attachment_image( $thumbnail_id, $thumbnail_size );
+
+    $classes = empty( $thumbnail_id ) ? '' : 'has-featured-image';
+
+    ?><div id="select-featured-image"
+        class="<?php echo esc_attr( $classes ); ?>"
+        data-post-id="<?php echo esc_attr( $post->ID ); ?>">
+        <?php echo $thumbnail_html; ?>
+        <input type="hidden" name="thumbnail_id" value="<?php echo esc_attr( $thumbnail_id ); ?>" />
+        <a href="#" class="choose button-secondary"><?php _e( 'Choose a Featured Image' ); ?></a>
+        <a href="#" class="remove"><?php _e( 'Remove Featured Image' ); ?></a>
+    </div>
+    <?php
+}

trunk/wp-admin/includes/post.php

@@ -197 +197 @@
         elseif ( '0' == $post_data['post_format'] )
             set_post_format( $post_ID, false );
+    }
+
+    // Featured Images
+    if ( isset( $post_data['thumbnail_id'] ) ) {
+        if ( '-1' == $post_data['thumbnail_id'] )
+            delete_post_thumbnail( $post_ID );
+        else
+            set_post_thumbnail( $post_ID, $post_data['thumbnail_id'] );
     }
 

trunk/wp-includes/script-loader.php

@@ -319 +319 @@
     did_action( 'init' ) && $scripts->localize( 'media-views', '_wpMediaViewsL10n', array(
         'insertMedia'         => __( 'Insert Media' ),
-        'chooseFeatured'      => __( 'Choose a Featured Image' ),
         'selectMediaSingular' => __( 'Select a media file:' ),
         'selectMediaMultiple' => __( 'Select one or more media files:' ),