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.