Adding Multiple "Featured" Images to Posts

gistfile1.txt

function add_featured_images ( $howmany = 1 ) {
	global $imgs;
	$imgs = $howmany;
	// add the meta boxes
	add_action( 'add_meta_boxes', function( ) {
		global $imgs;
		// what post types do we want to allow this on?
		$post_types = array( 'post', 'page' );
		foreach( $post_types as $pt ){
			add_meta_box( 'custom_postimage_meta_box', __( ucfirst( $pt ) . ' Images' ), function( $post ) {
				global $imgs;                    
				$meta_keys = array();
				for( $i = 0; $i < $imgs; ++$i ){
					$meta_keys[] = 'featured_image_' . $i;
				}
				$_idx = 0;
				foreach( $meta_keys as $meta_key ) {
					$image_meta_val = get_post_meta( $post -> ID, $meta_key, true );
					?>
					<h4><?php echo ( $_idx == 0 ) ? 'Masthead' : ''; ?> Image <?php echo ( $_idx == 0 ) ? '' : $_idx; ?></h4>
					<div class="custom_postimage_wrapper" id="<?php echo $meta_key; ?>_wrapper" style="margin-bottom:20px;">
						<input type="button" data-what="image" data-which="<?php echo $meta_key; ?>" class="button gyo_upload" value="<?php _e( 'Attach Image' ); ?>" />
						<button type="submit" class="remove_image_button button" data-which="<?php echo $meta_key; ?>">&times;</button>
						<input type='hidden' name='<?php echo $meta_key; ?>' id='<?php echo $meta_key; ?>' value='<?php echo $image_meta_val; ?>'>
						<div class='image-preview-wrapper'>
							<img id='img_<?php echo $meta_key; ?>' src='<?php echo $image_meta_val; ?>' style='max-height: 100px; width: 100px;'>
						</div>
					</div>                        
					<?php
					$_idx++;
				}
				//wp_nonce_field( 'custom_postimage_meta_box', 'custom_postimage_meta_box_nonce' );
			}, $pt, 'side', 'low' );
		}
	} );
	// add the post saving
	add_action( 'save_post', function( $post_id ) {
		global $imgs;           
		for( $i = 0; $i < $imgs; ++$i ){
			$meta_keys[] = 'featured_image_' . $i;
		}
		foreach( $meta_keys as $meta_key ){
			if ( isset( $_POST[$meta_key] ) ) {
				update_post_meta( $post_id, $meta_key, $_POST[$meta_key] );
			}
		}
	} );
}


// Move the code under this comment to a enqueue'd javascript file
jQuery( document ).ready( function( $ ) {

	// pop the media box
	$('.gyo_upload').on( 'click', function( e ) {
		
		// prevent the default behavior
		e.preventDefault();
		
		// get what we're clicking
		var $button = $( this );
		
		// now figure out which one we want to popup
		var $what = $button.data( 'what' );
		
		// what do we actually want to popup here?
		if ( $what == 'image' ) {
			// image frame
			mediaUploader = wp.media.frames.file_frame = wp.media( {
				title: 'Choose Image',
				button: {
				text: 'Choose Image'
				}, multiple: false } );
			mediaUploader.on( 'select', function( ) {
				var $_which = $button.data( 'which' );
				var attachment = mediaUploader.state().get( 'selection' ).first().toJSON();
				$( '#img_' + $_which ).attr( 'src', attachment.url ).css( 'width', 'auto' );
				$( '#' + $_which ).val( attachment.url );
			} );
			mediaUploader.open();
		} else if ( $what == 'media' ) {
			// media frame
			var send_attachment_bkp = wp.media.editor.send.attachment;
			wp.media.editor.send.attachment = function( props, attachment ) {
				var $_which = $button.data( 'which' );
				$( '#img_' + $_which ).attr( 'src', attachment.url ).css( 'width', 'auto' );
				$( '#' + $_which ).val( attachment.url );
				wp.media.editor.send.attachment = send_attachment_bkp;
			}
			wp.media.editor.open( $button );
		}		
		
		return false;
	} );
	
	// process the remove attachment button
	$( '.remove_image_button' ).click( function() {
		var answer = confirm( 'Are you sure?' );
		if ( answer == true ) {
			var $this = $( this );
			var $_which = $this.data( 'which' );
			$( '#img_' + $_which ).attr('src', '');
			$( '#' + $_which ).val( '' );
		}
		return false;
	} );

} );