I am applying a radial gradient on elements based on their hash using the `style` attriubte. This works as expected on "all" pages but there are a few issues.

It does not happen for avatars displayed in comments using WPDiscuz or in WPForo when I visit the profile page of a specific member using the URL : mywebsite.com/community/profile/full-name/. It only happens on this page: mywebsite.com/community/members/.

It seems like WPForo is overriding the value of `style` attribute on the member list page. Is there anything that I can do to avoid it.

Here is what desired output will look like for an Avatar:

<img alt="Person Name" 
src="https://www.gravatar.com/avatar/5f4cedca5c585604fe04a82492c8b658?d=robohash&amp;s=160"
style="background: radial-gradient(rgba(200, 182, 88, 0.25), rgba(200, 182, 88, 1));"
class="avatar test avatar-150 photo" width="150" height="150">

Here is the output for member list page for same person:

<img style="width:64px; height:64px;"
src="https://www.gravatar.com/avatar/5f4cedca5c585604fe04a82492c8b658?d=robohash"
alt=""
class="avatar test avatar-96 photo"
width="96"
height="96">

Here is the code that I am using:

function my_custom_avatar($avatar, $id_or_email, $size, $default, $alt) {
    $user = false;

    if ( is_numeric( $id_or_email ) ) {

        $id = (int) $id_or_email;
        $user = get_user_by( 'id' , $id );

    } elseif ( is_object( $id_or_email ) ) {

        if ( ! empty( $id_or_email->user_id ) ) {
            $id = (int) $id_or_email->user_id;
            $user = get_user_by( 'id' , $id );
        }

    } else {
        $user = get_user_by( 'email', $id_or_email );   
    }

    $user_id = $user->user_email;

    $image_hash = md5($user_id);
    $first_color = substr($image_hash, -6);
    list($r, $g, $b) = sscanf($first_color, "%02x%02x%02x");
    $color_inner = "rgba($r, $g, $b, 0.25)";
    $color_outer = "rgba($r, $g, $b, 1)";
    $avatar = 'https://www.gravatar.com/avatar/'.$image_hash.'?d=robohash&s=160';
    $background = "background: radial-gradient($color_inner, $color_outer);";
    $avatar = "<img src='{$avatar}' alt='{$alt}' style='{$background}' class='avatar test avatar-{$size} photo' height='{$size}' width='{$size}' />";
    
    return $avatar;
}
add_filter( 'get_avatar' , 'my_custom_avatar' , 10, 5);

Is there any way to prevent the override? I can set the width and height to 64px in CSS as well but I cannot set the background using CSS because it depends on the hash for that particular user. 🙂

Thanks.