Last updated March 30, 2010. Created by Keyz on January 8, 2010.
Log in to edit this page.

There is an older module called Avatar Blocks which creates a set of blocks for your site to display the user pictures (also known as Avatars) of your site's members in various ways. The Avatar Blocks module does not have a current version past Drupal 5, but with a bit of configuration the Views 2 module can do just as much and more (and will never stop working in future versions of Drupal).

Modules required

First ensure that you have Views module installed, and the core Profile module turned on. You also need ImageAPI and ImageCache. Also install the ImageCache Profiles module, which will allow you to use ImageCache module to resize your avatar pictures within Views (otherwise you can only use the default avatar size). If you want to make the "Who's Online" block, you will also need to install the User Stats module, which adds a new "User: Is online" filter option to Views. Before proceeding, you should have "Picture support" enabled for your site, user pictures uploaded for a least several user accounts, and you should also set a default user picture to be used for any user that does not upload a custom one. You can set up these options at Administer > User management > User settings (admin/user/settings).

Create an ImageCache preset for user pictures

Go to Administer > Site building > ImageCache > Add new preset (admin/build/imagecache/add) and create a new ImageCache preset to be used for your avatars. You might want to use the Scale and Crop action.

Set up an Avatars View

Next go to Administer > Site building > Views > Add (admin/build/views/add) and type a View name, such as "Avatars". For the View type, select "User", and then press Next.

General View settings

Under Basic settings, set the Style to "Grid", and adjust the "Items to display" setting if you wish. If you prefer to use CSS floats instead of the HTML table grid, you may set this instead to "HTML List" (unordered list) or Unformatted. You will need to add your own CSS to your theme's style.css to control the layout of the items.

In the Fields section, click the plus icon to add a new field. To assist you in finding specific types of fields more easily, click the select list at the top labeled "Groups" and choose the "User" option. Now select the "User: Picture" item and press the "Add" button. In the following screen that appears, ensure that the "Label" field is empty. At the bottom you should see a select list called "Imagecache preset". Click the select box and locate the name of the ImageCache preset you made earlier for your avatars. Now click the "Update" button to save your settings.

In the Filters section, click the plus icon to add a new filter. Choose "User: Active" and press Next. Set the Active value to "Yes" and press the "Update" button. This setting will ensure that an icon won't be displayed for anonymous visitors or blocked accounts.

Add a "Who's New" block

At the left of the Views interface click the select box that currently says "Page" and change the option to "Block". Click the "Add Display" button. In the following screen you will be configuring just the settings that will customize this block to display the avatars of the most recent members.

Under Basic settings, set both the Name and Title settings to "Who's New" (or whatever you prefer to call this block). When you set the Title, be sure to click the "Override" button so that the title will only apply to this specific block.

In the Sort criteria section click the plus icon and choose "User: Created date". Click the "Override" button since this setting is only meant to affect this block display, and no others. For the "Sort order" option, choose "Descending" and click "Update".

Add a "Who's Online" block

At the left of the Views interface click the select box that currently says "Page" and change the option to "Block". Click the "Add Display" button. In the following screen you will be configuring just the settings that will customize this block to display the avatars of the user who are currently logged in on the site.

Under Basic settings, set both the Name and Title settings to "Who's Online" (or whatever you prefer to call this block). When you set the Title, be sure to click the "Override" button so that the title will only apply to this specific block.

In the Filters section, click the plus icon to add a new filter. Choose "User: Is online" and press Next. Click the "Override" button so that this filter is only applied to this specific block, then set the True value to "Online" and press the "Update" button.

The View is now complete, so click the "Save" button. Before moving away from the page, ensure that you see a message at the top of your screen that confirms that the View has been saved.

Enable the new blocks

Go to Administer > Site building > Blocks (admin/build/block) and locate the new blocks you just created in Views (the block name will be the name of your view followed by the Title of the block display set in Views). Next to each, click the "Region" select box and choose the region (such as your side bar) where you want the block to appear. Scroll to the bottom of the page and click the "Save blocks" button.

Visit another page on your site to confirm that the blocks show up as desired. You may now wish to use CSS to add additional theming to the blocks to get them to display exactly the way you prefer. Using View source in your browser or the Firebug extension for Firefox, you can find the unique ID of the block and add custom theming to it using CSS.

Note: this guide does not illustrate how to create a block of "your friends" avatars. In the future an example of how to do this will be added, though to get you on the right track you should look into adding a "Relationship" to your View (the one to use will depend on which module you use for friends or buddy lists on your site).

Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.

Comments

This is a great article. The instructions are very clear and easy to follow. It works like a charm.

One problem though. I have a default picture set for users who have not uploaded their own pic yet, but it doesn't seem to show in the block.

I notice that when I created the preset in Imagecache, the module created a new directory under the name of the preset, and it made a miniature duplicate of my user pictures. But it did not copy the default picture.

Is there a specific setting for using the default picture in the avatar block?

Second question:

I really like the text which appears in the core "who's online" block (There are x users and x guests online), and I'd like to include that line in my avatar block.

Is there a simple way to do that?

Thanks again for a great article.

_________________________________________________
The American English Club
The world's first social network for English learners
www.englysh.com

Another question.

In the core "who's online" block, there is a line that says "there are currently x guests and x users online".

I'm sure it's simple, but how do I add that element to my new "who's online" block?

Thanks.

_________________________________________________
The American English Club
The world's first social network for English learners
www.englysh.com

Good stuff, very detailed. Also you can extend the who's online block to content profile fields, by requiring a Node: Content Profile relationship. And then get all the cck fields you want into the who's online user view.

The tutorial is wrong. If filtering merely by user:active, I get duplicates of users in my list. Every user that has created content will be on the list, and some users are on there multiple times. How to solve this?

i had the same problem. after a day of trying to figure it out, i scrapped the view and started from scratch. i then realized the view type i initially created was a node.. when it was supposed to be a user.

if you want only active members, not anonymous, you could setup a filter for User Name, select the "is not one of" radio, and type in "Anonymous" (or your name for anonymous users).

Thx for the tutorial. I was able to create an avatar block on my site, however am wondering if it is possible to only include profile images when a member has added an image (exclude default photo).
Any tips appreciated.

I have nothing like that. Drupal 7.14. Nothing about site building in any menu.

Blessings from Jerusalem