Ultimate Member 2.0 - Add Profile Photo in Register Form

Ultimate Member 2.0 - Add Profile Photo in Register Form

/**
* Add new predefined field "Profile Photo" in UM Form Builder.
*/
add_filter("um_predefined_fields_hook","um_predefined_fields_hook_profile_photo", 99999, 1 );
function um_predefined_fields_hook_profile_photo( $arr ){


	$arr['profile_photo'] = array(
		'title' => __('Profile Photo','ultimate-member'),
		'metakey' => 'profile_photo',
		'type' => 'image',
		'label' => __('Change your profile photo','ultimate-member'),
		'upload_text' => __('Upload your photo here','ultimate-member'),
		'icon' => 'um-faicon-camera',
		'crop' => 1,
		'max_size' => ( UM()->options()->get('profile_photo_max_size') ) ? UM()->options()->get('profile_photo_max_size') : 999999999,
		'min_width' => str_replace('px','',UM()->options()->get('profile_photosize')),
		'min_height' => str_replace('px','',UM()->options()->get('profile_photosize')),
	);

	return $arr;

}

/**
 *  Multiply Profile Photo with different sizes
*/
add_action( 'um_registration_set_extra_data', 'um_registration_set_profile_photo', 9999, 2 );
function um_registration_set_profile_photo( $user_id, $args ){

	if ( empty( $args['custom_fields'] ) ) return;
	
	if( ! isset( $args['form_id'] ) ) return;

	if( ! isset( $args['profile_photo'] ) || empty( $args['profile_photo'] ) ) return;

	// apply this to specific form
	//if( $args['form_id'] != 12345 ) return; 


	$files = array();

	$fields = unserialize( $args['custom_fields'] );

	$user_basedir = UM()->uploader()->get_upload_user_base_dir( $user_id, true );

	$profile_photo = get_user_meta( $user_id, 'profile_photo', true ); 

	$image_path = $user_basedir . DIRECTORY_SEPARATOR . $profile_photo;

	$image = wp_get_image_editor( $image_path );

	$file_info = wp_check_filetype_and_ext( $image_path, $profile_photo );
 
	$ext = $file_info['ext'];
	
	$new_image_name = str_replace( $profile_photo,  "profile_photo.".$ext, $image_path );

	$sizes = UM()->options()->get( 'photo_thumb_sizes' );

	$quality = UM()->options()->get( 'image_compression' );

	if ( ! is_wp_error( $image ) ) {
			
		$max_w = UM()->options()->get('image_max_width');
		if ( $src_w > $max_w ) {
			$image->resize( $max_w, $src_h );
		}

		$image->save( $new_image_name );

		$image->set_quality( $quality );

		$sizes_array = array();

		foreach( $sizes as $size ){
			$sizes_array[ ] = array ('width' => $size );
		}

		$image->multi_resize( $sizes_array );

		delete_user_meta( $user_id, 'synced_profile_photo' );
		update_user_meta( $user_id, 'profile_photo', "profile_photo.{$ext}" ); 
		@unlink( $image_path );

	} 

}

Thank you for the solution :) There is just one problem:
If several people try to register at once, the images can get mixed up. Do you have any idea on how to fix?
Thank you in advance.

is it possible to also add a cover photo upon registering?

Hi @otaviogit, Yes, just change the variable and strings from profile_photo to cover_photo

thanks! worked, sorta... The new field is there. However, after the initial upload, it forces me a crop at 1:1 ratio. And although I accepted that "square crop", the new user doesn't have a cover photo at all.
I appreciate your help!

Hi @otaviogit - Could you please provide your current code here so we can review?

Regards,

code copied and altered for Cover (not my entire functions.php)

/**

• Add new predefined field "Cover Photo" in UM Form Builder.
  */
  add_filter("um_predefined_fields_hook","um_predefined_fields_hook_cover_photo", 99999, 1 );
  function um_predefined_fields_hook_cover_photo( $arr ){

  $arr['cover_photo'] = array(
  'title' => __('Cover Photo','ultimate-member'),
  'metakey' => 'cover_photo',
  'type' => 'image',
  'label' => __('Change your Cover Photo','ultimate-member'),
  'upload_text' => __('Upload your Cover Photo here','ultimate-member'),
  'icon' => 'um-faicon-camera',
  'crop' => 1,
  'max_size' => ( UM()->options()->get('cover_photo_max_size') ) ? UM()->options()->get('cover_photo_max_size') : 999999999,
  'min_width' => str_replace('px','',UM()->options()->get('cover_photosize')),
  'min_height' => str_replace('px','',UM()->options()->get('cover_photosize')),
  );

  return $arr;

}

