Ultimate-Member profile/cover photo upload & webp generation

There are a couple ways to get those images optimized.
The first is on the Advanced tab, under Folders to Optimize (enable Ludicrous Mode if you haven’t already). There you can enter the full/absolute path to /wp-content/uploads/ultimatemember/
Run a bulk optimize to crunch all your existing images, and then go back and enable Scheduled Optimization to scan that folder every hour for new images.

Alternatively, if you want to code something to do it immediately after upload, you can run the ewww_image_optimizer() function, first argument is the full path of the image to optimize. So long as WebP conversion is enabled, any image that goes through ewww_image_optimizer() will also have WebP conversion applied.

Thank you for the response. Here is what I came up with for profile photos:

/**
 * Filter to regenerate webp image versions when uploading a new profile photo
 */
add_action(
	'init',
	function () {
		add_filter(
			'um_upload_image_process__profile_photo',
			function ( $response, $image_path, $src, $key, $user_id, $coord, $crop ) {
				$new_image_path = str_replace( '/' . $key . '_temp.', '/' . $key . '.', $image_path );
				ewww_image_optimizer( $new_image_path, 4, false, true, true );

				$sizes = UM()->options()->get( 'photo_thumb_sizes' );
				foreach ( $sizes as $size ) {
					$new_image_path = str_replace(
						'/' . $key . '_temp.',
						'/' . $key . '-' . $size . 'x' . $size . '.',
						$image_path
					);
					ewww_image_optimizer( $new_image_path, 4, false, true, true );
				}

				return $response;
			},
			100,
			7
		);
	}
);

It seems to be working okay. The only part that was missing was displaying the new image right after the upload. The way UM does it is they add a ?<datetime> suffix to the image source via javascript, so I added some code to remove the picture source attribute, so that it’s not pulling the webp image in that case. It was simpler and seemed safer that adding the ?<datetime> suffix to the source attribute value.

Let me know if you have any feedback.

• This reply was modified 3 years, 11 months ago by therealgilles.

That looks good to me, 2 notes though:
1. You probably don’t need to hook onto init, since you’re actually hooking into um_upload_image_process__profile_photo.
2. You also don’t need any of the optional parameters for ewww_image_optimizer(), as they are only for media library images (gallery=1).

So glad I asked for your feedback.

1) You’re totally right on the add_action part. I went through several iterations and lost track of that.
2) Good to know.

Here is the updated code:

/**
 * Filter to regenerate webp image versions when uploading a new profile photo
 */
add_filter(
	'um_upload_image_process__profile_photo',
	function ( $response, $image_path, $src, $key, $user_id, $coord, $crop ) {
		// Optimize main profile photo image file.
		$new_image_path = str_replace( '/' . $key . '_temp.', '/' . $key . '.', $image_path );
		ewww_image_optimizer( $new_image_path );

		// Optimize profile photo thumbnail sizes.
		$sizes = UM()->options()->get( 'photo_thumb_sizes' );
		foreach ( $sizes as $size ) {
			$new_image_path = str_replace(
				'/' . $key . '_temp.',
				'/' . $key . '-' . $size . 'x' . $size . '.',
				$image_path
			);
			ewww_image_optimizer( $new_image_path );
		}

		return $response;
	},
	100,
	7
);

One last thing I’d recommend, is a quick check to make sure EWWW IO is active:

if ( ! function_exists( 'ewww_image_optimizer' ) ) {
    return $response;
}

Good idea ?? Thanks again!