User Profiles

A big part of any social networking site is the user profiles. Profiles let your users get to know each other and put a face on the anonymous internet. They can be basic, with little more than name, join date, and a few facts, or elaborate and complex. It all depends on the needs of your community. While the core profile module works for simple profiles, no one module will create a complex profile like you find on Myspace and Facebook. Instead, we start with a base module and link other contribs to it.

This section starts with the notes I gathered as I decided which base module build my profiles. Then comes the first and second tutorials. These served the community for a long time and are left for historical purposes, but I don't recommend using them anymore. Version 3 has turned into the Advanced Profile module. There will be tutorials to go with it but the bulk of the work will be done for you so the tutorials will focus on explaining what it's doing and giving ideas for enhancing it.

If you have any questions, please use the issue queue or my support forum. Also, I'd prefer it if people link to this node rather than subpages so people following the link always have the most up to date info.

Deciding which modules to use for profiles

[Update July 23, 2008: For those on D6, you might want to read this thread and learn about Content Profile, which is shaping up to be the successor to both bio and nodeprofile.]

So you want to pretty up your user profiles? But what module do you use? As with most things in Drupal, there's a lot of options. Of course, I recommend using Advanced Profile for the overall glue, but you still need some place to store the user profile data. This article will run through the pros and cons of each.

The contenders:

Bio

Usage:
Download, install, and enable the Bio module.
Setup at admin/user/bio
Add CCK fields as needed

Pros

  • Integrates with the user page for both viewing and editing just by checking boxes in settings
  • Uses any node type for the biography or you can extend the built in type with CCK
  • Lets you link to the bio from content without any special coding
  • Automatically enforces one bio per user
  • Let's you choose fields from your bio node to put on the registration screen
  • Designed to be lightweight and simple

Cons:

  • You can have one and only one node per user which is not as flexible as nodeprofile for complex profiles
  • Currently no way to have it auto create the profile node unless you put at least one field on the reg screen, but this may change soon.
  • Doesn't work with some views such as in buddylist so you end up needing to use usernode as well. This may be changing soon as well.

My opinion:
If you only need one node to hold the profile data per user, I reccomend using Bio. It's simple and works well with advanced profile. You can add a lot of other information to the profile panel using advprofile so bio should work for most sites' needs.

Nodeprofile

Usage:
Install nodeprofile, nodefamily, and subform element modules
Edit the content type you want to use for your profile and tell it that it's a node profile
Edit the options on the new nodeprofile tab that appears
More complex usage can be had by having multiple content types for your profile and using pageroute to hook it all together.

Pros:

  • Can have multiple content types that are node profiles which is great for complex profiles or for having different profiles for different roles.
  • Lets you put your node profiles on the user view page
  • Lets you add multiple node profiles to the registration page. This is nice because you can have one of your profile node types show and not others or put them all depending on your needs.
  • Is part of a family of modules including usernode and pageroute that give you a ton of options

Cons:

  • Unlike bio, which lets you totally take over the user page, nodeprofile just adds the profile nodes to what is there. The author considers this a pro but I, personally, don't like the looks of this, so I'm marking it as a con.
  • It's complex. In order to provide the flexibility of having 1 or more profile nodes from multiple content types the setup and code is complicated.
  • You need usernode as well to make it work with some views, which adds another node per user, and views fusion, which lets you merge the usernode view and the nodeprofile view is complex.

My opinion:
Nodeprofile is part of an awesome family of modules that let you do complex user profiles. If you need to get fancy with different profiles for different roles or having a wizard like process for the user to fill out multiple nodes in their profile, then this is what you want.

Core profile module

Usage:
Enable the module (it comes with Drupal)
Configure the profile by adding items in categories. Each category will show up on a separate tab of the edit account page.

Pros:

  • For each field, you can control the visibility with these options:
    • Hidden profile field, only accessible by administrators, modules and themes.
    • Private field, content only available to privileged users.
    • Public field, content shown on profile page but not used on member list pages.
    • Public field, content shown on profile page and on member list pages.
  • It has the ability to set a page title for a field so you can do things such as view everyone who's favourite colour is blue.
  • For each field, you can set whether it shows up on the registration page.
  • Editing and displaying of the profile is right on the account page with no extra work
  • No additional modules to install; just enable it

Cons:

  • Profiles are not nodes, which can limit flexibility, especially with views.
  • According to the Lullabot podcast, the backend is a mess

My opinion:
I only briefly played with this module but it was a lot better than I was expecting. It's simple to use and has some nice options. If you don't need profiles to be nodes, this looks like a solid option. There are a lot of handbook pages dedicated to customizing it and it can do quite a bit more advanced things than I thought. Not working with views is a big drawback but that will be eliminated in D6 with views 2.

More information:
Profile: extending user account information
Customising the user profile layout

Usernode with CCK fields

Usage:
The usernode module can be used to create user profiles by adding fields to it with CCK.

