Sprucing up your User Profile Pages
I recently launched a Drupal Codebase site for a programming community and wanted to have the user profiles to be more than just a "signed up on..." and a Tracker Tab. I wanted them to have structured and customisable blocks, dynamic content, a Peer to Peer Message Board (almost finished)... I can have my dreams cant I?!
I recently wrote a book page on how to programmatically create a view. I wanted to do this as it would allow to me control almost an entire website with multiple content types, terms and users (as well as combinations of the three) along with RSS feeds - all powered by the Views Module + a bolt on module consisting mostly of a menu callback and a function to make and configure a view. This worked pretty well for a first try and principle test!
I then realised - hey, if you can do this with Views - why cant you do it with Panels too? Panels are fantastically useful for structuring multiple blocks, views and nodes onto a page. So I tried… And you can!
I'm not going to bother doing it to THIS site as I'm the only user - pretty pointless. However it will be useful for those of you who have a user-driven website and want to have user profiles be a little more interesting.
Firstly, you want to define a few views. Currently (at time of writing), I have 2 - Most Recent Snippet and Nodes Comments On (I wanted Most Recent Comments, but Views wont do that for me AFAIK). Next, you need to override the theme_user_profile function in your template.php. This is the code I used:
//Initial Load $panels->content = array(); $panels->access = array(); $panels->title = $account->name; $panels->css_id = "css_id"; $panels->layout = "twocol"; //Users Code $temparea = new StdClass(); $temparea->area = 'left'; $temparea->type = 'views'; $temparea->configuration = array( 'view' => 'code_by_user', 'type' => 'block', 'pager_id' => 0, 'nodes_per_page' => 20, 'args' => $account->name, 'url' => '', 'show_title' => 1, ); $temparea->position = 1; $panels->content[$temparea->area][] = $temparea; //Users Comments $temparea = new StdClass(); $temparea->area = 'right'; $temparea->type = 'views'; $temparea->configuration = array( 'view' => 'comment_by_user', 'type' => 'block', 'pager_id' => 0, 'nodes_per_page' => 20, 'args' => $account->name, 'url' => '', 'show_title' => 1, ); $temparea->position = 1; $panels->content[$temparea->area][] = $temparea; $layouts = panels_get_layouts(); $layout = $layouts[$panels->layout]; $layout['css_id'] = $panels->css_id; panels_is_panels_page(TRUE); $content_types = panels_get_content_types(); foreach ($panels->content as $location => $list) { foreach ($list as $area) { $function = $content_types[$area->type]['callback']; if (function_exists($function)) { $content[$area->area] .= $function($area->configuration); } } } $output = panels_get_layout($layout, $content); drupal_set_title(filter_xss_admin($panels->title)); return $output;
As you can see, first step is to initialise the panel settings - in this case I want to use the twocol panel layout along with the username as the panel title and the CSS ID of 'css_id' (original, eh). This is easy.
The next two steps are slightly more complex as they involve creating associative arrays of the panel. I've not investigated ALL of these types, but I found the easiest way was to unserialize and "print_r" the contents of one of the configuration fields from the panels_area table in the database. This can give you and idea of what goes in where. To embed a View, you can follow my example above with the value for the view key being the view id, type being the type of view output (eg, embed, block or page), pager_id being a uniquely identifiable value fpr multiple pagers on a page and so on - most of this can be found in the Drupal Views documentation.
Nearly there; next we grab the panel layouts and select the entry from the layouts array determined by our panels selection earlier on. We also set the CSS ID.
Following this we grab all the content types compatible with panels. We need to do this so we can find which callback we need to execute to get the data out of a "Views Panel" or a "Block Panel", etc. This will also check that the content type you've assigned to that panel actually HAS a valid and existing callback too. The results of the callback are appended into an array of strings where they key is the ID of the area you'd putting data into (eg 'left').
The final stage is to pass the layout and contents through the panels module, set the title of the page based on the panels configuration above (in this case, the user name) and then return the output.
If anyone has any suggestions for this - I'd happily take them on board. At some point over the next week or so, once I have all this ironed out 100% - I'll write it up as a book entry to go alongside my Creating a View Programmatically "tutorial".
Hot Content
Follow Me
Recent Posts
Tag Cloud
Recent Photos
24 Comments
Sounds very intersting,
Sounds very intersting, however I'm a non-developer, so the explanation is kind of going over my head.
Could be nice to see a screenshot of what you got.
As far as I understand, Panels 2, wishes to have this feature(panels_profile.module)
Ah - an example would be a great idea!
An example page with a panels/views themes profile is...
http://codebase.dbp-site.com/user/nick
I'm not quite sure that I
I'm not quite sure that I understand.
Should I put your example code in template.php in MYTHEME_user_profile () ?
Another question:
As I see, your code doesn't have "user picture" feature?
Correct :-)
You're right - you override theme functions by specifying the theme name in place of the word "theme", so theme_user_profile() would become garland_user_profile() (example).
Well spotted about the lack of user profile image. This is not an oversight on my part - this is just something I haven't done.
One think you COULD do is define a custom panel and set the body to a HTML output of the biography of your user + a floating image... I might have a go at doing that on codebase! Thanks for the idea ;-)
a follow up
Nick - i stumbled upon this website....thanks for sharing the code!
i have a quick question: can panels be modified to get something like this:
http://www.geocities.com/mirage762/drupal.jpg
cheers!
jean
RE: Mirage
You can indeed make the page look like that.
You'd define your own panel which is very easy when you look at how the other panels work and then you'd populate the top left with the user image, the comments section with some kind of view (or the result of a user commenting module... somewhere) and the top right profile bit is just the biography stuff.
The bit you'll find hard is generating columns that auto wrap using CSS...
huh..it's great that it's
huh..it's great that it's possible but I'd be very grateful for some more hints on how to do that :)
I'm new to drupal - but I know some CSS...would I make a panel and then do subdivisions within it? if so, where would I type the code and how would I relate that to the forms where users put their data (i.e. to fill in profile stuff)...
i guess i'm just confused with what a panel actually is to Drupal - i.e. how drupal treats panel and where it keeps the code for it...
any hints welcome,
cheers and thanks!
jean
Panel with @display variables
Hi Nick,
I read this post, and may be it is usefull for my situation.
I have a great panel working, only I want to add the panel title from one of the views in a pane. And add Nodewords metatags related to the content which is shown.
I thought about something like this for the panels-page title:
$page->title = panels_get_pane_title($display->content[283], $display->context)
283 is the id of my pane (with view with arguments).
This is not possible with import-export panel. The page-title is not possible to program normally.
Will this be possible using your method?
Thanks in advance for your reply!
greetings,
Martijn
use drupal_set_title?
For the page title why not use drupal_set_title()?
How difficult it is to make it a module?
For a newbie like me who has spent several hundreds ofhours on setting up his drupal website and still doesn't figure out most of the things, it would be great to have this implemented as a module (or to find module that makes the profile prettier). Any clues?
Not a bad idea
I might try to knock up a module. The only downside would be that you'd need to add 2 or 3 lines to your template.php.
Always better for newbies
Well, I'd say that only two lines to change is not a big deal, especially if the module allows some customizing options. Would be cool
Module would be great
I'm so glad I stumbled on this site via google search. Thanks Nick.
It would great if you could
It would great if you could preface your writeup with (1) the example link and (2) a list of module dependencies. I guess I'm asking for an expansion into a 'recipe', if its not too much work.
Seeing as there is demand!
I think I'll look into this module :)
That would be great!
Thanks Nick. I'm sure it will answer the needs of many people on drupal.org
The answer is Panels 2.0!
I just tried out the Panels 2 Beta and it allows you to override the 'user/%' path and turn it into a panel. You can then add any view you like to it - panels passes on the User's ID as part of the context.
Eazy dude, your website came
Eazy dude, your website came up 3rd on google when I searched "creating panels panels 2 drupal", :-) nice one :-) I was actually looking on how to declare your own panel layout.....didn't panels 1 have a helper file with it? Anyway, as you know from work today I was messing around with panels 2 and it rocks!!! Laters dude :-)
Do you know any article
Do you know any article related with creating custom user profiles with Panels 2.0 (similar to this post)?
Not that I know of...
... And this is probably because Panels 2 is still in beta. Once is released people will start documenting it.
Does this still allow the
Does this still allow the user to edit their account/profile information?
Yup
It simply overrides the output of the profile page - the 'user/x/edit' page is untouched (although Panels 2 can redo the layout of a form, IIRC)
How to change the 'View' name in the tab?
Working great and everything... I visited this link and there are two tabs available: View(to view info for the user) and Code.
I have been trying to change the name "View" to "Profile", with no luck.
Any ideas would be greatly appreciated!!!
Depends on Drupal Version
If it is Drupal 5, its much harder. If you're using Drupal 6 then you can use the new hook_menu_alter and simply change the menu callback title.
Post new comment