How to display an image field next to the title on the profile pages?

Question

My users have an image field, called 'Avatar', that's displayed as an icon. I can easily add it to the users' profile page in the content section, but now I'd like to show it next to the title (the default one prints the username).

As I didn't try to do this before, I surfed around the internet for a while. It seems that lots of similar requests were solved by a template file. Therefore, my plan was to add a user-profile.tpl.php, copy all the code from page.tpl.php to it and add

<?php
print render($user_profile['field_avatar']);
?>

before the title.

I'm not sure whether this might work. Is this a good approach?

Answer 1

The use of the template is solid guess. However, you're using the wrong template. The template you suggesting isn't based on the page.tpl.php page. The output of the user-profile.tpl.php page, will end up in the $content section of your page template. You should try to use a different approach.

How about a preprocess function? It will intercept the rendering of the variables and by so, you can alter them. If you want to change the title of your user-profile page, I'ld go with something like this:

/**
 * Implements hook_process_page().
 */
function mymodule_process_page(&$vars, $hook) {
  // Load the global user object
  global $user;

  // Check if it's the userpage and the current user, depending on URL
  if ((arg(0) === 'user') && (arg(1) === $user->uid)) {
      $vars['title'] .= ' ' . $user->avatar[LANGUAGE_NONE][0]['value'];
  }
}

Above preprocess function should be placed in your preprocess folder of your theme or the template.php.
It will extend the existing title with your extra fieldvalue.

There is only one drawback on this implementation. If you have a page with a path like /user/overview, the title will change too. Every URL with user as first argument and a UID as second, will be altered...

Goodluck!

EDIT: Try this please and let me know how it went:

/**
  * Implements hook_process_page().
  */
function mymodule_process_page(&$vars, $hook) {
    // Load the global user object
    global $user;

    $image = array(
      '#theme'  => 'image',
      '#path'   => file_create_url($user->field_avatar[LANGUAGE_NONE][0]['uri']),
      '#width'  => 20,
      '#height' => 20,
    );

    if ((arg(0) === 'user') && (arg(1) === $user->uid)) {
      $vars['title'] = render($image) . $vars['title'];
    }
}

Answer 2

Greatly thanks to @Michiel, I've been able to get this working with the following code:

function MYMODULE_process_page(&$vars, $hook) {
 if(arg(0) == 'user'){
  $user = user_load(arg(1));
  $image = array(
   '#theme'  => 'image',
   '#path'   => file_create_url($user->field_avatar['und'][0]['uri']),
   '#attributes' => array('class' => 'avatar_title'),
  );

  $vars['title'] = render($image) . $vars['title'];
 }
}

It's important not to use global $user instead of user_load(arg(1)), because the custom user fields aren't loaded in the first case (see: http://davidsonj.com/blog/global-user-vs-userload). Therefore, you'll get the error that field_avatar is undefined.

Thanks to the avatar_title CSS class, you can theme the image any further to your needs.

Answer 3

I'm pretty sure the file to copy is modules/user/user-profile.tpl.php and put it in your theme folder https://api.drupal.org/api/drupal/modules%21user%21user-profile.tpl.php/7 and make the changes in that.