Different size user pictures (avatars) in different pages

Published Fri, 2008/03/21 - 00:35, Updated Sun, 2009/05/03 - 20:39

A while back, we need to do display different sized user pictures (avatars) in Drupal 5.x on a client site. They wanted the user picture on the user profile page to be 100x100 pixels, but be displayed only as 65x65 on blog comments.

This is fairly easily achieved by creating this function in template.php. This function creates 65x65 size images from the original 100x100, and takes an argument of size so either can be used in different places.

function phptemplate_user_picture($account, $size = '65x65') {
  if (!variable_get('user_pictures', 0))  {
    return '';
  }

  // Default to a certain size
  if (arg(0) == 'user' && is_numeric(arg(1))) {
    $size = '100x100';
  }

  if ($account->picture && file_exists($account->picture)) {
    switch($size) {
      case '100x100':
        $maxsize_icon = array('w'=> 100, 'h'=> 100);
        $info = image_get_info($account->picture);
        if ($info['height'] < $maxsize_icon['h']) {
          $maxsize_icon['h'] = $info['height'];
        }
        if ($info['width'] < $maxsize_icon['w']) {
          $maxsize_icon['w'] = $info['width'];
        }
        $newpicture = dirname($account->picture) . '/picture-' 
         . $account->uid . '.' . $info['extension'];
        if (!file_exists($newpicture) || 
          (filectime($newpicture) < filectime($account->picture))) {
          image_scale($account->picture, $newpicture, $maxsize_icon['w'],
            $maxsize_icon['h']);
        }
        $picture = file_create_url($newpicture);
        break;

      case '65x65':
        $maxsize_tile = array('w'=> 65, 'h'=> 65);
        $info = image_get_info($account->picture);
        $newpicture = dirname($account->picture) . '/picture-' 
          . $account->uid . '-small' . '.' . $info['extension'];
        if (!file_exists($newpicture) || 
          (filectime($newpicture) < filectime($account->picture))) {
          image_scale($account->picture, $newpicture, $newpicture, 
            $maxsize_tile['w'], $maxsize_tile['h']);
        }
        $picture = file_create_url($newpicture);
        break;

      default:
        $picture = file_create_url($account->picture);
        break;
    }
  }
  else {
    $picture = variable_get('user_picture_default', '');
  }

  if (isset($picture)) {
    $alt = t('@user\'s picture', 
      array('@user' => $account->name ? $account->name : 
        variable_get('anonymous', 'Anonymous')));
    $picture = theme('image', $picture, $alt, $alt, '', false);
    if (!empty($account->uid) && user_access('access user profiles')) {
      $picture = l($picture, "user/$account->uid", array('html' => TRUE));
    }

    return $picture;
  }
}

Once you have that in the theme, you can select the small size like this:

<?php if ($picture) { print theme('user_picture', $node, '65x65'); }?> 

Or the normal size like this:

<div class="picture"><?php print theme('user_picture', $user, '100x100'); ?></div>

Now, all you need to do is select the size you want in the various places you need to display the user picture.

Fantastic!

Thanks for this one K - I can't tell you how I have always scratched my head when dealing with older sites that use the conventional method for user profiles with d5 in regards to theming user lists!

This is an ace method.

q./

That's really nice... i

That's really nice...
i tried, but it outputs a link of the html code of the image (<img ...) instead of the image

what's happening?
i use drupal 6.10
imagecache
imagecache profile

and the picture is inside a view...

no luck to d6

I have been waiting for drupal 6 solution for quite a long long time to this since most of my sites hosts only allows 32M memory_limit which is ridiculously too small for imagecache. I have tried this with d6, and I saw picture-small-1.jpg was produced but it didn't seem to appear in user profile page. Any help? Thanks for throwing the lights

another way: you can do this

another way:
you can do this with css only

.comment .picture img {
max-width: 24px !important;
max-height: 24px !important;
}
/* for IE6 */
* html .comment .picture img {
width: 24px !important;
height: 24px !important;
}
/* end for IE6 */

live example you can see here: http://uadrom.com/

drupal 6?

you're doing some great stuff, this is exactly what i was looking for and have been requesting info in drupal forums... but i'm using drupal 6 now and was wondering if this would apply to drupal 6 and if no what needs to change?

thanks

Thats a big patch of code.

Thats a big patch of code. Thanks god there is imagecache for those programming-impaired.

Different pros/cons

The good thing about this approach is that no new contrib modules are needed. Only core is enough.

Imagecache is more flexible, but you require additional modules to install and configure.
--
2bits -- Drupal consulting

Is your Drupal or WordPress site slow?
Is it suffering from server resources shortages?
Is it experiencing outages?
Contact us for Drupal and WordPress Performance Optimization and Tuning Consulting