User picture imagecache preset #1

User picture imagecache preset #2

Here’s a mini tutorial on applying imagecache presets to user profile pictures. This isn’t hard to do -- a breeze compared to what one had to do in Drupal 5 -- but this write-up might still save someone a little time, I hope! While imagecache presets are easy to apply to imagefield images (this can be done from your content type settings page or views settings, imagecache presets must be applied manually* to user pictures uploaded through the user settings interface.

Out of the box, Drupal’s user profile pictures are sized down to 85x85 pixels. There’s a good chance you might want to change this – and, often, change the preset depending on the context – a blog entry, a comment, the user profile page, etc.

Imagecache Presets
Create a new preset called ‘profile_pic’ at /admin/build/imagecache/add

User Picture Settings

• Enable user pictures at admin/user/settings
• Set maximum dimensions and maximum file size -- generally to something reasonably large.
• Give picture guidelines that specify the dimensions of your largest preset to prevent upscaling, "black bars" or distortion of images.

Create Your Template File

• Copy the user-profile.tpl.php from your modules/user folder to your theme folder.
• Let’s find the right variable to use. Add this line to your user-profile.tpl.php: <pre><?php dpm($account); ?></pre> (I like to leave this line in, and comment it out when I'm not using it during the development process. It will come in handy!)
• Find your variable in the dpm listing. Ah, it’s $account->picture.
• Let’s call the imagecache function by wrapping that variable in the imagecache theme.
• This is what the generic statement looks like:
  <pre><?php print theme('imagecache', ‘my_preset’, $my_variable, $alt, $title, $attributes); ?></pre>
• And apply that to our case:
  <pre><?php print theme('imagecache', ‘profile_pic’, $account->picture, $alt, $title, $attributes); ?></pre>
• Test in your browser, and make sure to empty your cache to see the change. When in doubt, clear your browser cache and the website’s caches through the Devel module. Note that if you alter your imagecache preset down the line, you will need to "flush" it as well, which will regenerate your images as you access them.

Extend!

• Now you can add more imagecache presets, and apply them to different templates. For instance, apply an imagecache preset to a user picture in their blog entry using node-blog.tpl.php:

  <pre><?php print theme('imagecache', 'profile_pic_blog', $node->picture, $alt, $title, $attributes); ?></pre>

• If your user HASN’T added a profile picture, you can add a default picture to your server, and apply the imagecache preset to that picture, using a php statement that checks for a profile picture first, such as:
  
  <pre>    
<?php if ($account->picture) {
        print theme('imagecache', 'profile_pic', $account->picture, $alt, $title, $attributes);
      }
      else {
        print theme('imagecache', 'profile_pic', default_profile_pic.png, $alt, $title, $attributes);
      }
      ?>
</pre>
• Note: If you won’t be customizing anything else with your user profile, you could instead copy your user-picture.tpl.php file from modules/user folder to your theme folder and wrap $picture in the imagecache preset instead.

*You could also install the Imagecache Profiles module , which gives you settings for applying imagecache presets for user pictures, but it will only allow you to set it site-wide, on the user page and in comments. If you needed to do anything custom beyond that, you would still need to use the method above.