/**

• Multiply Header Image with different sizes
  */
  add_action( 'um_registration_set_extra_data', 'um_registration_set_cover_photo', 9999, 2 );
  function um_registration_set_cover_photo( $user_id, $args ){

  if ( empty( $args['custom_fields'] ) ) return;

  if( ! isset( $args['form_id'] ) ) return;

  if( ! isset( $args['cover_photo'] ) || empty( $args['cover_photo'] ) ) return;

  // apply this to specific form
  //if( $args['form_id'] != 12345 ) return;

  $files = array();

  $fields = unserialize( $args['custom_fields'] );

  $user_basedir = UM()->uploader()->get_upload_user_base_dir( $user_id, true );

  $cover_photo = get_user_meta( $user_id, 'cover_photo', true );

  $image_path = $user_basedir . DIRECTORY_SEPARATOR . $cover_photo;

  $image = wp_get_image_editor( $image_path );

  $file_info = wp_check_filetype_and_ext( $image_path, $cover_photo );

  $ext = $file_info['ext'];

  $new_image_name = str_replace( $cover_photo, "cover_photo.".$ext, $image_path );

  $sizes = UM()->options()->get( 'photo_thumb_sizes' );

  $quality = UM()->options()->get( 'image_compression' );

  if ( ! is_wp_error( $image ) ) {

  $max_w = UM()->options()->get('image_max_width');
  if ( $src_w > $max_w ) {
  	$image->resize( $max_w, $src_h );
  }
  
  $image->save( $new_image_name );
  
  $image->set_quality( $quality );
  
  $sizes_array = array();
  
  foreach( $sizes as $size ){
  	$sizes_array[ ] = array ('width' => $size );
  }
  
  $image->multi_resize( $sizes_array );
  
  delete_user_meta( $user_id, 'synced_cover_photo' );
  update_user_meta( $user_id, 'cover_photo', "cover_photo.{$ext}" ); 
  @unlink( $image_path );
  

  }

}

The code above didn't worked for me.

Hello @champsupertramp and thank you for the code. It works fine, however I get a php notice saying "Undefined variable src_w" at the top of the page after the registration form is sent. Can you perhaps guide me on fixing this? Thanks in advance.

Hi Everyone,

I'll be sharing some Ultimate Member customizations & tutorials on my website: www.champ.ninja

Subscribe to my newsletter to get the latest tutorials.

Regards,

Hi @eylulgormus

You can remove the following lines as it doesn't work with the cropping:

if ( $src_w > $max_w ) { $image->resize( $max_w, $src_h ); }

Regards,

Thank you for the super quick reply!

Works great, thank you!!

Hi @eylulgormus @iSpaceGitHub Thanks for letting me know. You can check more Ultimate Member tips and tricks on my website www.champ.ninja - subscribe to my newsletter to receive free tutorials and plugins!

Hi Champ,

This is a great job, done well. I checked your website too. Thanks for this. Please, where do I past this? Can I paste it inside the SNIPPETS plugin I had on my wordpress site or I should upload the zip file as PLUGIN?

Hi @ayjconcept - Yes, you can add it to the snippets plugin or theme's function.php file.

Hi @champsupertramp, this code is a great help!

One slight problem is that every time I go to edit my profile, it asks to upload a new image every time.
If I turn off *required, the profile image deletes itself.

Is there any way to fix that?

Hello Everyone,

We've created a simple extension to enable users to upload Profile photo. See all extended plugins at https://github.com/ultimatemember/Extended

Regards,

Hey man, thanks for the great piece of code.
I found a small issue: this doesn't work for Registration Forms, probably because there's no user folder, so it always previews whatever picture was uploaded by the first user that used the form. 😞

Hi Everyone! I've updated the Profile Photo uploader plugin in the link: https://docs.ultimatemember.com/article/1663-download-installation-of-the-basic-extensions

It now supports the Profile Photo uploader in Register and Account forms. When you install the plugin, just add this piece of code to your theme/child-theme's functions.php file or use Code snippet plugin to run the code. It should display the Profile Photo uploader to the Account > General tab:

function um_011921_add_profile_photo_uploader( $args, $shortcode_args ) {

    $args = 'register_profile_photo,' . $args;
    return $args;
}

Regards,

Hello, I want to change the uploaded profile image dimension as it is showing Your photo is too small. It must be at least 600px wide.
I added the above code. Can anyone help me to resolve this?

Hello there.

This function works partially, but maybe it doesn't work how I want it because of how I set the registration up. Registration is not public, the users are added manually by the admins. The function does add a Profile Photo field in the register form, but it changes MY profile image, not adding image to the user I'm registering. Is there a way to make it work by adding the profile picture to the user I'm registering and not change my own profile image?

Thank you.

Hi,
Everything is almost working perfectly BUT..

On the account page when I upload, crop and then apply. When the lightbox/image upload disappears and the account page refreshes, the newly uploaded image shows very briefly (maybe for half a second) above the Upload button and then is quickly replaced by the old profile photo.
When entering password and clicking save everything works fine.

To clarify the problem is, after clicking Apply the newly uploaded image only shows briefly and is replaced by the old image (above the upload button).

Desperate for some help with this, am happy to pay!

Hi @s2353553 Does your site have any caching plugin? If so, please try disabling it and see if this is causing the issue.

Hi, thanks for your reply.. it turned out to be the require password setting in admin was stopping the image from being saved when the user clicks apply and the lightbox closes

hello @champsupertramp it show in registration form

but not shown in member direcories frontend no what to do??