I’ve created a custom field in user profile where upload a profile image. It’s very simple.
To create fields I’ve used:
add_action( 'show_user_profile', 'cover_image_function' );
add_action( 'edit_user_profile', 'cover_image_function' );
function cover_image_function( $user )
{
<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>
<img class="user-preview-image" src="https://wordpress.stackexchange.com/questions/233199/<?php echo esc_attr( get_the_author_meta("mycoverimage', $user->ID ) ); ?>">
<input type="text" name="mycoverimage" id="mycoverimage" value="https://wordpress.stackexchange.com/questions/233199/<?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>
<script type="text/javascript">
(function( $ ) {
$( 'input#coverimage' ).on('click', function() {
tb_show('', 'media-upload.php?type=image&TB_iframe=true');
window.send_to_editor = function( html )
{
imgurl = $( 'img', html ).attr( 'src' );
$( '#mycoverimage' ).val(imgurl);
tb_remove();
}
return false;
});
})(jQuery);
</script>
}
To save my image:
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' ] );
}
Everything works fine but I can’t retrieve the attachment ID for generating the thumbnails and smaller sizes. For now I can just get the url like:
echo esc_attr( get_the_author_meta( 'mycoverimage', $user->ID ) );
I’ve even used the known method like in other questions:
function get_attachment_id($image_url) {
global $wpdb;
$attachment = $wpdb->get_col($wpdb->prepare("SELECT ID FROM $wpdb->posts WHERE guid='%s';", $image_url ));
return $attachment[0];
}
But It doesn’t work. Is it possible that the image doesn’t generate any attachment metadata, while uploading? And how Can I do it? Even suggestions, articles or questions already answered would be appreciated. Everything but a plugin, I want build a custom code. Thanks!
3 Answers
I suggest you to use the more newer media manager dialog; WordPress will hanlde all the image upload stuff, including generating intermediate sizes and attachement metadata.
Here a working example (it is a quick example built from a previous code, it may needs some tweaks to be used on production):
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="https://wordpress.stackexchange.com/questions/233199/<?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();
}
}
And myscript.js file:
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 );
}
});
}
Note that this code stores image id on user meta field instead of full size image url as you was doing before, so you can get any image size form the user meta field:
$image_id = get_user_meta( $user->ID, 'mycoverimage', true );
$fulle_user_image = wp_get_attachment_image( $image_id, 'full' );
