HOWTO: Liberating the User Picture Upload Interface
Posted on November 10, 2006 | Tags:
One of the things that makes Drupal such a powerful platform for building community websites is its robust and scalable user system. Its got everything you need to start popin’ and lockin’ built right into the core framework: unlimited user roles, granular permissions, easily extensible profiles and more.
Still, as hookable and mashup-friendly as it is, there are a number of things that Drupal core has a stubborn hold on. One of these is the user-picture (aka avatar) upload interface. The picture system is very well implemented — it will resize uploaded images, display them in posts and comments automagically, etc — but the user-interface for you to actually put up your picture is locked onto the catch-all “account settings” part of the user/edit interface, which can get pretty cluttered if you’ve got a lot of modules throwing their settings in there.
In future (5.0+) revisions, I’m sure that the already-awesome profile system will grow and allow site admins to easily reposition all user-account elements, but yesterday I had a need to move that user-picture upload field into it’s own page, and so I did. Less than 50 lines of code, too. Here’s how:
Step 1: Create a new section in the user/edit interface
For my application, I wanted to put the user-picture upload off on it’s own section of the user/edit interface, on it’s own “category” in Drupal’s user/edit lingo. This would separate it from the “account settings” clutter, and also give me a place to expand if I want to add other user-picture features down the line.
The first order of business is making a new category. For this, I used hook_user and returned some data when the $op was looking for “categories”:
<?php
function avatar_user($op, &$edit, &$account, $category = NULL) {
if ($op == 'categories') {
$categories = array(array('name' => 'avatar', 'title' => t('picture'), 'weight' => 10));
return $categories;
}
}
?>The data structure you return is a little complex there. You return an array of associative arrays, with each associative array defining a new category. You set an internal name, a human readable title, a weight to help set the order when there are multiple categories. Since I only want one new category, I have an array of one arrays, as you can see.
This sets me up to now tell drupal to display a form when the user clicks on this category.
Step 2: Define your form
Within the same instance of hook_user, I added the following code:
<?php
if ($op == 'form' && $category == 'avatar') {
$form = array();
$form['avatar'] = array(
'#type' => 'fieldset',
);
$form['avatar']['preview'] = array(
'#type' => 'markup',
'#value' => theme('user_picture', $account),
'#prefix' => '<h2>'.t('Your current picture').'</h2>',
);
$form['avatar']['picture_upload'] = array(
'#type' => 'file',
'#title' => t('Upload a new picture'),
'#size' => 20,
);
return $form;
}
?>When the $op is “form,” Drupal listens for a Form API-style array to render on that category page of the user/edit interface. You can also use this to extend the form on other category pages, including the default “account settings” page.
What I’ve defined here tells the “avatar” category to display the current user-picture via a “markup” form element, and then defines a file field for uploading a new one. I’ve borrowed heavily from the core user.module and kept it simple, but this could someday expand to include other picture-related options, such as multiple images, a caption, etc.
With this in place, can now move on to handling the submitted form values.
Step 3: Handling form values
Again, we’re utilizing hook_user, this time to deal with a submitted form by means of the “validate” $op value:
<?php
if ($op == 'validate' && $category == 'avatar') {
if ($file = file_check_upload('picture_upload')) {
user_validate_picture($file, $edit, $account);
}
}
?>This seems too easy to be true, but it isn’t. Since I’ve stuck with the established style for Drupal’s default user-picture upload, and I don’t want to change how the stored pictures are handled (just where the upload interface lives), I can reuse the function in the core user.module to handle the form values.
If I wanted to handle multiple images or additional data, this would have to be re-written and expanded, but for now we can take advantage of the functionality Drupal already offers to finish up our user/edit category.
Step 4: Hiding the old form elements
One last detail is to get rid of the old user-picture upload interface. It will still work fine, but it would be confusing to users to have this interface in two places. Luckily, there’s no need to hack at Drupal core’s user.module thanks again to Form API and the form_alter hook:
<?php
function avatar_form_alter($form_id, &$form) {
if($form_id == 'user_edit' && arg(3) == NULL) {
// only fire this if it's user/<uid>/edit, not any other category
unset($form['picture']);
}
}
?>This clears out the old user-picture upload interface, preventing user confusion.
Guess what? You’re done! You can download the complete module code below. Share and enjoy!
| Attachment | Size |
|---|---|
| avatar.module.gz | 671 bytes |
warhammer gold
war gold buy war gold warhammer gold
warhammer gold buy warhammer
gold
war
gold
warhammer gold
buy warhammer gold
war gold
warhammer gold
gold/” target=”_blank”>buy warhammer
gold war gold
warhammer
gold buy warhammer gold
war gold
warhammer
gold buy warhammer gold
war
gold
aoc gold
buy aoc gold
age of conan
gold
age of conan
gold
buy age of conan
gold aoc
gold
warhammer gold
linqiong
learn
I am a novice, to learn the
Please revise for Drupal 6
First, I’m so sorry for acting on such an old post. However since Drupal 6, it is still being difficult to move the user picture out of the settings tab. I’ve tried for hours to get this working for Drupal 6. The validation has changed as well as user_edit_form has gone through some minor changes.
Could anyway please help modify this code for Drupal 6 as the settings page is being cramped by other modules making the user picture upload form very inaccessible.
Regards,
Marius
can I do this on a node page?
I want an anonymous user to be able to create a page and have there pic added to the post if they want.
Great tutorial - works a
Great tutorial - works a treat and solved a number of other problems too.
What i’d like to do is put the picture upload tab somewhere else completely, i’m using bio module and would like to put it as a sub tab of that module - any idea how to do that.
Yes thats setup in
Yes thats setup in drupal’s .htaccess file
yes, you can’t
yes, you can’t download.module files…
this is a restriction setup in drupal’s .htaccess file
Hi. I like this extension. I
Hi. I like this extension. I had created version for Drupal 5. Here is it: http://www.fem.uniag.sk/havran/.files/avatar-5.x.tar.gz. Thank you for sharing.
permission granted!
Haha… Drupal’s being smart. It thinks you’re trying to get at my code. I’ve replaced that with a gzip version.
And I do intend to check this into cvs, but first I’m going to add a few features.
Drupal.org project?
Cool stuff! Do you intend to always host the module here, or can we look forward to a Drupal.org project for it? Also, I missed whether this is a 4.7 or 5.0 module? Great work =)
permission denied ...
http://www.chapterthreellc.com/files/avatar.module
Forbidden
You don’t have permission to access /files/avatar.module on this server.
:)
Getting the same problem.
Getting the same problem. What’s the solution?
Yes, thats set in drupal’s
Yes, thats set in drupal’s .htaccess file
Post new comment