Featured Images in an Admin Column and in Quick Edit

wp_thumbnails_in_admin_column.php

<?php

// just in a case, let’s activate feature images for your theme by adding the code below
add_action( 'after_setup_theme', function() {
	add_theme_support( 'post-thumbnails' );
} );


// 1. Featured Images Column

// This action hook allows to add a new empty column
add_filter( 'manage_post_posts_columns', 'rudr_featured_image_column' );
function rudr_featured_image_column( $cols ) {

	$cols = array_slice( $cols, 0, 1, true )
	+ array( 'featured_image' => 'Featured Image' ) // our new column
	+ array_slice( $cols, 1, NULL, true );

	return $cols;
}

// This hook fills our column with data
add_action( 'manage_posts_custom_column', 'rudr_render_the_column', 10, 2 );
function rudr_render_the_column( $column_name, $post_id ) {

	if( 'featured_image' === $column_name ) {

		// if there is no featured image for this post, print the placeholder
		if( has_post_thumbnail( $post_id ) ) {

			// I know about get_the_post_thumbnail() function but we need data-id attribute here
			$id = get_post_thumbnail_id( $post_id );
			$url = esc_url( wp_get_attachment_image_url( $id ) );
			?><img data-id="<?php echo $id ?>" src="<?php echo $url ?>" /><?php

		} else {
			// data-id should be "-1" I will explain below
			?><img data-id="-1" src="placeholder-image.png" /><?php
		}
	}
}


// 2. Add Featured Image Option to Quick Edit and Update it With JavaScript

// Enqueue Scripts
add_action( 'admin_enqueue_scripts', 'rudr_include_myuploadscript' );
function rudr_include_myuploadscript() {
	if ( ! did_action( 'wp_enqueue_media' ) ) {
		wp_enqueue_media();
	}
}

// Add Quick Edit fields in HTML
add_action( 'quick_edit_custom_box',  'rudr_featured_image_quick_edit', 10, 2 );
function rudr_featured_image_quick_edit( $column_name, $post_type ) {

	// add it only if we have featured image column
	if( 'featured_image' !== $column_name ){
		return;
	}
	?>
		<fieldset id="misha_featured_image" class="inline-edit-col-left">
			<div class="inline-edit-col">
				<span class="title">Featured Image</span>
				<div>
					<a href="#" class="button rudr-upload-img">Set featured image</a>
					<input type="hidden" name="_thumbnail_id" value="" />
				</div>
				<a href="#" class="rudr-remove-img">Remove Featured Image</a>
			</div>
		</fieldset>
		<?php
}



// Including media uploader using JavaScript (jQuery actually) 
// jQuery(function($){

// 	// add image
// 	$('body').on( 'click', '.rudr-upload-img', function( event ) {
// 		event.preventDefault();

// 		const button = $(this);
// 		const customUploader = wp.media({
// 			title: 'Set featured image',
// 			library : { type : 'image' },
// 			button: { text: 'Set featured image' },
// 		}).on( 'select', () => {
// 			const attachment = customUploader.state().get('selection').first().toJSON();
// 			button.removeClass('button').html( '<img src="' + attachment.url + '" />').next().val(attachment.id).parent().next().show();
// 		}).open();

// 	});

// 	// remove image

// 	$('body').on('click', '.rudr-remove-img', function( event ) {
// 		event.preventDefault();
// 		$(this).hide().prev().find( '[name="_thumbnail_id"]').val('-1').prev().html('Set featured Image').addClass('button' );
// 	});

// 	const $wp_inline_edit = inlineEditPost.edit;

// 	inlineEditPost.edit = function( id ) {
// 		$wp_inline_edit.apply( this, arguments );
// 		let postId = 0;
// 		if( typeof( id ) == 'object' ) {
// 			postId = parseInt( this.getId( id ) );
// 		}

// 		if ( postId > 0 ) {
// 			const editRow = $( '#edit-' + postId )
// 			const postRow = $( '#post-' + postId )
// 			const featuredImage = $( '.column-featured_image', postRow ).html()
// 			const featuredImageId = $( '.column-featured_image', postRow ).find('img').data('id')

// 			if( featuredImageId != -1 ) {

// 				$( ':input[name="_thumbnail_id"]', editRow ).val( featuredImageId ); // ID
// 				$( '.rudr-upload-img', editRow ).html( featuredImage ).removeClass( 'button' ); // image HTML
// 				$( '.rudr-remove-img', editRow ).show(); // the remove link

// 			}
// 		}
// 	}
// });



// to make our column to look neat, let’s add some CSS:
// #featured_image{
// 	width:120px;
// }
// td.featured_image.column-featured_image img{
// 	max-width: 100%;
// 	height: auto;
// }