我建议您使用更新的media manager对话框;WordPress将处理所有图像上传内容,包括生成中间大小和附加元数据。
这里是一个工作示例(这是一个根据以前的代码构建的快速示例,可能需要在生产中使用一些调整):
add_action( \'admin_enqueue_scripts\', \'load_wp_media_files\' );
function load_wp_media_files( $page ) {
if( $page == \'profile.php\' || $page == \'user-edit.php\' ) {
wp_enqueue_media();
wp_enqueue_script( \'my_custom_script\', plugins_url( \'/js/myscript.js\' , __FILE__ ), array(\'jquery\'), \'0.1\' );
}
}
add_action( \'show_user_profile\', \'cover_image_function\' );
add_action( \'edit_user_profile\', \'cover_image_function\' );
function cover_image_function( $user )
{
$image_id = get_user_meta( $user->ID, \'mycoverimage\', true );
if( intval( $image_id ) > 0 ) {
// Change with the image size you want to use
$image = wp_get_attachment_image( $image_id, \'medium\', false, array( \'id\' => \'user-preview-image\' ) );
} else {
$image = \'<img id="user-preview-image" src="https://some.default.image.jpg" />\';
}
?>
<h3>Cover Image</h3>
<style type="text/css">
.fh-profile-upload-options th,
.fh-profile-upload-options td,
.fh-profile-upload-options input {
vertical-align: top;
}
.user-preview-image {
display: block;
height: auto;
width: 300px;
}
</style>
<table class="form-table fh-profile-upload-options">
<tr>
<th>
<label for="image">Cover Image</label>
</th>
<td>
<?php echo $image; ?>
<input type="hidden" name="mycoverimage" id="mycoverimage" value="<?php echo esc_attr( get_the_author_meta( \'mycoverimage\', $user->ID ) ); ?>" class="regular-text" />
<input type=\'button\' class="button-primary" value="Upload Image" id="coverimage"/><br />
<span class="description">Please upload your cover image.</span>
</td>
</tr>
</table>
<?php
}
add_action( \'personal_options_update\', \'save_cover_image\' );
add_action( \'edit_user_profile_update\', \'save_cover_image\' );
function save_cover_image( $user_id ) {
if ( ! current_user_can( \'edit_user\', $user_id ) )
{
return false;
}
update_user_meta( $user_id, \'mycoverimage\', $_POST[ \'mycoverimage\' ] );
}
// Ajax action to refresh the user image
add_action( \'wp_ajax_cyb_get_image_url\', \'cyb_get_image_url\' );
function cyb_get_image_url() {
if(isset($_GET[\'id\']) ){
$image = wp_get_attachment_image( filter_input( INPUT_GET, \'id\', FILTER_VALIDATE_INT ), \'medium\', false, array( \'id\' => \'user-preview-image\' ) );
$data = array(
\'image\' => $image,
);
wp_send_json_success( $data );
} else {
wp_send_json_error();
}
}
和myscript。js文件:
jQuery(document).ready( function($) {
jQuery(\'input#coverimage\').click(function(e) {
e.preventDefault();
var image_frame;
if(image_frame){
image_frame.open();
}
image_frame = wp.media({
title: \'Select Media\',
multiple : false,
library : {
type : \'image\',
}
});
image_frame.on(\'close\',function() {
// get selections and save to hidden input plus other AJAX stuff etc.
var selection = image_frame.state().get(\'selection\');
var gallery_ids = new Array();
var my_index = 0;
selection.each(function(attachment) {
gallery_ids[my_index] = attachment[\'id\'];
my_index++;
});
var ids = gallery_ids.join(",");
jQuery(\'input#mycoverimage\').val(ids);
Refresh_Image(ids);
});
image_frame.on(\'open\',function() {
var selection = image_frame.state().get(\'selection\');
ids = jQuery(\'input#mycoverimage\').val().split(\',\');
ids.forEach(function(id) {
attachment = wp.media.attachment(id);
attachment.fetch();
selection.add( attachment ? [ attachment ] : [] );
});
});
image_frame.on(\'toolbar:create:select\',function() {
image_frame.state().set(\'filterable\', \'uploaded\');
});
image_frame.open();
});
});
function Refresh_Image(the_id){
var data = {
action: \'cyb_get_image_url\',
id: the_id
};
jQuery.get(ajaxurl, data, function(response) {
if(response.success === true) {
jQuery(\'#user-preview-image\').replaceWith( response.data.image );
}
});
}
请注意
this code stores image id on user meta field 与之前的全尺寸图像url不同,您可以从用户元字段中获取任意大小的图像:
$image_id = get_user_meta( $user->ID, \'mycoverimage\', true );
$fulle_user_image = wp_get_attachment_image( $image_id, \'full\' );