Announcing the New, Improved NewAmerica.net
The New America Foundation -- a Washington, DC think tank and a Lullabot client -- just relaunched its website (http://www.newamerica.net) after shifting over to Drupal. Please take a look, and let them know what you think!
The new site relies heavily on themed views, CCK and some *very* customized tpl.php files -- not to mention the JSTools module's tabs, the Signup module's new anonymous-user signup functionality, and any number of template.php tricks! It also put the node_import module to good use -- porting over about 4,000 articles, event pages and policy papers from the old MS SQL/ColdFusion site.
Troy Schneider (TKS) and Mike Jones (SavoryMedia) both work at New America, and did most of the design and actual site-building in-house. They also underwrote some module development (Signup, Contemplate, CCK Image, Revision Moderation) that's been contributed back to the community, and quite a few hours of my bug-fixing time over the last couple months.
And, like any good Drupal site, the next round of changes and additions is already on the drawing board...
Thanks in advance for any feedback! :)
well done
I like it. It does have a 'political' look and feel to it - but without looking too stayed. Kind of like combining the professional look of something like firstgov.gov with a bit of web 2.0 style.
Interesting to note it is optimised for 1024px width, and doesn't really use a side column menu. Plenty of room for the content, and enough whitespace.
Very impressed with the usability, found it very easy to get around. Only improvement I would suggest would be highlighting the top level menu for each section to make it clear where you are.
Would like to hear how the menu system has been set up, especially the combination with styled side column menus.
Well done everyone concerned!
--
Ross Kendall
UK based Web and IT consultant specialising in Free and Open Source Software technologies.
http://rosskendall.com
Menus
Thanks Ross, for the kind words. Regarding your menu questions...
- The top nav is mostly just nice_menus with the CSS reworked to have the secondary nav list left-to-right, rather than in a vertical list under the "parent" primary nav item. The hard part was getting secondary nav for a particular section to display by default. We couldn't figure out a way to make nice_menus do this, so there's a separate menu call to pull in the "active" secondary nav, and then nice-menus just layers over it.
- The side-column menus for each Policy Program are something that Mike or webchick can probably explain better than I can, but basically they involve 1) separate page.tpl.php files for each program, 2) a custom "prog-nav" region, 3) a block that uses some simple php to pull in the program name as a header, and 4) a couple Lullabot-written functions to tie it all together! (The program-specific tpl.php files are probably overkill right now -- there's only about 2 lines of CSS that differ from one to the next -- but they make it easy to accomodate program differences down the road.)
And finally, you said:
Couldn't agree more! But we were completely stumped by this one -- it looks as though we'll have to wait for the menu improvements that are being built into Drupal 5.0. But if anyone knows how to coax the necessary class or ID hooks out of Drupal 4.7, I'd love to hear about it.
Thanks again.
-TKS
Recent Articles Question
Nice design layout.
Would you be willing to share how you setup the 'recent articles' on the right of the main page, to include the title with summary underneath instead of teaser, and pic to the far right?
Thanks in advance for any information you share.
Carey
Recent Articles
Carey -
Happily. As noted above, NewAmerica.net uses CCK and Views throughout. So we just added one more rich-text field -- called "Front Page Promo" -- to our Article/Op-Ed node type.
Then the Recent Articles block on the home page is simply a view that pulls in the Title and Front Page Promo field for the 6 most recent Article/Op-Ed nodes that have been promoted to the front page.
The author photo, short summary and pub name are all being added into that field manually. We toyed with the idea of some custom function to pull in all that stuff automatically, but ultimately decided that was more trouble than it was worth.
There's an Excerpt Module that appears to provide a similar degree of control -- although then your custom summary would be used everywhere, not just on the home page. For our site, though, extending our CCK/Views combo just a little bit further seemed like the way to go.
Hope that helps,
TKS
TKS: Pulling that info
TKS: Pulling that info automatically isn't quite so difficult, for www.kogvet.se we solved it by making a custom CCK field for which we had a special input syntax and I wrote a little piece of code to pull the user data incl picture path from the db. The code is commented in Swedish but I can xlate the comments in case someone's interested in seeing it.
--
Jakob Persson
Drupal developer, web designer and usability consultant
http://www.jakob-persson.com
Custom Code
Jakob:
I'd be very interested in seeing that code.
Our site complicates things, as our Authors are set up as Taxonomy Terms, not Drupal Users -- our fellows are not posting their own articles, for the most part -- but what you've done would be useful for other projects. And I'm sure others would benefit from it as well.
So if you have to time, definitely translate and post it, please.
_____________________________
Troy K. Schneider
New Media Editor, The New America Foundation
http://www.newamerica.net
Yes, Certainly, Please.
I'm interested in that code.
Also, can you explain more of what you did in CCK, maybe provide an example, and also tell where the code goes? I'm such a noob to CCK...
Carey
Well what I did was that I
Well what I did was that I created a CCK node type for articles and a field for entering author info and required a certain syntax and format. For example:
name;role;username;email;photo;enter_anything_to_hide_photo;
Lisa Larsson;reporter;lisla123;lisa@larsson.com;lisalarsson.jpg;
Pete Smith;author;petsm123;psmith@gmail.com;;noimg;
Example:
http://www.kogvet.se/cogito/artiklar/vad_vi_lart_oss_i_skolan_an_sa_lang...
Theme code:
<?php if($field_frfattare[0]['value']): ?><div id="cogito-authors"><?php print theme('cogito_authors', $field_frfattare[0]['view']); ?></div><?php endif; ?><?php
/*
theme function to format author details in article
for <a href="http://www.kogvet.se
" title="www.kogvet.se
" rel="nofollow">www.kogvet.se
</a> © jakob persson, <a href="http://www.jakob-persson.com
" title="www.jakob-persson.com
" rel="nofollow">www.jakob-persson.com
</a> freely available under the gnu general public license
september 2006
*/
function cogSkyAlpha_cogito_authors($authors) {
$output = "";
$files_directory = file_directory_path() . "/images/cogito/authorphotos/";
$authors = explode("\n",$authors);
foreach($authors as $author) {
$author = explode(";",$author);
$output .= '<div class="author">';
if ($author[0]) {
$a_name = $author[0]; //name
$a_role = $author[1]; //role
$a_acro = $author[2]; //acronym/username
$a_email = $author[3]; //email
$a_photo = $author[4]; //photo
$a_noimg = $author[5]; //whether to show a picture or not
$a_contact = ($a_email ? 'mailto: ' . $a_email : '' ) ; //use email address
$a_photo = $files_directory . $a_photo; //use photo from disk
//if nophoto set, show no photo
$a_photo = ( $a_noimg!='' ? '' : str_replace(array("\r","\n"),"",$a_photo) ); //remove scrap chars (not necessary since we terminate with ;)
// if there's a user by that username, look it up and use its details
if( $a_acro && user_load(array('name' => $a_acro)) ) {
$user = user_load(array('name' => $a_acro));
profile_load_profile();
$a_name = $user->profile_name;
$a_contact = "/user/$a_acro";
//if "nophoto", show no photo
$a_photo = ( $a_noimg!='' ? '' : $user->picture );
}
$output .= ( $a_photo && is_file($a_photo) ? "<div class=\"photo\">" . theme_image($a_photo, $a_name, $a_name) . "</div>" : "" );
$output .= ( $a_contact ? "<div class=\"name\"><a href=\"$a_contact\">$a_name</a></div>" : "<div class=\"name\">$a_name</div>" );
$output .= ( $a_role ? "<div class=\"role\">$a_role</div>" : "" );
}
$output .= '</div>';
}
return $output;
}
/* eof */
?>
CSS
#cogito-authors
{
float: right;
margin: 1em 0 1em 1em;
padding: .5em;
background: #f6fbff;
width: 18em;
}
#cogito-authors .author
{
margin: .5em .5em .5em .5em;
clear: both;
}
#cogito-authors .author .name
{
clear: none;
font-weight: bold;
}
#cogito-authors .author .name a
{
text-decoration: none;
}
#cogito-authors .author .role
{
clear: none;
font-style: italic;
}
#cogito-authors .author .photo
{
float: right;
clear: none;
margin: .4em;
}
I hope it may be of use!
--
Jakob Persson
Drupal developer, web designer and usability consultant
http://www.jakob-persson.com
Thanks for posting this!
_____________________________
Troy K. Schneider
New Media Editor, The New America Foundation
http://www.newamerica.net
nice, but
I'm using the nice_menus module for our site (www.princetondems.org), and even in this case I have concerns about the usability of the drop-downs. In the case of the New America site, I'm finding it very difficult to to select the second-level menu items that drop/fly down when I hover over the items in the top navigation menu.
Agreed
What's really needed I think -- especially for our site, but also for nice_menus in general -- is the ability to set a short delay for both the "mouse-over" and "mouse-off" before a menu changes.
That's fairly easy to do in javascript, but since the nice_menus module tries to stick with CSS as much as possible -- which I'm all for, by the way! -- we decided to live with it for now, and hopefully improve on that aspect in the near future. (Because suddenly getting the "Publications" subnav popping when I'm trying to mouse to a sublink under "Events" is getting on my nerves too!)
Not sure yet whether that means tinkering further with nice_menus, rolling our own, or maybe giving the ActiveMenues in JSTools a try... Would welcome any suggestions.
Also, FYI: it looks like some others are working on a javascript patch to nice_menus for this -- at least for 4.6: http://drupal.org/node/57819.
_____________________________
Troy K. Schneider
New Media Editor, The New America Foundation
http://www.newamerica.net
subscribing
Just tagging this for subscription purposes, don't mind me.
===
BuyBlue.org | The Blue Fund | Lullabot
Here's the Digg story
- Robert Douglass
-----
Lullabot | My Drupal book | My Digg stories