Customising the user profile pages (a "before" and "after" example with screenshots)
This illustrative example shows how easy it is to override theme functions using the User_profile pages as an example.
Before
This is how the out-of-the-box user profile looks like, with extra profile fields, such as City, Country, Postcode, Position etc. added in. (please note that i couldn't fit the whole page into the one screenshot..there is an extra "background/more info." field that doesn't show in the BEFORE screen shot.
click to view the BEFORE screenshot in a new window
After
This is how the exact same user profile looks after overriding the theme and applying a simple user_profile.tpl.php file in my theme directory.
click to view the AFTER screenshot in a new window
How I did it
To override just the layout of the User Profile page..I created a template.php file with this in it:
<?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));
}
?>I uploaded that into my active theme directory and then created and uploaded, to the same directory, the override layout file which is called user_profile.tpl.php.
A very simple/shortened example of how my user_profile.tpl.php works maybe illustrated as follows....(e.g. I have setup custom extended user profile fields called profile_city, profile_country, profile_postcode)....
<?php if($user->picture): ?>
<div class="picture">
<img src="/<?php print $user->picture ?>">
</div>
<?php endif; ?>
/** If you are using this snippet with Drupal version 4.7.x or 5.x use the
* following line to display a user picture instead
* <?php if($user->picture) {print theme('user_picture', $user);}?>
*/
<div class="custom_profiles">
<div class="fields">City: <?php print check_plain($user->profile_city); ?></div>
<div class="fields">Country: <?php print check_plain($user->profile_country) ;?></div>
<div class="fields">Postcode: <?php print check_plain($user->profile_postcode); ?></div>
</div>If you don't want to show empty fields you can use an if check on the field like so:
<?php if($user->profile_postcode) { ?>
<div class="fields">Postcode: <?php print check_plain($user->profile_postcode) ?></div>
<?php }?>Notes:
Edit your style.css to format the classes.
Security note: I have updated this snippet to include a security check on the content before outputting it, i.e. check_plain(). It's important to remember to check output properly when overriding theme functions in Drupal. (Please consult the How to handle text in a secure fashion for more information).
More details & in depth examples/discussion on this is in the original forum post.
| Attachment | Size |
|---|---|
| before.png | 14.07 KB |
| after.png | 12.85 KB |
