Home » Blogs » victorkane's blog

A fresh approach to social networking profiles (Part I)

Fri, 2007-11-30 18:56 — victorkane

Part I - The old fashioned core profile module way

On several large projects, I have already used various approaches to themeable, browseable, and easily editable social networking profiles.

About a year and a half ago, I used the core profile module, and themed it as per the Customising the user profile Drupal handbooks article. (See also Fun with user_profile.tpl.php - stuff for My Space or Friendster like customizable profile).

Basically, I enabled the core profile module and then added a whole bunch of additional fields of different types, sorted into various categories (see Core modules Drupal handbook section Profile: extending user account information).

For one site I even let users stick CSS into one such profile field -- and it worked: just as dangerous as My Space sites Embarassed.

First I enabled a user profile template in the theme's template.php file (straight out of Drupal handbook): 

<?php
/**
* Catch the theme_profile_profile function, and redirect through the template api
*/
function phptemplate_user_profile($user, $fields = array()) {
  // Pass to phptemplate, including translating the parameters to an associative array. The element names are the names that the variables
  // will be assigned within your template.
  /* potential need for other code to extract field info */
return _phptemplate_callback('user_profile', array('user' => $user, 'fields' => $fields));
  }
?>

Then I set myself up a user_profile.tpl.php and went to town with the snippets found on that page. I got this far:

<div class="custom-profiles">
  <?php if($user->profile_css): ?>
    <style><?php print $user->profile_css ?></style>
  <?php endif; ?>
<div id="personal">
<div id="personal-name">
  <p class="title"><?php print $user->profile_firstname ?></p>
  <?php if($user->picture): ?>
    <p class="personal-default-pic"><img src="/<?php print $user->picture ?>" alt="alt" title="title"/></p>
  <?php endif; ?>
  <?php if($user->profile_city): ?>
    <p class="personal-city">Located in: <?php print $user->profile_city ?></p>
  <?php endif; ?>
<?php
$dob = $user->profile_dateofbirth;
$today = getdate();
// Determine if their birthday has gone by yet
$delta = 0;
if ( $dob['month'] > $today['mon'] ) {
  $delta = -1;
}
else if ( $dob['month'] == $today['mon'] ) {
  if ( $dob['day'] > $today['mday'] ) {
    $delta = -1;
  }
}
$age = $today['year'] - $dob['year'] + $delta;
?>
  <p class="personal-age"><?php print $age ?> years old</p>
  <?php if($user->profile_gender): ?>
    <p class="personal-gender"><?php print $user->profile_gender ?></p>
  <?php endif; ?>
  <?php if($user->profile_country): ?>
    <p class="personal-country">from <?php print $user->profile_country ?></p>
  <?php endif; ?>
  <p><?php print (format_interval(time() - $user->login));?> since start of last login!)</p>
  <p>Member for: <?php print (format_interval(time() - $user->created));?></p>
</div>
<div id="personal-about">
  <p class="title">About me</p>
  <p><?php print $user->profile_aboutme ?></p>
</div>
<div id="personal-contacting">
  <p class="title">Contacting <?php print $user->profile_firstname ?></p>
  <a href="/privatemsg/msgto/<?php print $user->uid?>">send message</a>
  <a href="/buddy/add/<?php print $user->uid?>">add to buddy list</a>
</div>
<div id="personal-url">
<p class="title">My Espacio URL</p>
<p><a href="/user/<?php print $user->uid?>"><?php print $GLOBALS['base_url']?>
<?php print $user->uid?></a></p>
</div>
 
</div> <!-- end personal (left) -->
<div id="coolstuff"> <!-- start right column -->
  <div id="today">
  <p class="title"><?php print format_date(time(),'large');?></p>
    <p>lot of people on today</p>
    <p>lot of people on today</p>
  </div>
  <div id="Cool new people">
    <p class="title">Cool people</p>
    <p>Cool person 1</p>
    <p>Cool person 2</p>
    <p>Cool person 3</p>
  </div>
</div> <!-- end right column -->
  <div id="profile-footer">
    <p></p>
  </div>
</div> <!-- end custom-profiles -->

mixing in some css in, say, style.css:

/* profile */
#personal {
  float: left;
  border-right: 1px solid navy;
  border-bottom: 1px solid navy;
  margin-right: 2em;
}
#personal { background-color: white;}
#personal .title {color: white; background-color: #6699cc;}
#personal p {color: darkblue;}
#personal a,a.link,a.visited {color: gray;}
#personal a.hover {text-decoration: underline;}
#coolstuff {
  border: 1px solid #ff3300;
}
#coolstuff .title {
  border: 1px solid #ff3300;
  color: #ff3300;
  background-color: #ffcc99;
}
#profile-footer {
  clear: both;
}

obtaining: Core profile themingCore profile theming

So the only interesting thing about this code is in lines 2-4.

I had added a CSS section to all the other My Space like profile categories (where you can actually just stick css in anywhere).

Pretty cool: CSS category in profileCSS category in profile

But, the downside of all this is, what about using views with profiles, how to do a profile search based on various fields in the profile (age, geographic region, etc)... how to take advantage of the cck + views revolution?

So, in Part II - The new-fago'd way: Enter node profile package! we will move on down the road to a fresh approach to social networking profiles for everyman.

Bookmark/Search this post with:
tags: