Theming the User Profile Pictures in Drupal

In yet another installment of my latest documenting saga, we're going to cut through all the crap, and learn how to theme user profile pics in drupal.

I'm not going to take full credit for this, as most of the work was done by the good folks over at Lullabot...
http://www.lullabot.com/articles/imagecache_example_user_profile_pictures

Here's the quick step by step. It'll let your users upload pretty much any image they have for an avatar without having to resize it. It'll create a thumbnail size for display in nodes which is a link to the user profile page where a larger thumbnail is on display, all generated automatically by imagecache, and it'll also make girls think you're cool.

Resolution

OK.

STEP 1
Make sure imagecache is installed. Then install the imagecache_profiles module attached below.

STEP 2
Goto admin/user/settings. enable pictures. make the max pixel size 1600x1200 and max file size 1024. Save the page.

STEP 3
Create the imagecache presets.
Goto imagecache settings.
Create a preset called userpic_thumb with SCALE / OUTSIDE DIMENSIONS / 100 / 100 and CROP 100 100 CENTER CENTER WEIGHT:1
Create another preset called userpic_large with SCALE / OUTSIDE DIMENSIONS / 200 / 200 and CROP 200 200 CENTER CENTER WEIGHT:1

STEP 4
Paste this code into your template.php file.

function phptemplate_user_picture($account, $size = 'userpic_thumb') {
  if (variable_get('user_pictures', 0)) {
    // Display the user's photo if available
    if (preg_match('/q\=user\/\w+/', $_SERVER['REDIRECT_QUERY_STRING'])) {
        $size = 'userpic_large';
    }
     if ($account->picture && file_exists($account->picture)) {
      $picture = l(theme('imagecache', $size, $account->picture), 'user/' . $account->uid, NULL, NULL, NULL, FALSE, TRUE);
    }
    else if (variable_get('user_picture_default', '')) {
      $picture = l(theme('imagecache', $size, variable_get('user_picture_default', '')), 'user/' . $account->uid, NULL, NULL, NULL, FALSE, TRUE);
     
            
    }
    return '<div class="picture">'.$picture.'</div>';
  }
}

STEP 5
Goto your user page, upload a pic and know in your heart, you did it the Agaric Way...

Yet another quality, no-nonsense tutorial brought to you by The Quality No-Nonsense Tutorial Department at Agaric Design.