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.