User Profile Picture

User Profile Picture Add-on allows you to set a custom profile image for a user via the standard WordPress media upload tool. It also comes with a Gutenberg block for displaying the user information and profile picture in the front-end.

Activate the User Profile Picture Add-On

This add-on is included in the Profile Builder plugin. To activate the User Profile Picture Add-on navigate to the Add-ons page, locate it under the Free Add-ons section and click Activate. You can then visit your profile or any of your user’s profiles and click to edit, upload, and save a new profile image.

Setting a New Profile Image

To set a new profile image simply head to your profile or any of your user’s profile and find the section for Profile Image.

Click the image and it’ll launch a modal where you can select a profile image for inclusion.

Here’s a video below demonstrating how to set a profile image:

Removing a Profile Image

There are two ways to remove a profile image:

• Click the Trash icon on the image to remove it.
• Click on the image and select Remove Profile Image.

Displaying the Profile Image

Use the Template Function

There’s a built-in template function that will retrieve and display the profile image. It accepts the same arguments as get_the_post_thumbnail. Here’s an example of it in use.

Here’s a video below showcasing the Gutenberg block.

Using an Author Box Template Function

This is for advanced users, but you can mimic the Gutenberg author box using a template function called mt_author_box. Details and an example are below.

Author Box Defaults

$defaults = array(
    'theme'                           => 'regular', /* can be 'regular', 'compact', 'profile', or 'tabbed' */
    'profileAvatarShape'              => 'square', /* Can be 'square' or 'rounded' */
    'padding'                         => 10,
    'border'                          => 1,
    'borderRounded'                   => 5,
    'borderColor'                     => '#000000',
    'profileBackgroundColor'          => '#FFFFFF',
    'profileTextColor'                => '#000000',
    'showName'                        => true,
    'showTitle'                       => false,
    'fontSize'                        => 18,
    'profileName'                     => $user->data->display_name,
    'profileTitle'                    => '',
    'avatarSize'                      => 150,
    'profileImgURL'                   => get_avatar_url( $user_id, isset( $attributes['avatarSize'] ) ? $attributes['avatarSize'] : 150 ),
    'headerFontSize'                  => 24,
    'showDescription'                 => true,
    'showSocialMedia'                 => true,
    'profileContent'                  => get_user_meta( $user_id, 'description', true ),
    'profileFontSize'                 => 18,
    'showViewPosts'                   => true,
    'profileURL'                      => get_author_posts_url( $user_id ),
    'website'                         => '', /* Needs to be a URl */
    'showWebsite'                     => false,
    'showPostsWidth'                  => '100%', /* ignored if website is not empty and true */
    'profileViewPostsBackgroundColor' => '#cf6d38',
    'profileViewPostsTextColor'       => '#FFFFFF',
    'buttonFontSize'                  => 16,
    'profileWebsiteBackgroundColor'   => '#333333',
    'profileWebsiteTextColor'         => '#FFFFFF',
    'profileLinkColor'                => '#000000',
    'showSocialMedia'                 => false,
    'socialWordPress'                 => '',
    'socialFacebook'                  => '',
    'socialTwitter'                   => '',
    'socialInstagram'                 => '',
    'socialPinterest'                 => '',
    'socialLinkedIn'                  => '',
    'socialYouTube'                   => '',
    'socialGitHub'                    => '',
    'socialMediaOptions'              => 'brand', /* can be brand or custom */
    'socialMediaColors'               => '#000000', /* Only applicable if socialMediaOptions is custom */
    'profileCompactAlignment'         => 'center', /* Can be left, center, or right */
    /* Tabbed Attributes */
    'tabbedAuthorProfileTitle'        => '',
    'tabbedAuthorSubHeading'          => '',
    'tabbedAuthorProfile'             => __( 'Author', 'metronet-profile-picture' ),
    'tabbedAuthorLatestPosts'         => __( 'Latest Posts', 'metronet-profile-picture' ),
    'tabbedAuthorProfileHeading'      => __( 'Author Information', 'metronet-profile-picture' ),
    'profileLatestPostsOptionsValue'  => 'white', /* can be none, white, light, black, magenta, blue, green */
    'profileTabColor'                 => '#333333',
    'profileTabPostsColor'            => '#333333',
    'profileTabHeadlineColor'         => '#333333',
    'profileTabHeadlineTextColor'     => '#FFFFFF',
    'profileTabTextColor'             => '#FFFFFF',
    'profileTabPostsTextColor'        => '#FFFFFF',
 
);

Here’s an example usage:

mt_author_box( $post->post_author, array(
    'theme'              => 'tabbed',
    'profileAvatarShape' => 'round',
    'showWebsite'        => true,
    'website'            => 'https://www.ronalfy.com',
    'showSocialMedia'    => true,
    'socialMediaOptions' => 'brand',
    'socialWordPress'    => 'https://profiles.wordpress.org/ronalfy',
    'socialFacebook'     => 'https://facebook.com/mindefusement',
) );

REST API Endpoints

There are three REST API endpoints for you to use.

Setting a Profile Picture For Yourself

$request = new WP_REST_Request( 'POST', '/mpp/v2/profile-image/me' );
$request->set_param( 'media_id', 3754 ); 
$request->set_header( 'X-WP-Nonce', wp_create_nonce( 'wp_rest' ) );
$response = rest_do_request( $request );
 
// Will return JSON of profile image sizes

Setting a Profile Picture For Others

$request = new WP_REST_Request( 'POST', '/mpp/v2/profile-image/change' );
$request->set_param( 'media_id', 1290 ); 
$request->set_param( 'user_id', 5 ); 
$request->set_header( 'X-WP-Nonce', wp_create_nonce( 'wp_rest' ) );
$response = rest_do_request( $request );

Getting a User Profile Image

$request = new WP_REST_Request( 'GET', '/wp/v2/users/15' );
$response = rest_do_request( $request );
$avatars = $response->data[ 'mpp_avatar' ];
 
// Will return JSON of profile image sizes

Profile Builder Pro

Create beautiful front-end registration and profile forms with custom fields. Setup member directories, custom redirects, cutomize user emails & more using the all in one user management plugin.

Get Profile Builder