Profile picture with a border color depending of the role

Question

Is there any way to set a border color to every profile picture displayed all over the website depending on the role of the user?

I was trying to do it at least on the user profile image and on the User picture block module image following this instructions Custom node color from role but I ended in nothing.

Note: I display the profile pictures in a user search view, in the forums and in a block that display the latest forum comments.

Answer 1

Try hook_preprocess_user_picture() in your template.php

function MYTHEME_preprocess_user_picture(&$vars) {
    $account = user_load($vars['account']->uid);

    foreach ($account->roles as $role) {
        $vars['classes_array'][] = 'role-' . strtolower(str_replace(' ', '-', $role));
    }
}

Each user picture should then have the role-rolename classes added to it.
It is similar to Clive's answer you mentioned, but different hook.

Answer 2

I partially solved the problem with this:

function MYTHEME_preprocess_html(&$vars){
    global $user;

  foreach ($user->roles as $role) {
    $vars['classes_array'][] = 'role-current-' . strtolower(str_replace(' ', '-', $role));
  }

  if(arg(1) && arg(0)=='user'){
      $account=user_load(arg(1));
      foreach ($account->roles as $role) {
            $vars['classes_array'][] = 'role-visited-' . strtolower(str_replace(' ', '-', $role));
        }
  }
}

with this CSS:

.role-current-beta-tester .content_left .user_picture_block img,
.role-visited-beta-tester .user-profile .field-name-ds-user-picture img{
    border: 17px #019E96 solid;
    background: white;
}

.role-current-moderator .content_left .user_picture_block img,
.role-visited-moderator .user-profile .field-name-ds-user-picture img{
    border: 17px #37A962 solid;
    background: white;
}

.role-current-administrator .content_left .user_picture_block img,
.role-visited-administrator .user-profile .field-name-ds-user-picture img{
    border: 17px #517180 solid;
    background: white;
}

.role-current-usuario-profesional .content_left .user_picture_block img,
.role-visited-usuario-profesional .user-profile .field-name-ds-user-picture img{
    border: 17px #8A101C solid;
    background: white;
}

.role-current-usuario-no-profesional .content_left .user_picture_block img,
.role-visited-usuario-no-profesional .user-profile .field-name-ds-user-picture img{
    border: 17px #A8CE3D solid;
    background: white;
}

but that only works for the border of the picture displayed by the user-picture-block module and the picture of each user's profile (formatted with Display Suite). I still have the problem of the forums, my user search view and a small block that display user's latest comments on the forums (the default one of Advanced Forum module).