A fresh approach to social networking profiles (Part I)

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 [[http://drupal.org/node/35728 |Customising the user profile]] Drupal handbooks article. (See also [[http://drupal.org/node/165114 |Fun with user_profile.tpl.php - stuff for My Space or Friendster like customizable profile]]).

Posted on: Last updated on: Written by:

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 [[http://drupal.org/node/35728 |Customising the user profile]] Drupal handbooks article. (See also [[http://drupal.org/node/165114 |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 [[http://drupal.org/handbook/modules/profile |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 [[http://drupal.org/node/35728 |Drupal handbook]]):


$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:

profile_css): ?>

profile_firstname ?>

picture): ?>

alt


profile_city): ?>

Located in: profile_city ?>


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;
?>

years old

profile_gender): ?>

profile_gender ?>


profile_country): ?>

from profile_country ?>

login));?> since start of last login!)

Member for: created));?>

About me

profile_aboutme ?>

Contacting profile_firstname ?>

send message
add to buddy list

My Espacio URL


uid?>

lot of people on today

lot of people on today

Cool people

Cool person 1

Cool person 2

Cool person 3


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-[[http://drupal.org/user/16747 |fago]]’d way: Enter node profile package! we will move on down the road to a fresh approach to social networking profiles for everyman.