Featured Image Quick Edit

/**
 * Snippet Name:     Featured Image Quick Edit
 * Snippet Author:   coding-bunny.com
 * Description:      Easily add, display, and manage featured images directly from the WordPress posts list with Quick Edit functionality.
 */
 
// Add a column for the featured image in the posts list table
add_filter('manage_posts_columns', function ($columns) {
    $columns['featured_image'] = __('Featured Image');
    return $columns;
});

// Display the featured image in the custom column
add_action('manage_posts_custom_column', function ($column, $post_id) {
    if ($column === 'featured_image') {
        // Display the thumbnail or a fallback message
        echo get_the_post_thumbnail($post_id, [50, 50]) ?: __('No Image');
    }
}, 10, 2);

// Add a field to Quick Edit for setting the featured image
add_action('quick_edit_custom_box', function ($column_name, $post_type) {
    if ($column_name === 'featured_image') {
        ?>
        <fieldset class="inline-edit-col-left">
            <div class="inline-edit-col">
                <label>
                    <span class="title"><?php _e('Featured Image'); ?></span>
                    <input type="hidden" name="cb_featured_image_id" class="cb_featured_image_id" value="">
                    <button type="button" class="button cb-set-featured-image"><?php _e('Set Image'); ?></button>
                    <div class="cb-featured-image-preview" style="margin-top: 10px;"></div>
                </label>
            </div>
        </fieldset>
        <?php
    }
}, 10, 2);

// Save the featured image ID when Quick Edit is saved
add_action('save_post', function ($post_id) {
    // Check user capability and the presence of the custom field
    if (isset($_POST['cb_featured_image_id']) && current_user_can('edit_post', $post_id)) {
        $featured_image_id = absint($_POST['cb_featured_image_id']); // Sanitize input
        if ($featured_image_id) {
            set_post_thumbnail($post_id, $featured_image_id); // Set the featured image
        } else {
            delete_post_thumbnail($post_id); // Remove the featured image if no ID is provided
        }
    }
});

// Enqueue media uploader and add inline scripts for Quick Edit
add_action('admin_enqueue_scripts', function ($hook) {
    if ($hook === 'edit.php') {
        // Enqueue WordPress media uploader
        wp_enqueue_media();

        // Add inline JavaScript for Quick Edit functionality
        wp_add_inline_script('jquery', '
            jQuery(document).ready(function ($) {
                // Open the WordPress media uploader
                $(document).on("click", ".cb-set-featured-image", function () {
                    var frame = wp.media({
                        title: "Set Featured Image",
                        button: { text: "Set Image" },
                        multiple: false
                    });

                    var $button = $(this);
                    frame.on("select", function () {
                        var attachment = frame.state().get("selection").first().toJSON();
                        $button.siblings(".cb_featured_image_id").val(attachment.id);
                        $button.siblings(".cb-featured-image-preview").html("<img src=\'" + attachment.sizes.thumbnail.url + "\' style=\'max-width: 100%; height: auto;\' />");
                    });

                    frame.open();
                });

                // Pre-fill Quick Edit fields when the Quick Edit button is clicked
                $(document).on("click", ".editinline", function () {
                    var $row = $(this).closest("tr");
                    var featuredImageId = $row.find(".featured_image img").data("id");
                    var $quickEditRow = $("#the-list").siblings("#inline-edit");

                    // Populate the hidden input and preview in Quick Edit
                    $quickEditRow.find(".cb_featured_image_id").val(featuredImageId);
                    $quickEditRow.find(".cb-featured-image-preview").html($row.find(".featured_image img").clone());
                });
            });
        ');
    }
});