重新打开WP媒体上传器后选择的Wordpress显示图像

时间:2018-11-27 07:51:12

标签: javascript php jquery wordpress

我正在尝试为自己的帖子类型管理区域制作一个小图片上传元框。我想要一种行为,当用户单击帖子页面上的“上传图像”按钮时,会弹出图像框架,并且用户可以对其进行多选。此后,用户可以关闭框架(由于我尚未单击帖子页面上的“更新”,因此该帖子尚未更新),并且如果用户改变主意,则可以重新打开图库框架并进行调整图像选择。但是,我希望已经选择了上次选择的图像。我该怎么办?这是我的JS文件

    jQuery(function($)
{


    $('body').on('click', '.mycustomfunction_upload_image_button', function(e)
    {
        e.preventDefault();

        var button = $(this),
        custom_uploader = wp.media({
            title: 'Insert image',
            library : {
                type : 'image'
            },
            button: {
                text: 'Use the Image(s)' // button label text
            },
            multiple: 'add' 
        }).on('select', function() 
        {  
            var attachments = custom_uploader.state().get('selection').map( 
                function( attachment ) 
                {
                    attachment.toJSON();
                    return attachment;
                }
            );

            var selected_image_ids = [];
            for (var i = 0; i < attachments.length; i++) {
                $(button).after('<div class="mycustomfunction_order_image_preview"><img src="' + attachments[i].attributes.url + '" style="max-width:95%;display:block;" /></div>');
                selected_image_ids.push(attachments[i].id);
            }

            $('#mycustomfunction_order_iamge_inputs').val(selected_image_ids.join(','));
        });

        custom_uploader.on('open',function() 
        {
            var selection = custom_uploader.state().get('selection');
            var ids_value = (jQuery('#mycustomfunction_order_iamge_inputs').val()).split();

            if(ids_value.length > 0) 
            {
                //var ids = ids_value.split(',');
                ids_value.forEach(function(id) {
                    attachment = wp.media.attachment(id);
                    attachment.fetch();
                    selection.add(attachment ? [attachment] : []);
                });
            }
        });

        custom_uploader.open();
    });


});

这是我的php文件

    function mycustomfunction_order_image_upload() 
{

    if ( ! did_action( 'wp_enqueue_media' ) ) 
    {
        wp_enqueue_media();
    }

    wp_enqueue_script( 'order_image_upload', MYCUSTOM_PLUGIN_URL . '/assets/js/upload_order_images.js', array('jquery'), null, false );
}

add_action( 'admin_enqueue_scripts', 'mycustomfunction_order_image_upload' );


/*
* @param string $name Name of option or name of post custom field.
* @param string $value Optional Attachment ID
* @return string HTML of the Upload Button
*/
function mycustomfunction_admin_order_upload_image_field( $name, $values = array()) 
{
    $image_size = 'full'; // it would be better to use thumbnail size here (150x150 or so)
    $display = 'none'; // display state ot the "Remove image" button
    $images_html = '<div>';

    if (!empty($values) && count($values) > 0)
    {
        $images_html .= '
                    <a href="#" class="mycustomfunction_upload_image_button button">Upload Image</a>
                    <input type="hidden" name="mycustomfunction_selected_image_ids" id="mycustomfunction_order_iamge_inputs" value="' . implode(",", $values) . '" />
                    <a href="#" class="mycustomfunction_remove_image_button" style="display:inline-block;display:' . $display . '">Remove image</a>';

        foreach ($values as $value)
        {
            $image_attributes = wp_get_attachment_image_src( $value, $image_size ); 

            // $image_attributes[0] - image URL
            // $image_attributes[1] - image width
            // $image_attributes[2] - image height

            $images_html .= '<div class="mycustomfunction_order_image_preview"><img src="' . $image_attributes[0] . '" style="max-width:95%;display:block;" /></div>';
        }
    }
    else
    {
        $images_html .= '
                    <a href="#" class="mycustomfunction_upload_image_button button">Upload Image</a>
                    <input type="hidden" name="mycustomfunction_selected_image_ids" id="mycustomfunction_order_iamge_inputs" value="" />
                    <a href="#" class="mycustomfunction_remove_image_button" style="display:inline-block;display:' . $display . '">Remove image</a>';
    }

    $images_html .= '</div>';
    return $images_html;
}


/*
* Add a meta box
*/
add_action( 'add_meta_boxes', 'misha_meta_box_add' );

function misha_meta_box_add() {
    add_meta_box('order_image_upload', // meta box ID
        'Upload Order Image(s)', // meta box title
        'print_admin_order_image_meta_box', // callback function that prints the meta box HTML 
        'shop_order', // post type where to add it
        'side', // priority
        'core' ); // position
}

/*
* Meta Box HTML
*/
function print_admin_order_image_meta_box( $post ) {
    $meta_key = 'second_featured_img';
    $meta_value = get_post_meta($post->ID, $meta_key, true);
    echo mycustomfunction_admin_order_upload_image_field( $meta_key, empty($meta_value) ? array() : $meta_value);
}

/*
* Save Meta Box data
*/
add_action('save_post', 'save_order_images');

function save_order_images( $post_id ) {
    if ( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE ) 
        return $post_id;

    $meta_key = 'second_featured_img';

    update_post_meta( $post_id, $meta_key, $_POST[$meta_key] );

    // if you would like to attach the uploaded image to this post, uncomment the line:
    // wp_update_post( array( 'ID' => $_POST[$meta_key], 'post_parent' => $post_id ) );

    return $post_id;
}

0 个答案:

没有答案