David Hunt

Background

Project Zaynab is a two week youth training project in Portland Oregon, whose purpose is to train youth to begin leading classes in their own communities for the spiritual education of children ages 5-9 and of younger youth ages 11-14.  The project's schedule called for 9 days of intensive training at the Beaverton Oregon Bahá'í Center, followed by another 5 days of training and service, assisted by a resource person, either in the Portland area or in their home communities.

Since these projects tend to form strong bonds among the participants, the project's organizer wanted a site that would allow them to interact with each other and with their tutors and resource people, at first during the initial nine days, and more especially after they went home to their communities, and this site was designed with those things in mind.

Setup

The site is built on the Acquia version of Drupal 6.  The major modules used are cck, views, embedded media field with flickr feed support, feedAPI and feedAPI mapper, twitter, lightbox, wysiwyg with tinyMCE, a slew of access modules including taxonomy access control lite, content access and content permissions, messaging, core modules like blog and comment, and some modules that really should be core like token and pathauto.

Blogs

Fundamentally the site is a community blog, so the core blog module was an obvoius choice.  We added taxonomy access control lite to the blog content type, so that we could let users determine whether to show their posts to everyone (public), only to the tutors (restricted), or to nobody (private).

For input, I went with TinyMCE through the excellent wysiwyg module.  Then I was surprised and happy to find the Better Formats module, which allows the site administrator to set the default input format for each role.  To me, this is a crucial UX improvement, since I don't want my users to have to click on a collapsed "Input format" link, and change a setting every time they encounter a text box.

Images

Since a lot of the participants are already on social networking sites like Flickr and Picasa, we chose to use embedded media field to hold our images.  FeedAPI is used to take several flickr sets and groups that people have set up, and with the use of FeedAPI Mapper, convert them to nodes, each of which has an embedded media field for the image.  This was a bit experimental; Imagecache is my usual solution, and you cannot use imagecache with images from other sites.  FeedAPI Mapper can be used to simply create image nodes, but I wanted to see what would happen if we left those images on another host.  In the end, I'm unhappy enough with the result that I'm probably going to go back and redo those pages.  The embedded media field images do not have ANY reasonable options for image display.  I tried entering defaults for height and width: the images became distorted.  So I tried entering only width: the images were rendered with a height="", which in IE7 becomes a one-pixel high image pancake.  So I hacked the module using suggestions from a patch that was supposedly committed last month but still wasn't in the dev version, and I was able to put up a fairly nice looking random image view.  But, the page view for the image slideshow still had distorted images.  And the fun didn't stop there!  Working with FeedAPI and Embedded Media Field, I couldn't find any default options available for mapping feed items directly to the node.  Instead, for each feed that you create, you have to first "refresh" the feed, then manually map each item from the feed to specific fields in the node.  This is just not something that I can expect my users to do.  There are, however, default settings for mapping feed items to nodes that have an actual image field instead of an embedded field.  So, all in all, I believe next time I'll definitely go for that option - at least until there is some significant development in the embedded image field arena.

Video

In the case of video, for which people mostly post one at a time, which requires a lot of bandwidth for hosting and for which Drupal options are still developing, I'll probably stick with the embedded media field solution as I expect it to work pretty well.  There are great options for importing - including, for youtube, an option to remove those annoying "related videos" that pop up with NC17 content after your nice clean video about the spiritual advancement of humankind is done playing.  That's why I moved to Blip.tv.

Twitter

The "Tweets from the Streets" is a customized version of the view that comes with twitter module; if users have not signed up for a twitter account, it will remind them to do so with a small line of text at the top.  Each user's private twitter page has a similar line of text, because the place where you can add your twitter information is extremely difficult to find - it's on a subtab of the user/edit tab.  So we put lots of pointers in for them.  I also ran into the Twitpocalypse defect, which was very quickly patched up by some very responsive maintainer, and I had to mention it here because that name is just hilarious.

Theme

The theme was exported to html from Artisteer 2.1 and themed by hand afterward.  Artisteer is a program which I would recommend for those of us who find our creativity can function better when it has something to start with. However, although it has an option for directly exporting a Drupal theme, I would recommend starting from the html and rolling your own, as I have found the Artisteer generated themes to be buggy and impossible to effectively modify.  The auto-generated html/css pages, while still a bit verbose, are much easier to work from than trying to back-port a custom template.php file with two includes for D5 and 6.