Pros:

  • No need to add extra modules. Just install usernode (and CCK if you don't have that) and add fields
  • Usernodes are automatically created / deleted with users
  • You can use views with your profiles

Cons:

  • If you decide later you'd rather have multiple pages in your profile, you're out of luck
  • No facility for adding the profile fields to the registration form
  • Adding the profile into the user page requires jumping through some hoops

My opinion:
This option is deceptive in that it looks like the best option on the surface if you only need one node profile per user. The trouble is that you are then locked into using the usernode as your profile. If you later decide you want the extra functionality that bio or nodeprofile provide, you're out of luck. The maintainer doesn't reccomend this option and neither do I, but I'm presenting it here for completeness.

Looking to the future

What about D6? There's a possibility that bio and nodeprofile may come together for a new and improved module. Interested? See Profiles as nodes in d6 for the discussion.

If you have comments or suggestions for improving this article, feel free to add a comment. Please do not use the comments for support requests.

Converting from nodeprofile to bio

I decided to convert CRO from nodeprofile to bio. Nodeprofile is nice for really complex profiles with multiple nodes but I didn't need anything that fancy. More important to me was the ability to put individual fields on the registration page.

While nodeprofile just looks at the type to find your nodeprofile node, bio actually stores the uid/nid pair in a table. So that table must be populated. Fortunately, it's pretty easy. Just fire up phpmyadmin or whatever mysql proggie you use and put:

INSERT INTO bio select nid, uid FROM node WHERE type = 'uprofile';

You'll need to change "uprofile" to whatever your user profile node type is. And, of course, this only works if you had just one type for the profile under nodeprofile. If you have more than one, then you need to stick with nodeprofile.

User Profiles Version 1

This is the original tutorial from last May. It has since been replaced by a newer version. See the User Profiles page for details.

Goal: The aim of this tutorial is to walk you through every step you need to create a user profile like this one.

Notes:

  • This tutorial assumes Drupal version 5.x
  • This does not use the core profile module or the bio module
  • The steps assume you want a profile exactly like mine. Most likely you'll want to do different things for your profile. I will try to provide alternates where possible but I'm not going to explore every possible permutation. I'll mark these alternates with [DIY...]
  • This tutorial only discusses the one user = one profile page method. You can get much more advanced using multiple nodes and pageroute, but that's beyond the scope of this tutorial.
  • You will be told to add things to your template.php file. If your theme doesn't have one, create a blank file in your theme with this name. The snippits are shown surrounded by < ? php and ? > (without the spaces) so the codefilter picks them up. You only need one < ? php at the top of your file and do not need to put them around every snippit.

Modules needed:

  • Automatic Nodetitles - Not strictly needed, but it's handy so users don't have to put a title on their profiles and to keep the title consistant. If you don't use this, you'll need to adjust node-uprofile-edit.tpl.php so users can enter a title.
  • Buddylist - Allows users to designate other users as their "buddy". We will show a list of buddies on the profile page.
  • CCK - We need this to create the content type for nodeprofile to use. Also enable the field type modules that come with it as well as content copy.
  • Contemplate - Makes it easier to theme the profile. If you are adept at theming, you can skip this and use .tpl files instead.
  • Date - CCK date field used for birthdate. Also needs the adodb date library if you have people born before 1970. Just unzip it into the date directory.
  • Guestbook - Allows others to comment on a profile in a bit more organized way than simply enabling comments.
  • Link - CCK link field.
  • Node Profile (5.x-1.1 or later) - This is what allows us to make profiles out of nodes.
  • Node Profile Bonus - This has the code for taking over the user view page as well as fixes for the registration page. The plan is to include this with NodeProfile but is available attached to this tutorial for now. Until it's part of the package, you'll need to manually copy nodeprofile_bonus.module and nodeprofile_bonus.info into your nodeprofile module directory.
  • Node Family - Required by Node Profile
  • Panels - We will actually only be using the CSS from this because I suck at CSS layout. If you can handle the CSS on your own, you don't actually need this module for this tutorial.
  • Private Message - We will check if the user allows private messages and add a link to do it if so. If you don't want private messaging on your site, you can skip this. Be sure to take out the reference in the contemplate code.
  • Subform Element - Required by Node Profile
  • Token - Used by auotmatic nodetitles
  • Usernode - This is used for the buddylist view.
  • Views - We will use this for the user's recent posts, the buddy list, and also searching users. Don't forget to enable the views UI module as well.

Step 1 - Getting prepared

  1. Download and install all the above modules.
  2. Set the user access control (?q=admin/user/access) for: buddylist, guestbook, privatemsg, user module (access user profiles) like like this.
  3. Configure buddylist (?q=admin/settings/buddylist) and privatmsg (?q=admin/settings/privatemsg) to taste. See guestbook section below before bothering with config.
  4. Set usernodes to not be promoted to front page (?q=admin/content/types/usernode)
  5. Download the file User-Profile-Tutorial.zip attached to this tutorial. This contains as much of my profile as I was able to export to save you time copying and pasting.

Step 2 - Creating and configuring the profile content type
Create the content type (see note at end of "Add the fields" section):

  1. Go to Administer -> Content Management -> Content Types -> [Add Content Type] (?q=admin/content/types/add)
  2. Expand "Automatic title generation". Check the box and put in [author-name]. [DIY: You can choose another token or add text if you prefer a different title for profiles.]
  3. Name: User Profile
  4. Type: uprofile
  5. Description: Whatever you want
  6. Title field label: Leave as title as the user won't see it (unless you've elected to not use auto nodetitles)
  7. Body field label: Empty this out as we don't need the body
  8. Default options: Uncheck promoted to front page
  9. Maximum population: 1
  10. Check "Use this content type as a nodeprofile for users"
  11. Comments / attachments / pms: Disable all of these
  12. Save content type

Add the fields:

  1. Go to Administer -> Content Management -> Content Types -> [Import] (?q=admin/content/types/import)
  2. Content type: User Profile
  3. Paste in the contents of "User-Profile_uprofile-cck-fields.txt" found in the attached zip. Click submit. [DIY - Edit the User Profile content type and manually add all the fields that you want users to enter in their profile.]
  4. Your content type should now look like screenshots/User-Profile-Content-Type.jpg

Note: The reason I had you create the content type first and then import into it is that there seems to be a bug with groups not getting created when you create the content type at the same time. You can get around this by doing the import twice if you don't want to manually create the type.

Fix the fields display:

  1. Edit the User Profile content type you just created and click the tab for "Display Fields" (?q=admin/content/types/uprofile/display)
  2. Change all the aboves for the fields to inlines. This doesn't come across with the importing, unfortunately.
  3. Submit

