WordPress Ultimate Member Profile pic Scaled Images

We are using the Ultimate Member plugin and on our members directory page we have the profile images.

The default profile image is 190×190 and on upload saves a 80×80 version.

On the directory pages it is pulling in the 190×190 image rezising it to 80×80.

I want to be able to pull in the 80×80 image that exists. I have tried this in template files but the plugin has updated its code to out the profile pic

{{{user.avatar}}}

before I was able to set the $avatar_size to 80. Any ideas without changing UM’s files to add a filter or hook to get it to fetch the 80×80 image?

Answer

If you mean the one like the Garfield image in the second user card below, which is rendered via templates/members.php which by default uses the members-grid.php template (see the Ultimate Member’s template structure here):

Then if you don’t already know, that section is using the WordPress script/JS templating, i.e. wp.template() (check um_build_template() in assets/js/um-members.js) and that the Ultimate Member retrieves the (user and other) data using AJAX:

And the class which handles the AJAX request is Member_Directory in includes/core/class-member-directory.php which uses get_avatar() and the (global) Profile Photo Size setting.

So if you want to change the profile photo size there which defaults to the 190px x 190px size:

Easy way, without coding

Just change the Profile Photo Size setting (see wp-admin » Ultimate Member → Settings → Appearance → Profile → Profile Photo Size) to 80x80px:

With coding, using a hook

In the Member_Directory class, there is one filter hook which you can use to easily change the profile photo URL so that it points to the 80px size instead of the default 190px.

So here’s a working example to override the profile photo URL using the hook:

// In your theme functions file.
add_filter( 'um_ajax_get_members_data', function ( $data_array, $user_id ) {
    $data_array['avatar'] = get_avatar( $user_id, 80 );
    /* Or use a custom data key:
    $data_array['avatar_80'] = get_avatar( $user_id, 80 );

    // Then in the template file, use:
    // {user.avatar_80 || user.avatar}
    */
    return $data_array;
}, 10, 2 );

Additional Notes

As mentioned by @Shoelaced, “the 80×80 will appear blurry on Retina displays“, so it might be better to just use the 190x190 and use CSS to scale it to 80x80. For example:

.um-directory .um-members-wrapper .um-members.um-members-grid .um-member.with-cover .um-member-photo a img {
    width: 80px;
    height: 80px;
}

And in fact, the default scaling (in assets/css/um-members.css) is 90x90 (just 10px greater than what you want..).

So I hope this answer helps?

And I have tried and tested all the above code working as expected on WordPress 5.4.2 with Ultimate Member 2.1.6 (the latest release as of writing).