Get attachment ID of author_meta image – Attachment Metadata

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' );

Leave a Comment