Set the nodeprofile options:

  1. Edit the User Profile content type you just created and click the tab for "Node profile" (?q=admin/content/types/uprofile/nodeprofile)
  2. Keep unchecked "Integrate this node profile with user categories."
  3. Check "Show this node profile during user registration." [DIY: Leave unchecked if you don't want it on the reg screen]
  4. User page display style: Display it as full node view
  5. Uncheck "Include an edit link to the display"
  6. Weight: 10 (this makes it come under username/email on the registration page but is unneeded otherwise)
  7. Submit

Access control:

  1. Go to Administer > User management > Access control (?q=admin/user/access)
  2. Set the permissions on "create uprofile content" and "edit own uprofile content".

Step 3 - Avoiding naming collisions

DON'T DO THIS STEP!!! If you've already done it, undo it. It breaks usernode!

To avoid having your usernode and nodeprofiles having the same titles, edit the usernode content type (?q=admin/content/types/usernode) and change the autotitle token to something else. I used "Usernode of [author-name]". The user will never see this, but it's nice to make it clear to admins which is which.

Step 4 - Take over the user account view tab
By default, the nodeprofile module will put your user profile as a section on the user account view tab (located at /user/#). This is fine for simple profiles but doesn't look right for a full featured profile. [See screenshots/User-Account-Default-View.jpg]

This step makes the user profile take over the entire view tab. The downside is that you will lose anything that other modules add to this page. If you add a module that normally has a link on the user view page, make sure you provide alternate access to it. If you are fine with the way it displays by default, you can skip this step.

  1. Make sure the node_profile_bonus module is enabled. This has code for removing everything that's not a profile from the page and also adds an "Edit Profile" tab to the user account page for easy access.
  2. If you want to change your Edit tab to Edit Account to make things clearer, you can add the uncommented code into your template.php. If you don't already have this function, add in the commented code as well (uncomment it). Don't forget that you only need one < ? php (without spaces) at the top of the file and not around each snippit.

    <?php
    //function _phptemplate_variables($hook, $vars) {
    //  if ($hook == 'page') {
       
    if (arg(0) == 'user') {
         
    $vars['tabs'] = str_replace('Edit</a>', 'Edit Account</a>', $vars['tabs']);
        }
    //    return $vars;
    //  }
    //}
    ?>

  3. Add this code to your template.php:
    <?php
    // Override the display of the nodeprofile to just show the node itself and not the surrounding markup or the tabs.
    // Theming of the nodeprofile will be handled separately. Note that this affects it wherever it is displayed and
    // not only on the user page.
    function phptemplate_nodeprofile_display_box($element, $content) {
     
    $head = isset($element['#title']) ? '<h2 class="nodeprofile-title">'. check_plain($element['#title']) .'</h2>' : '';

      return
    $content;
    }

    // Override the entire user account view page to not show the categories or to seperate items into divs.
    // Note that this is set up to still show everything that is thrown on this page. Getting rid of non-nodeprofile
    // sections is done in the node_profile_bonus module by unsetting them but could also be done here by conditionally
    // printing them to begin with.
    function phptemplate_user_profile($account, $fields) {
      foreach (
    $fields as $category => $items) {
        foreach (
    $items as $item) {
         
    $output .= $item['value'] ;
        }
      }

     
    // Returning nothing from this function causes the entire page to whitescreen, so let's put something in by default
      // A better idea might be to load up some sort of standard thing that has the views and just not the profile fields
     
    if (empty($output)) {
       
    $output = "This user has not filled out a user profile.";
      }

      return
    $output;
    }
    ?>

Your user account page (?q=user/1) should now look like this: screenshots/User-Account-After-Page-Take-Over.jpg

Step 5 - Taxonomy
My profile uses taxonomy for some of the fields. I did this so you can click on a term and see all the other users with that term. With some coding, the taxonomy is used as though it was a normal CCK field.

Go to Administer > Content management > Categories (?q=admin/content/taxonomy). Create the following vocabularies: Communities, Hobbies, Reading, Music, TV and Movies. Communities is a multi select with the terms entered in via add term. The others are freetagging. Note: If you add these in a different order or choose different vocabularies, you will need to alter the contemplate code and the input form to match.

[DIY - Most people reading this are not going to want preset communities. Feel free to skip that vocab and add it as a normal CCK text field if you want and I'll make notes where you need to delete references to it later.]

Attach each of these vocabularies to your User Profile content type.

Step 6 - Add the views

  1. Go to Administer > Site building > Views > [Import] (?q=admin/build/views/import)
  2. Import the contents of User-Profile_User-tracker-view.txt. Submit and save the view. This view will display all the posts by a particular user.
  3. Import the contents of User-Profile_Buddylist-view.txt. Change the filter for node type to usernode. I don't know why this doesn't import correctly. Submit and save the view. This view will display the photo and name of all the user's buddies from the buddylist module.
  4. To theme the buddylist view so that we get rid of the list markup, add this to your template.php.
    <?php
    function phptemplate_views_view_list_buddylist_of_uid($view, $nodes, $type) {
     
    $fields = _views_get_fields();

     
    $taken = array();

     
    // Set up the fields in nicely named chunks.
     
    foreach ($view->field as $id => $field) {
       
    $field_name = $field['field'];
        if (isset(
    $taken[$field_name])) {
         
    $field_name = $field['queryname'];
        }
       
    $taken[$field_name] = true;
       
    $field_names[$id] = $field_name;
      }

     
    // Set up some variables that won't change.
     
    $base_vars = array(
       
    'view' => $view,
       
    'view_type' => $type,
      );

      foreach (
    $nodes as $i => $node) {
       
    $vars = $base_vars;
       
    $vars['node'] = $node;
       
    $vars['count'] = $i;
       
    $vars['stripe'] = $i % 2 ? 'even' : 'odd';
        foreach (
    $view->field as $id => $field) {
         
    $name = $field_names[$id];
         
    $vars[$name] = views_theme_field('views_handle_field', $field['queryname'], $fields, $field, $node, $view);
          if (isset(
    $field['label'])) {
           
    $vars[$name . '_label'] = $field['label'];
          }
        }
       
    $items[] = _phptemplate_callback('views-list-buddylist_of_uid', $vars);
      }
      if (
    $items) {
     
    //MAC Instead of returning an item list, we just seperate with spaces
      //return theme('item_list', $items);
     
    return implode(" ",$items);
      }
    }
    ?>
  5. Copy views-list-buddylist_of_uid.tpl.php to your theme directory. This formats the view to just show photo and name with no extra divs. The end result of this, the step above, and the CSS that will be added later is a mini thumbnail gallery of buddies.

A screenshot isn't possible at this point because these additions won't show up on the profile page until you add the contemplate templates.

Step 7 - Add the guestbook
The guestbook has been tweaked quite a bit to work as a commenting system on the profile page. This has made some of the options on the guestbook module non functional:

  • Anonymous users are not allowed to add entries.
  • Comments are turned off. (Instead, it's been modded so the user can post to his/her own guestbook.)
  • The pager is hard coded in the .tpl and ignores the options.
  • The add comment form is always on the page and not just linked to.

Directions:

  1. Copy guestbook.tpl.php to your theme dir. This controls the overall display of the guestbook section
  2. Copy guestbook-entry.tpl.php to your theme dir. This controls the display of a single guestbook entry
  3. Copy guestbook-form-entry-form.tpl.php to your theme dir. This controls whether the entry form or a note is displayed
  4. Add this code to your template.php:

    <?php
    // These overrides load custom .tpl files to handle the guestbook display as a whole, a single entry display, and the input form
    function phptemplate_guestbook($uid, $entries, $comment_entry, $limit = 20) {
      return
    _phptemplate_callback('guestbook', array('uid'=>$uid, 'entries'=>$entries, 'comment_entry' => $comment_entry, 'limit' => 20));
    }

    function
    phptemplate_guestbook_entry($uid, $entry, $comment_entry = NULL, $confirm_delete = false) {
      return
    _phptemplate_callback('guestbook-entry', array('uid'=>$uid, 'entry'=>$entry, 'comment_entry' => NULL, 'confirm_delete' => false));
    }

    function
    phptemplate_guestbook_form_entry_form($form) {
      return
    _phptemplate_callback('guestbook-form-entry-form', array('form'=>$form));
    }
    ?>

  5. While modifying module code is not recommended, there were a few changes I couldn't find a better way to do. I've put my modified version of guestbook.module into the zip file. You will need to overwrite the stock guestbook.module with this. All my changes are marked with //MAC and commented. If a new version of guestbook comes out, these changes will need to be merged in. That's why modifying modules is a bad idea. If anyone has a better way of doing it, I'd love to hear it. These are the changes:
    • Added a separate query so the guestbook on the profile page shows the last 5 entries with newest on top and the regular guestbook page shows them with oldest on top.
    • Removed the title from the text area on the add entry form as it was redundant.
    • Allowed users to post on their own guestbook
    • Changed the link on the poster's name/photo to go to their profile rather than their guestbook.

A screenshot isn't possible at this point because these additions won't show up on the profile page until you add the contemplate templates.

Step 8 - Theming the profile
I use the contemplate module to make theming the CCK nodes easier. If you are proficient in theming, you can use .tpl files instead.

  1. Go to Administer > Content management > Content templates and click on "Create Template" for User Profile. (?q=admin/content/templates/uprofile)
  2. Check "Affect teaser output" and paste the contents of User-Profile_Contemplate-teaser.txt into the "Teaser Template" box.
  3. Check "Affect body output" and paste the contents of User-Profile_Contemplate-full-node.txt into the "Body Template" box.
  4. If you are not using clean URLs, you will have to adjust the links for the taxonomy terms.
  5. Correct the path, if needed, in this line right at the top: drupal_add_css("sites/all/modules/panels/layouts/twocol_stacked.css");
  6. Submit to save the changes.

Your account view page should now look like screenshots/User-Account-Before-CSS.jpg

Get rid of submitted by / time on profile:
Note:You can skip this if you use the provided node-uprofile.tpl.php since it doesn't print the post info.

  1. Go to Administer > Site building > Themes > Configure > General Settings (?q=admin/build/themes/settings)
  2. Uncheck "Display post information on" for User Profile
  3. Save Configuration

Other theming:

  1. The CSS used for the user profile can be found in User-Profile-CSS.txt. Paste the contents of that file into your theme's .css file and edit to taste.
  2. Copy the "profile" directory into the "images" directory of your theme. This contains icons used by the contemplate code.
  3. Copy the node-uprofile.tpl.php to your theme directory for a stripped down node display that just shows the content.

Step 9 - Theme the input form
The default input form you get after adding all the fields and taxonomy to your usernode can be overwhelming, so I moved things around and simplified them. If you want to use my simplified edit form:

  1. Add node-uprofile-edit.tpl.php to your theme directory.
  2. Add this code to your template.php to call it:

    <?php
    function phptemplate_node_form($form) {
       if (
    $form['#node']->type == 'uprofile') {
         return
    _phptemplate_callback('node-uprofile-edit', array('form' => $form));
      }
      else {
         return
    theme_node_form($form);
      }
    }
    ?>

  3. Because the taxonomy terms are given by number instead of name, you may need to adjust this file if the terms don't show up as they should.
  4. If you opted to not make a term for community, leave out this part:
    print "Which community do you live in? If you don't live in the area, you can leave this blank.";
    print drupal_render($form['taxonomy']['1']);

Step 10 - Searchable view of profiles

  1. Go to Administer > Site building > Views > [Import] (?q=admin/build/views/import)
  2. Import the contents of User-Profile_User-listing-view.txt. Submit and save the view. This view will display a filterable list of all users with profiles.
  3. If your taxonomy is not set up as Communities, Hobbies, Reading, Music, TV and Movies numbered 1-5, the view will complain. You'll have to edit the view to change the numbers before importing.

Note: - If you want to display all users regardless of whether they have profiles, you will need to get the views_fusion module. There are instructions on drupal.org on how to use it but, honestly, I couldn't figure it out. Since I have the nodeprofile on the registration page, all users will have profiles, so I elected to take the easy way out and just do a view on nodeprofiles.

Step 11 - Known issues

  • Admin created accounts don't work right
  • After adding / editing nodeprofile, it sends you back to the nodeprofile node, not the user screen
  • User listing view sends you to the nodeprofile node

Step 12 - Further plans

  • There's a div set aside for the user's gallery. At this point, I haven't added image handling to my site, so I haven't done this section of the profile. It should just be a matter of inserting a view there, though, or perhaps a call to one of the image handling module's display.
  • Selectable color scheme. I was thinking it would be nice to have a few different CSS options for users. Not quite on the level of MySpace but maybe allow them to choose from a pre-defined list. This could be done by adding another field to the nodeprofile and a little code to load CSS based on the value.
  • Limit viewing to people on buddy list. I'd like to give users the option to hide their profile information from anyone who's not on their buddylist. This would work in conjunction with setting the buddylist option to make people get approval before adding someone as a buddy. I haven't looked into the best way to do this, but it shouldn't be too hard to determine if the logged in user is a buddy and use if tests around the printing of the fields to control the display.

User Profiles Version 2

As of February 6, 2008 I am marking this tutorial as deprecated. You can do everything in here with Advanced Profile faster and easier. It's still in alpha but is less buggy than this nearly year old tutorial. It's had a good run and made a lot of people happy but it's time to move on. I just don't have the time to support it anymore.

Please don't link to this page; use http://shellmultimedia.com/misc/user-profiles instead.

Goal: The aim of this tutorial is to walk you through every step you need to create a user profile like this one.

Skill level: This is a complex tutorial involving several modules. While I tried to make it as easy to follow as possible, it is not meant for beginners to Drupal and is not a quick drop-in solution. Please read it over and make sure you understand the concepts before attempting it. If you have problems, please use the support forum and I will answer if I am able.

Notes:

  • This tutorial assumes Drupal version 5.x
  • This does not use the core profile module or the bio module
  • The steps assume you want a profile exactly like mine. Most likely you'll want to do different things for your profile. I will try to provide alternates where possible but I'm not going to explore every possible permutation. I'll mark these alternates with [DIY...]
  • This tutorial only discusses the one user = one profile page method. You can get much more advanced using multiple nodes and pageroute, but that's beyond the scope of this tutorial.
  • You will be told to add things to your template.php file. If your theme doesn't have one, create a blank file in your theme with this name. The snippits are shown surrounded by < ? php and ? > (without the spaces) so the codefilter picks them up. You only need one < ? php at the top of your file and should not put them around every snippit.
  • If you are using subthemes, put the .tpl.php files in your subdirectory.

Modules needed:

  • Automatic Nodetitles - Not strictly needed, but it's handy so users don't have to put a title on their profiles and to keep the title consistant. If you don't use this, you'll need to adjust node-uprofile-edit.tpl.php so users can enter a title.
  • Buddylist - Allows users to designate other users as their "buddy". We will show a list of buddies on the profile page. If you don't use buddylist, take out the references to it. Unfortunately, I didn't do a check for the module so you will have problems if you don't remove the references yourself.
  • CCK - We need this to create the content type for nodeprofile to use. Also enable the field type modules that come with it as well as content copy.
  • Date - CCK date field used for birthdate. Also needs the adodb date library if you have people born before 1970. Just unzip it into the date directory.
  • Guestbook - Allows others to comment on a profile in a bit more organized way than simply enabling comments.
  • Link - CCK link field.
  • Node Profile (5.x-1.1 or later) - This is what allows us to make profiles out of nodes.
  • Node Profile Bonus - This has the code for taking over the user view page as well as fixes for the registration page. This is included in the zip and does not come with the nodeprofile module. You'll need to manually copy nodeprofile_bonus.module and nodeprofile_bonus.info into your nodeprofile module directory.
  • Node Family - Required by Node Profile
  • Private Message - We will check if the user allows private messages and add a link to do it if so. If you don't want private messaging on your site, you can skip this. Be sure to take out the reference in the node-uprofile.tpl.php file. Note: Prvatemsg has some new dependencies since this was written so get those as well.
  • Subform Element - Required by Node Profile
  • Token - Used by auotmatic nodetitles. WARNING: some versions of Token cause a WSOD when used with Link. If you are getting strange WSOD problems, try the dev version of Token.
  • Usernode - This is just used for the buddylist view.
  • Views - We will use this for the user's recent posts, the buddy list, and also searching users. Don't forget to enable the views UI module as well.

Step 1 - Getting prepared

  1. Download and install all the above modules.
  2. Set the user access control (?q=admin/user/access) for: buddylist, guestbook, privatemsg, user module (access user profiles) like like this. Note that you won't have permissions for the uprofile content until you create it in step 2.
  3. Configure buddylist (?q=admin/settings/buddylist) and privatmsg (?q=admin/settings/privatemsg) to taste. See guestbook section below before bothering with config.
  4. Set usernodes to not be promoted to front page (?q=admin/content/types/usernode)
  5. Download the file User-Profile-Tutorial.zip attached to this tutorial. This contains as much of my profile as I was able to export to save you time copying and pasting.

Step 2 - Creating and configuring the profile content type
Create the content type (see note at end of "Add the fields" section):

  1. Go to Administer -> Content Management -> Content Types -> [Add Content Type] (?q=admin/content/types/add)
  2. Name: User Profile
  3. Type: uprofile [DIY: If you name this something else, you will need to change it a few of the tutorial files or things will break.]
  4. Description: Whatever you want
  5. Title field label: If you're using auto_nodetitles this will be hidden.
  6. Body field label: Empty this out as we don't need the body
  7. Default options: Uncheck promoted to front page
  8. Maximum population: 1
  9. Check "Use this content type as a nodeprofile for users"
  10. Comments / attachments / pms: Disable all of these
  11. Save content type

Add the fields:

  1. Go to Administer -> Content Management -> Content Types -> [Import] (?q=admin/content/types/import)
  2. Content type: User Profile
  3. Paste in the contents of "User-Profile_uprofile-cck-fields.txt" found in the attached zip. Click submit. [DIY - Edit the User Profile content type and manually add all the fields that you want users to enter in their profile.]
  4. Your content type should now look like screenshots/User-Profile-Content-Type.jpg

Note: The reason I had you create the content type first and then import into it is that there seems to be a bug with groups not getting created when you create the content type at the same time. You can get around this by doing the import twice if you don't want to manually create the type.

Fix the fields display:

  1. Edit the User Profile content type you just created and click the tab for "Display Fields" (?q=admin/content/types/uprofile/display)
  2. Change all the labels for the fields to "inline". The groups can stay set to "above". This doesn't come across with the importing, unfortunately.
  3. Submit

Set the nodeprofile options:

  1. Edit the User Profile content type you just created and click the tab for "Node profile" (?q=admin/content/types/uprofile/nodeprofile) This tab is added by the nodeprofile module. If you don't see it, make sure you checked the box to make this type a nodeprofile node. Also make sure you have the latest version of nodeprofile as it's a new feature.
  2. Keep unchecked "Integrate this node profile with user categories."
  3. Check "Show this node profile during user registration." [DIY: Leave unchecked if you don't want it on the reg screen]
  4. User page display style: Display it as full node view
  5. Uncheck "Include an edit link to the display"
  6. Weight: 10 (this makes it come under username/email on the registration page but is unneeded otherwise)
  7. Submit

Access control:

  1. Go to Administer > User management > Access control (?q=admin/user/access)
  2. Set the permissions on "create uprofile content" and "edit own uprofile content".

Step 3 - Take over the user account view tab
By default, the nodeprofile module will put your user profile as a section on the user account view tab (located at /user/#). This is fine for simple profiles but doesn't look right for a full featured profile. [See screenshots/User-Account-Default-View.jpg]

This step makes the user profile take over the entire view tab. The downside is that you will lose anything that other modules add to this page. If you add a module that normally has a link on the user view page, make sure you provide alternate access to it. If you are fine with the way it displays by default, you can skip this step.

  1. Make sure the node_profile_bonus module is enabled. This has code for removing everything that's not a profile from the page and also adds an "Edit Profile" tab to the user account page for easy access.
  2. If you want to change your Edit tab to Edit Account to make things clearer, you need to add this code to your template.php:

    <?php
       
    if (arg(0) == 'user') {
         
    $vars['tabs'] = str_replace('Edit</a>', 'Edit Account</a>', $vars['tabs']);
        }
    ?>

    Adding this code is tricky because it needs to go in the _phptemplate_variables function. If you don't already have this function in your template.php, you can just add the entire function:

    <?php
    function _phptemplate_variables($hook, $vars) {
      if (
    $hook == 'page') {
        if (
    arg(0) == 'user') {
         
    $vars['tabs'] = str_replace('Edit</a>', 'Edit Account</a>', $vars['tabs']);
        }
        return
    $vars;
      }
    }
    ?>

    If you already have the function, you will need to merge it. The line "if ($hook == 'page') {" will likely already be there. So just put the code after that as it is in the first snippit.

  3. Add this code to your template.php:
    <?php
    // Override the display of the nodeprofile to just show the node itself and not the surrounding markup or the tabs.
    // Theming of the nodeprofile will be handled separately. Note that this affects it wherever it is displayed and
    // not only on the user page.
    function phptemplate_nodeprofile_display_box($element, $content) {
     
    $head = isset($element['#title']) ? '<h2 class="nodeprofile-title">'. check_plain($element['#title']) .'</h2>' : '';

      return
    $content;
    }

    // Override the entire user account view page to not show the categories or to seperate items into divs.
    // Note that this is set up to still show everything that is thrown on this page. Getting rid of non-nodeprofile
    // sections is done in the node_profile_bonus module by unsetting them but could also be done here by conditionally
    // printing them to begin with.
    function phptemplate_user_profile($account, $fields) {
      foreach (
    $fields as $category => $items) {
        foreach (
    $items as $item) {
         
    $output .= $item['value'] ;
        }
      }

     
    // Returning nothing from this function causes the entire page to whitescreen, so let's put something in by default
      // A better idea might be to load up some sort of standard thing that has the views and just not the profile fields
     
    if (empty($output)) {
       
    $output = "This user has not filled out a user profile.";
      }

      return
    $output;
    }
    ?>

Your user account page (?q=user/1) should now look like this: screenshots/User-Account-After-Page-Take-Over.jpg

Step 4 - Taxonomy
My profile uses taxonomy for some of the fields. I did this so you can click on a term and see all the other users with that term. With some coding, the taxonomy is used as though it was a normal CCK field.

Go to Administer > Content management > Categories (?q=admin/content/taxonomy). Create the following vocabularies: Communities, Hobbies, Reading, Music, TV and Movies. Communities is a multi select with the terms entered in via add term. The others are freetagging. Note: If you add these in a different order or choose different vocabularies, you will need to alter the node-uprofile.tpl.php code and the input form to match.

[DIY - Most people reading this are not going to want preset communities. Feel free to skip that vocab and add it as a normal CCK text field if you want and I'll make notes where you need to delete references to it later.]

Attach each of these vocabularies to your User Profile content type.

Step 5 - Add the views

  1. Go to Administer > Site building > Views > [Import] (?q=admin/build/views/import)
  2. Import the contents of User-Profile_User-tracker-view.txt. Submit and save the view. This view will display all the posts by a particular user.
  3. Import the contents of User-Profile_Buddylist-view.txt. Change the filter for node type to usernode. I don't know why this doesn't import correctly. Submit and save the view. This view will display the photo and name of all the user's buddies from the buddylist module. Make sure that you have a default user photo set or you will get errors if the user doesn't have a photo.
  4. To theme the buddylist view so that we get rid of the list markup, add this to your template.php. This code is all stock except for what is being returned at the end.
    <?php
    function phptemplate_views_view_list_buddylist_of_uid($view, $nodes, $type) {
     
    $fields = _views_get_fields();

     
    $taken = array();

     
    // Set up the fields in nicely named chunks.
     
    foreach ($view->field as $id => $field) {
       
    $field_name = $field['field'];
        if (isset(
    $taken[$field_name])) {
         
    $field_name = $field['queryname'];
        }
       
    $taken[$field_name] = true;
       
    $field_names[$id] = $field_name;
      }

     
    // Set up some variables that won't change.
     
    $base_vars = array(
       
    'view' => $view,
       
    'view_type' => $type,
      );

      foreach (
    $nodes as $i => $node) {
       
    $vars = $base_vars;
       
    $vars['node'] = $node;
       
    $vars['count'] = $i;
       
    $vars['stripe'] = $i % 2 ? 'even' : 'odd';
        foreach (
    $view->field as $id => $field) {
         
    $name = $field_names[$id];
         
    $vars[$name] = views_theme_field('views_handle_field', $field['queryname'], $fields, $field, $node, $view);
          if (isset(
    $field['label'])) {
           
    $vars[$name . '_label'] = $field['label'];
          }
        }
       
    $items[] = _phptemplate_callback('views-list-buddylist_of_uid', $vars);
      }
      if (
    $items) {
        return
    implode(" ",$items);
      }
    }
    ?>
  5. Copy views-list-buddylist_of_uid.tpl.php to your theme directory. This formats the view to just show photo and name with no extra divs. The end result of this, the step above, and the CSS that will be added later is a mini thumbnail gallery of buddies.

A screenshot isn't possible at this point because these additions won't show up on the profile page until you get to the theming section.

Step 6 - Add the guestbook
Note: Advanced Profile doesnot use the guestbook module and I don't plan on trying to convert guestbook entries. If you plan on converting to advprofile, I reccomend leaving this step out.

The guestbook has been tweaked quite a bit to work as a commenting system on the profile page. This has made some of the options on the guestbook module non functional:

  • Anonymous users are not allowed to add entries.
  • Comments are turned off. (Instead, it's been modded so the user can post to his/her own guestbook.)
  • The pager is hard coded in the .tpl and ignores the options.
  • The add comment form is always on the page and not just linked to.

Directions:

  1. Copy guestbook.tpl.php to your theme dir. This controls the overall display of the guestbook section
  2. Copy guestbook-entry.tpl.php to your theme dir. This controls the display of a single guestbook entry
  3. Copy guestbook-form-entry-form.tpl.php to your theme dir. This controls whether the entry form or a note is displayed
  4. Add this code to your template.php:

    <?php
    // These overrides load custom .tpl files to handle the guestbook display as a whole, a single entry display, and the input form
    function phptemplate_guestbook($uid, $entries, $comment_entry, $limit = 20) {
      return
    _phptemplate_callback('guestbook', array('uid'=>$uid, 'entries'=>$entries, 'comment_entry' => $comment_entry, 'limit' => 20));
    }

    function
    phptemplate_guestbook_entry($uid, $entry, $comment_entry = NULL, $confirm_delete = false) {
      return
    _phptemplate_callback('guestbook-entry', array('uid'=>$uid, 'entry'=>$entry, 'comment_entry' => NULL, 'confirm_delete' => false));
    }

    function
    phptemplate_guestbook_form_entry_form($form) {
      return
    _phptemplate_callback('guestbook-form-entry-form', array('form'=>$form));
    }
    ?>

  5. While modifying module code is not recommended, there were a few changes I couldn't find a better way to do. I've put my modified version of guestbook.module into the zip file. You will need to overwrite the stock guestbook.module with this. All my changes are marked with //MAC and commented. If a new version of guestbook comes out, these changes will need to be merged in. That's why modifying modules is a bad idea. If anyone has a better way of doing it, I'd love to hear it. These are the changes:
    • Added a separate query so the guestbook on the profile page shows the last 5 entries with newest on top and the regular guestbook page shows them with oldest on top.
    • Removed the title from the text area on the add entry form as it was redundant.
    • Allowed users to post on their own guestbook
    • Changed the link on the poster's name/photo to go to their profile rather than their guestbook.

    I've also included a .patch file for those who prefer to make the changes to the module that way.

A screenshot isn't possible at this point because these additions won't show up on the profile page until you get to the theming section.

Step 7 - User gallery
The user gallery section depends on how you handle image galleries on your site and is beyond the scope of this tutorial. On my site, I used the following tutorial to make galleries: http://drupal.org/node/144725 . If you do it that way, you can use the view I included for a mini user gallery. To use this view, uncomment these lines in node-uprofile.tpl.php:

// $view = views_get_view('gallery_user');
// print views_build_view('embed', $view, array($profileuser->uid), false, false);

Then import the view found in User-Profile_Views_User-gallery.txt.

Other suggestions can be found in the comments here and here.

Step 8 - Theming the profile

  1. Copy node-uprofile.tpl.php to your theme directory. This contains all the code and fields for the user profile page and the teaser. Your account view page should now look like screenshots/User-Account-Before-CSS.jpg
  2. The CSS used for the user profile can be found in User-Profile-CSS.txt. Paste the contents of that file into your theme's .css file and edit to taste.
  3. Copy the "profile" directory into the "images" directory of your theme. This contains icons used by node-uprofile.tpl.php.

Step 9 - Theme the input form
The default input form you get after adding all the fields and taxonomy to your usernode can be overwhelming, so I moved things around and simplified them. If you want to use my simplified edit form:

  1. Add node-uprofile-edit.tpl.php to your theme directory.
  2. Add this code to your template.php to call it:

    <?php
    function phptemplate_node_form($form) {
       if (
    $form['#node']->type == 'uprofile') {
         return
    _phptemplate_callback('node-uprofile-edit', array('form' => $form));
      }
      else {
         return
    theme_node_form($form);
      }
    }
    ?>

  3. Because the taxonomy terms are given by number instead of name, you may need to adjust this file if the terms don't show up as they should. For example, print drupal_render($form['taxonomy']['tags']['2']) ; will print the textbox to put in terms for vocabulary ID #2. If that's the wrong vocabulary, change the "2" to the right number.
  4. If you opted to not make a term for community, leave out this part:
    print "Which community do you live in? If you don't live in the area, you can leave this blank.";
    print drupal_render($form['taxonomy']['1']);

Step 10 - Searchable view of profiles

  1. Go to Administer > Site building > Views > [Import] (?q=admin/build/views/import)
  2. Import the contents of User-Profile_User-listing-view.txt. Submit and save the view. This view will display a filterable list of all users with profiles.
  3. If your taxonomy is not set up as Communities, Hobbies, Reading, Music, TV and Movies numbered 1-5, the view will complain. You'll have to edit the view to change the numbers before importing.

Note: - If you want to display all users regardless of whether they have profiles, you will need to get the views_fusion module. There are instructions on drupal.org on how to use it but, honestly, I couldn't figure it out. Since I have the nodeprofile on the registration page, all users will have profiles, so I elected to take the easy way out and just do a view on nodeprofiles.

Step 11 - Redirect usernode / nodeprofile
One annoyance with having usernode and nodeprofile and the user page is you end up with paths going 3 different places. If you use the included node-usernode.tpl.php, it has a 301 redirect to the user page. node-uprofile.tpl.php also has this at the top. So anything that sends you to either the usernode or the nodeprofile node will zap you over to the user account page instead. Since it uses a 301, it's SEO friendly. There's probably better ways of doing it, but this is a nice global fix so I didn't have to worry about hunting down every link and fixing it.

Step 12 - Further plans

  • Selectable color scheme. I was thinking it would be nice to have a few different CSS options for users. Not quite on the level of MySpace but maybe allow them to choose from a pre-defined list. This could be done by adding another field to the nodeprofile and a little code to load CSS based on the value.
  • Limit viewing to people on buddy list. I'd like to give users the option to hide their profile information from anyone who's not on their buddylist. This would work in conjunction with setting the buddylist option to make people get approval before adding someone as a buddy. I haven't looked into the best way to do this, but it shouldn't be too hard to determine if the logged in user is a buddy and use if tests around the printing of the fields to control the display.

User Profiles Version 3 - Advanced Profile

User Profiles Version 3 is no longer just a tutorial. I have taken as much as I could of version 2 and put it into the Advanced Profile module. By using Panels 2 as a base, I can provide a base to build on and a bunch of building blocks which non programmers can use to put together a customized user profile. It's still a little bit of work to set up but is much simpler than the tutorial and also much more stable. And it's tons more flexible. It works with either bio or nodeprofile and you can even skip the whole profiles as nodes and use the core profile, though you do lose a lot of functionality that way. You can add as much or as little as you like to make it work with your site.

The module is still being developed and more features are being added but it is quite usable as it is. I'm reasonably confident reccomending it for use on live sites, though you should test it out on a dev copy first just to be sure. The really awesome thing about basing this on panels is that it is fully exportable. You can set it all up on your dev site and just export it to be used on your live site. That's actually how much of the module was built; by exporting the panels I put together.

You can find the module on the project page and the documentation for getting all set up in the Drupal handbook. More advanced tutorials for customizing your profiles will be here in my handbook when I get time to write them.

If you have any issues with the module, please use the issue queue. It's much easier for me to track them and that's also where other people having issues will look for answers.

Enjoy!

Converting from user profiles tutorial to advanced profile

I've started converting Coulee Region ONLINE, which was the basis of the user profile tutorials, to using advanced profile. So I have some preliminary docs for converting from the tutorial:

  1. Take your site offline as this will make a temporary mess
  2. Disable nodeprofile bonus (this won't be needed anymore so can be deleted as well if you want)
  3. In template.php, remove:
  4. - function phptemplate_views_view_list_buddylist_of_uid
  5. - function phptemplate_nodeprofile_display_box
  6. - function phptemplate_user_profile
  7. Add "basic info" group to your uprofile node type
  8. Move the fields that aren't already in a group into "basic info"
  9. Edit the user profile panel page. Remove the existing guestbook content at the bottom. Add custom content and put in this code:
    <?php
    print guestbook_page(arg(1));
    ?>
  10. Follow the install directions of Advanced Profile including the instructions for using with nodeprofile. You will not need to generate the node type as you already have one.

All that's left is interests as taxonomy. The way I did it in the tutorial is really hacky so I'm looking at a better method possibly using the content taxonomy module.