Raised Eyebrow Blog

There are many ways to skin the cat when it comes to putting video on a Drupal site. I’ve tried and tested quite a few methods since my first introduction to Drupal 2 years ago. I’ve used Embedded Media Field as well as Video Filter but finally settled on the combination of FileField with JWPlayer or Flowplayer and in some cases the Media Mover Module for moving files to Amazon S3 storage. I’m going to use our recent launch of the CCPA website as a case study for how we currently handle video delivery. So let’s dissect this a little.

Uploading files

The video files need to be uploaded before we display them. This is best achieved using the wonderful Filefield Module. This is quite a simple yet powerful module developed/maintained by Lullabot, Nate Haug (quicksketch), whom I’ve had the pleasure of being trained by at one of their excellent Drupal Theming workshops. Once you install and enable the module you then add a new CCK field, of type “filefield”. In our case we have a content type called “Multimedia”. We add the field to this content type. You then need to configure the following:

1. Permitted upload file extensions

In most cases this is relatively straightforward, it’s just one file type. If you’re using JWPlayer or Flowplayer it will be FLV. Both these players are built to play Flash Video files (FLV). If you have Quicktime MOV’s or AVI’s that you want to upload then you’ll need to consider different options for playing video. For the purpose of this case study we’re just uploading FLV files.

2. File size restrictions

It’s very important that you set these, otherwise you may end up with users trying to upload 200MB videos, not a very good idea. I set this low as a learning feature for clients. Any reasonably long FLV file that is over 40MB is probably not optimized as well as it should be.

3. Path Settings

I like to keep all files that admin/editor users upload in a folder called uploads so that it’s easy to manage them later if they need to be exported etc.

Multimedia File Field Settings

Create a placeholder image

Most video players require some sort of poster/placeholder image to display before the video plays. In this case I created another FileField for the placeholder image. We’ll use that later on in conjunction with the ImageCache module to achieve our desired results.

Moving Files to Amazon S3

We’ve been using Amazon S3 for storing video files on quite a number of sites recently. One reason is that we were looking for a location off the webserver that could deliver the video, without impacting the performance of the server, so that in the event of a traffic spike the webserver wouldn’t fall over. We could also have used Amazon EC2 or another CDN service for this, however as most of our clients have a very regional (BC) audience. Most CDN’s have nodes in various locations across the US and Europe and this would have served no real improvement as the nearest cached version will always be in the same place for everyone.

So if they’re uploading the files directly to the Drupal site, how to the files get delivered from Amazon S3. That’s where the Media Mover module comes in. This module has many purposes, but for our needs it simply harvests all the files uploaded via the “Multimedia” content type and moves those files to Amazon S3 so that we can deliver them from there.

Download, install and enable the Media Mover module. You’ll also need an S3 account and will need to set that up via the module setting page. You then need to add a Configuration via https://www.yoursite.ca/admin/build/media_mover/add.

Media Mover has 4 actions which it performs on your files:

• Harvest – Define/collect the files you want to perform actions on
• Process – Perform certain actions on the files
• Storage – Where to store files once the actions have been carried out
• Complete – Final actions to perform on the files

So in this case we just want to harvest all Multimedia files and store them on Amazon S3.

So for clarification here Media Mover does NOT MOVE the files to Amazon S3, it simply COPIES them over to S3 and the original files remain on your server.

Media Mover Settings

Delivering the moved Video files

So this is where the Drupal theming trickery comes in. Flowplayer and JWPlayer are both Flash based FLV video players than can be called using Javascript and that’s exactly what I do on this site. In plain english this is what happens:

1. Output the placeholder image to screen as a link.
2. Use Javascript so that when the user clicks on the image the video plays.
3. Deliver the video from the file on Amazon S3 rather than the file on the webserver (Drupal site).

We need to modify three files to achive the above:

• template.php
• multimedia.js (a newly created JS file)
• node-multimedia.tpl.php (a custom template file for all multimedia types)

template.php file

Setting up all the variables we’re going to need to use as well as making the javascript available

if($variables['field_file'][0]['view']) { //If there is a file and there is something to display...
  if ($variables['field_aspect_ratio'][0]['value']) { //Aspect ratio handling
    $variables['aspect_ratio'] = $variables['field_aspect_ratio'][0]['value'];
  } else {
  $variables['aspect_ratio'] = 'normal';
  }
  $variables['multimedia_type'] = 'video'; //Set the type of multimedia - we also have audio and interactive...
  custom_theme_get_media_mover_files($variables['field_file'][0], $variables['media_mover'][3]); //Set the filepath to the media moved filepath...
  drupal_add_js(array('videoplayerpath' => path_to_theme() .'/scripts/plugins/flowplayer/flowplayer-3.1.1.swf'), 'setting'); //Set a JS variable to retrieve later...
  drupal_add_js(path_to_theme() .'/scripts/plugins/flowplayer/example/flowplayer-3.1.1.min.js', 'theme'); //Call the player...
  drupal_add_js(path_to_theme() .'/scripts/multimedia.js', 'theme');//Call the custom JQuery to handle creating the player...
}
 
/**
 * A function that takes a file object and a media_mover element array and set the file path to
 * its media moved path on Amazon S3 or wherever it moved to.
 *
 * It uses the unique file_id identifier to match file with media_mover file.
 *
 * $file = $variables['file_image'][0];
 * $media_mover = $variables['media_mover'][{id of media mover configuration}];
 *
 * @param 		&$file A Drupal file array (by reference)
 * @param 		$media_mover A media_mover file/element array
 */
function custom_theme_get_media_mover_files(&$file, $media_mover) {
  if(module_exists('media_mover_api') && $media_mover) { // If media mover is installed...
    foreach($media_mover as $media) { // Loop through each media_moved file...
      if($media['fid'] == $file['fid']) { // If they match (file id is a unique identifier...
        $file['filepath'] = $media['complete_file']; // Replace the attached file path with the media moved file path...
      }
    }
  }
} // custom_theme_get_media_mover_files()

Let me explain one thing in regards to line 9. I’ve created a custom function and I’m passing

$variables['media_mover'][3]

to my custom function. When you create a Media Mover configuration and map it to a CCK field, it creates an array in $variables to keep track of the Media Mover object. The array is called ‘media_mover’ and the number 3 in this case is the ID of the Media Mover configuration.

node-multimedia.tpl.php

Set up the template. Create a wrapper div with the placeholder image as the background image (this is run through imagecache) and display the play button as a link with the path set to the path of the Amazon S3 file. This link will also have an id attribute of ‘multimedia’. This is necessary as it allows us to attach the player, via Javascript, to this link.

<div id="containing-block">
<div id="video-wrapper" class="<?php print $aspect_ratio;?>">
<div>
     &lt; ?php print l('<img src="/'.path_to_theme().'/images/ccpa-button-play-large.png" alt="Play this video" />', $field_file[0]['filepath'], $options = array('html' => TRUE, 'attributes' => array('id' => 'multimedia', 'class' => $multimedia_type))); ?></div>
</div>
</div>

multimedia.js file

Hook the Flowplayer to the link, with id of ‘multimedia’, that we created in the template.

Drupal.behaviors.showMultimedia = function(context) {
  var interactive_path = $('#multimedia').attr('href'); /*Get the path to the video*/
  var interactive_image = $('#multimedia').css('background-image');	/*Get the path to the placeholder image*/
  interactive_image = interactive_image.slice(4,interactive_image.length-1);/*Tidying up the interactive image path*/
 
  if($('#multimedia').hasClass('video')) {/*If the link has a class of video*/
  $('#multimedia').flowplayer( /*Initialize the flowplayer and configure the controls*/
    Drupal.settings.basePath + Drupal.settings.videoplayerpath, /*Path to the player, gotten from temaplate.php*/
    {
      plugins: {
	controls: {
	  stop: true,
	  backgroundColor: '#efefef',
	  backgroundGradient: 'none',
	  borderRadius: '0px',
	  bufferColor: '#d2d6ab',
	  bufferGradient: 'none',
	  buttonColor: '#777777',
	  buttonOverColor: '#99a134',
	  durationColor: '#cccccc',
	  height: 25,
	  opacity: 1.0,
	  progressColor: '#99a134',
	  sliderColor: '#9999999',
	  sliderGradient: 'none',
	  timeBgColor: '#777777',
	  timeColor: '#ffffff',
	  tooltipColor: '#000000',
	  tooltipTextColor: '#ffffff',
	  volumeSliderColor: '#777777',
	  volumeSliderGradient: 'none'
	}
      }
    });
  }
};

I hope that was easy to follow. Now there’s one more thing to cover and that’s Aspect Ratio.

Aspect Ratio

The issue of aspect ratio is very important when figuring out how to display video. Not so recently YouTube switched all video display to the 16:9 ratio thus setting the stage for the proliferation of the widescreen aspect ratio across the web. So how do you allow the user to upload a video and choose it’s aspect ratio. I’m sure there are other ways to do this via Metadata etc, but for our needs on this site I used a CCK field. This is a simple CCK field set with three options:

1. None (defaults to 4:3)
2. Normal (4:3)
3. Widescreen (16:9)

Aspect Ratio Field Settings

We then check the value of this field in template.php above:

if ($variables['field_aspect_ratio'][0]['value']) { //Aspect ratio handling
    $variables['aspect_ratio'] = $variables['field_aspect_ratio'][0]['value'];
  } else {
  $variables['aspect_ratio'] = 'normal';
  }

and set a variable called ‘aspect_ratio” which we apply as a class to the div wrapping the video in the node-multimedia.tpl.php:

<div id="containing-block">
<div id="video-wrapper" class="<?php print $aspect_ratio;?>">
<div>
     < ?php print l('<img src="/'.path_to_theme().'/images/ccpa-button-play-large.png" alt="Play this video" />', $field_file[0]['filepath'], $options = array('html' => TRUE, 'attributes' => array('id' => 'multimedia', 'class' => $multimedia_type))); ?></div>
</div>
</div>

We have also created image cache presets for the placeholder images to account for both aspect ratios. These are named ‘multimedia_normal’ and ‘multimedia_widescreen’ and these have the appropriate dimensions associated with them:

Image Cache Presets

So using the amazing article on A List Apart for creating intrinsic ratios for video we use CSS to resize the player based on the aspect ratio chosen by the user.

style.css file

/* -- Multimedia -- */
#containing-block {
  width: 100%;
}
 
#video-wrapper {
  position: relative;
  padding-top: 25px;
  height: 0;
}
 
  #video-wrapper div,
  #video-wrapper embed,
  #video-wrapper object {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
 
  #video-wrapper.normal {
    padding-bottom: 75%;
  }
 
  #video-wrapper.widescreen {
    padding-bottom: 56.25%;
  }
 
  * html #video-wrapper {
    margin-bottom: 45px;
    margin-bot\tom: 0;
  }
 
#video-wrapper #multimedia.audio {
  display:block;
  height:100%;
  margin:1em 0 0 0;
  text-align: center;
  width:100%;
}
 
#video-wrapper #multimedia {
  display:block;
}
 
  #video-wrapper.normal #multimedia img {
    /*margin:118.5px 0 0;*/
    margin:32% 42%;
  }
 
  #video-wrapper.widescreen #multimedia img {
    margin:22% 41%;
  }

And the end result looks something like this http://www.policyalternatives.ca/multimedia/matthew-poverty-and-looking-after-each-other-tough-times. They haven’t added any widescreen content yet, just testing content.

So what are the advantages of doing things this way?

1. You can easily use any player to play your flash files (all you need to do  is change the path to your player and a few configuration params in multimedia.js)
2. All your video content is hosted on and delivered from Amazon S3. But there is also a copy on your local server in the event of something going wrong on Amazon S3
3. You don’t have to worry about your video looking skewed due to aspect ratio problems
4. You can add many other apsect ratios pretty quickly
5. The video file is still downloadable when javascript is not present or disabled

I’d love to get feedback on how other do this, please leave a comment or send me an email and let me know how you deliver Video content on your site.

We are very proud to unveil a project we’ve been working on for several months now: a redesign of policyalternatives.ca, the online home of the Canadian Centre for Policy Alternatives. Canada’s leading progressive research institute, the CCPA is a prolific publisher of reports and studies, books, articles, commentary and fact sheets on issues ranging from income equality to environmental policy, privatization of public services, and beyond.

They are highly respected, but like many organizations working towards policy change, they don’t always reach as broad an audience as they might hope; not many people have the time and inclination to read an in-depth research report, so in recent years they have been creating more bite-sized, easy-to-digest content in both written and multimedia formats. As the range of content has grown, though, so has the need to cross-reference related materials — so the CCPA’s website needed to both invite visitors to browse through an extensive library in an intuitive and approachable way, but also allow people seeking more in-depth content to locate related materials quickly and easily. (One of our developers describes the complex interrelationships between the CCPA’s publications as “like Facebook for documents.”)

Their five year-old website, although rich in content and highly trafficked, didn’t offer visitors any way to easily share the CCPA’s content with their social networks, whether through Facebook or Twitter, or even through their own publications, blogs or presentations. Exchange of ideas is the CCPA’s raison d’etre, so it stands to reason that above and beyond extending the website’s “share this” features, the organization would benefit from encouraging online visitors to use and share its content — and they do, using a Creative Commons license.

This project was a complex one on several fronts, as we wrestled with improving navigation through the site (both via menus and site links as well as with improved search tools); updating the site’s look and feel; and migrating the extensive site content (along with the aforementioned relationships between content items) from a commercial CMS platform into Drupal.

Oh, and we also set up a shopping cart (for books, memberships, donations and journal subscriptions).

There’s a real sense of accomplishment here at Raised Eyebrow when we look at the final result, but of course on the web, there’s no such thing as a final edit. Our best hope, in fact, is that we’ve helped to create a solid platform upon which the CCPA can continue to build and extend over the coming years. So while right now we are celebrating the grand opening, the real fun in some ways is still to come. I’m sure we’ll see the CCPA continue to play a leadership role when it comes to presenting research online in accessible and innovative ways.

The past few weeks have been quiet here on our blog, and as often happens, that silence has been an indicator of just how busy things have been here at Raised Eyebrow headquarters. We’ve been putting the final touches on some exciting new websites that we’re very proud to share with the world. Two major redesigns have just launched – one for a wonderful nonprofit group here in British Columbia and the other for a foundation that’s changing the face of lung cancer research across the United States.

The Deaf Children’s Society of BC offers programs, support and resources for families of young children with hearing challenges that range from parent groups for new parents of deaf or hard of hearing infants, preschool and summer programs for young kids, to a library and bookstore where families can access print resources. Their small staff includes several speech-language pathologists and sign language instructors, and they came to us looking to extend the reach of the services they are able to offer through the web. We helped them extend their resources online through the use of instructional videos for new parents to learn sign language that can then be used with their children as they develop language and reading skills.

The new website is a clean but cheerful home for their fun, informative, instructional videos as well as detailed information about the society’s programs and services. Parents can learn sign language in child-sized portions – with signs grouped in themes like animals, colours, numbers, and of course the alphabet, which they can then use to help their young children with developing language skills.

Uniting Against Lung Cancer is a nonprofit foundation that formed in 2001 as Joan’s Legacy, in honour of 47 year-old New Yorker Joan Scarangello McNeive, who never smoked, but died after a valiant battle with lung cancer. Her family and friends rallied and established the foundation to fund research and raise awareness about the disease; over the years it has attracted partnerships with other family foundations, and now Uniting Against Lung Cancer serves as a connector for groups across the United States who are raising awareness and funds. To date, the foundation and its partners have awarded over $6 million in direct research grants in 20 different states.

We worked with Uniting’s staff and board to develop and implement a transition strategy for their online presence, as they re-branded from Joan’s Legacy to Uniting Against Lung Cancer. The new website better reflects the scope and reach of the foundation’s work, and showcases their mission, partners, and events in a design that evokes a deep breath of fresh air on a sunny day.

On a technical note: Both sites run on Drupal’s open-source CMS platform, which gives them a strong foundation on which to develop future site enhancements – something that’s increasingly top-of-mind for our clients. We’re finding that more of our clients are looking at an iterative approach to making site adjustments, and even after a major redesign such as these ones, there are often “wish list” items that we can add to a site over time. We find Drupal provides a robust framework that allows this iterative approach to work well.

Between my personal background in — and passion for — music, and the fact that many of our nonprofit clients hail from the arts sector, I try to keep an eye on how arts groups are using social media to achieve their missions. In particular, lately I’ve been looking around on Twitter to see which Vancouver arts groups are doing interesting things in the Twitterverse. I’m excited to see how many organizations are reaching out to new and existing audiences via Twitter, and I thought it might be of interest to some readers to hear about some Vancouver arts organizations who are doing a lot with 140 characters.

My focus tends to skew towards music, and classical music in particular, so you’ll definitely notice that bias here. I’ve also tried to limit the list to groups who are twittering actively, and conversing rather than simply broadcasting one-way announcements.

• Chan Centre for the Performing Arts at UBC*: Rachel Lowry at the Chan is doing a fantastic job of highlighting all kinds of interesting arts news, as well as sharing information about their upcoming events.
• Many of the big performing arts groups in town are making good use of Twitter, including the Vancouver Symphony Orchestra, and The Arts Club. But the leader of the pack may be Ling Chan at Vancouver Opera, who has been doing a bang-up job of extending the opera company’s reach beyond the usual classical-music suspects. The opera’s Twitter feed features fun & interesting opera news, as well as exclusive offers for Vancouver Opera fans. In related social media news, the organization has been reaching out to bloggers as well, through their innovative Blogger Night at the Opera.
• World-renowned men’s choir Chor Leoni* has a great feed, which I believed is managed by arts marketer extraordinaire Bruce Hoffman. My favourite recent tweet from them pointed to a video of Bobby McFerrin leading the World Science Festival audience through a fascinating musical exercise.
  
• Pacific Cinematheque offers a delightful twist on the self-promotional announcement: each time they mention a film they’re screening, they include a quote from the script. (A recent example: “‘You’re wearing the wrong shade of lipstick, Mister.’ THE BLUE DAHLIA 9:20pm”.)
• Saturday Afternoon at the Opera, the CBC’s weekly opera show hosted by Bill Richardson (one of my all-time favourite Vancouverites), is relatively new to Twitter, but already making a splash with their contests to summarize opera plots in 140 characters.
• musica intima*, the a cappella (and conductorless) vocal ensemble with whom I used to sing, has a lively Twitter feed (though it seems to be on summer hiatus) written by two staff members and one of the group’s twelve singers. I particularly enjoyed the updates they posted while the group was on tour.
• The Dance Centre’s Twitter feed covers all things dance-related. I love that they write about everything from serious dance news to the latest episode of So You Think You Can Dance.
• For a couple of great examples of how festivals (whose “seasons” are short-lived by nature), check out the Vancouver Folk Fest, Vancouver Jazz Fest, and DOXA feeds.
• Pacific Baroque Orchestra is another Twitter newbie, but they’re posting actively about baroque & classical-era music and joining in the conversation.
• Finally, one of my favourite Twitter feeds comes from the Vancouver Public Library. They keep me up to date on everything from special collections I may not have heard about, to author readings, to branch closures. And they’re fun and funny.

Who have I missed? I’d love to hear of other examples. Please leave your suggestions in the comments.

(* = Raised Eyebrow clients)

We’re delighted to announce that the BC Centre for Disease Control has launched their new website. The BCCDC provides a wide range of services for British Columbians that extend far beyond the “hazmat” image many people have when they think about disease control. They offer STI testing clinics that are open to the public, critical information about diseases and conditions from Anthrax to Zoster, and leading-edge research and statistics on a remarkable breadth of topics.

The new website takes an enormous amount of information and makes it remarkably accessible and easy to navigate; and although we would love to take credit for that, it was Analytic Design Group who provided information architecture consulting on this project — and they did a fabulous job indeed. We provided the graphic design for the new site, which needs to balance the BCCDC’s position as a source of authoritative scientific information with its role in public outreach. Our design approach was therefore guided by the client’s vision of helping to make British Columbia the healthiest place on earth; you won’t see any glaring red or other “emergency” symbols (although we did work in a space for emergency alerts that can appear across the entire site at a moment’s notice), but rather a warm, welcoming, and accessible look and feel that reflects the BCCDC’s collaborative approach to public health.

We would also be remiss if we didn’t credit the technical team at the Provincial Health Services Authority, who really outdid themselves on this particular project. This was a major team effort and we are grateful to have played our part!

The website we designed for Pivot Legal LLP has been entered in the PopVox Awards.

The PopVox Awards, if you don’t know, are people’s choice awards given out during Vancouver Digital Media Week in May. The Pivot site, which we’re very thrilled with, has been entered in the Best Website Category (naturally). You can vote for it here, though I warn you the site’s interface isn’t super easy to get around. Winning this award would obviously be great for Raised Eyebrow, but also wonderful for raising profile for Pivot. So, please go vote and tell a friend!

Slate has a great article up on “The 10 cunning ways public radio stations convince you to give them money” — as I was reading it (and listening to the fabulous audio clips that accompany the article), I reflected on how many of these same smart fundraising techniques apply to good causes everywhere.

Personally, I am a big fan (and longtime supporter) of KEXP, the Seattle-based radio station that also delivers their exceptional music programming online, and one of the things I have always admired about them is their sheer genius when it comes to fundraising. (They’re in the middle of pledge week right now, as a matter of fact, should you feel inclined to give to a great cause.) One year during pledge drive they accepted bids on seemingly random items scattered around the station, so that for, say, $500 (I can’t remember the actual amount), you could get your name on the front of the coffee machine, where staffers would grab a cup of joe. For $1000, you might get your name on a microphone that’s used every day for in-studio performances by some of the best musicians in the world. And so on. The intimacy and immediacy of the items one could sponsor made them incredibly appealing to listeners like me. (I still want my name on that coffee machine.)

I think of all the techniques described in the Slate article, the one that’s most effective at getting my credit card out is this one:

8. Niche marketing

The best of public radio’s weekend shows have distinct personalities: the discursive storytelling of This American Life, the self-deprecating bickering of Car Talk, and the cozy in-jokes of A Prairie Home Companion. All these shows produce special pledge editions, pitching in their signature styles. Ira Glass clearly missed his calling in sales; he is a master of the “ask.” He appeals to his people in their native tongue, sarcasm, calling on them to show their love for the show rather than the station it happens to be playing on: “There is one sure way that you can send a signal to this radio station that you like this program, and that you want them to continue running this program, and that is to call right now. …. Not later, not in an hour, during that other show that comes after us.”

I want to be made to feel special — to feel like I belong to a community of people with whom I share certain common interests and values. If you can make me feel understood and valued, then you will gain my loyalty, and with my loyalty comes a much greater willingness to part with my hard-earned cash.

And you know what didn’t make the list? Fearmongering. (Yes, they did include guilt-tripping, because where would fundraisers be without the ability to tug on heartstrings?) I, for one, would really love it if I never received another fundraising letter that implied the world was on the brink of destruction and that only my dollars could save us from apocalypse, whether the end of the world was coming in the shape of environmental, cultural, or social degradation. I am rarely motivated to action by doom-and-gloom scenarios; what does motivate me is a clearly articulated vision of a better world that I want to live in — even if it’s just a world where The Pixies still get played on the radio every day.

As Melanie mentioned, we just launched a site for Pivot Legal, and a successful launch it was too. I thought I’d take a moment to give a quick breakdown of some of the tricks and wizardry we incorporated on that site.

Valid Code

For starters, we succeeded in getting most of the site to be valid XHTML, of course with Drupal there are parts where client content entry will cause some warnings and Drupals own internals will also do the same, but most of the pages on this site, within our control, are valid.

Lawyer Blogs, Resources and Events

This was the first site that we have implemented multi user blogging and user content categorization, so it was a learning experience for us. Each lawyer has their own page, in this case, that page is the default user profile page. However it’s not just your ordinary user profile page, it’s a themed user profile page. To allow us to theme this page we simply called the following function in template.php

/**
* Catch the theme_profile_profile function, and redirect through the template api
*/
function phptemplate_user_profile($account, $fields) {
	return _phptemplate_callback('user_profile', array('account'=>$account, 'fields'=>$fields));
}

Then create a template file called user_profile.tpl.php, here’s a snippet from that file:

$lawyer_profile = '<div id="lawyer_profile">'. chr(10)
   .'<h2>'. $account->profile_fullname .'</h2>'. chr(10)
   .'<h3>'. $area_of_law .'</h3>'. chr(10)
   .'<p>'. $account->profile_biography .'</p>'. chr(10)
   .'</div>'. chr(10);
// Photo, if any:
  if ($account->picture) {
    $lawyer_photo = theme('image', 	$account->picture, $account->profile_fullname .'\'s photo', $account->profile_fullname);
  }

The Blog, Resource and Events blocks on the lawyer page are simply View blocks that have the username as an argument. To achieve this we used the Usernode module to convert user profiles to nodes so that we could use their properties in views. I believe Views 2 in Drupal 6 will handle all this without the need to this module.

Username funkiness

As there are lots of users creating lots of content Drupal spits out their username attached to the piece of content (e.g “Posted by colin on Feb 26, 2009″). However on this site we wanted to show their full name and link that back to their profile page, again a simple theming function achieved this

function custom_theme_username($object) {
  if ($object->uid && $object->name) {
    // Load user so that we can get the full profile name instead of the short username
    $user = user_load(array('uid' =>$object->uid));
    $name = $user->profile_fullname;
    // If it's the "Pivot Legal LLP" user, go to the 'about-us/' page instead:
    $path = ($name != 'Pivot Legal LLP' ? 'user/'. $object->uid : 'about-us/');
 
    if (user_access('access user profiles')) {
      $output = l($name, $path, array('title' => t('View user profile.')));
    }
    else {
      $output = check_plain($name);
    }
  }
  else if ($object->name) {
    // Sometimes modules display content composed by people who are
    // not registered members of the site (e.g. mailing list or news
    // aggregator modules). This clause enables modules to display
    // the true author of the content.
    if ($object->homepage) {
      $output = l($object->name, $object->homepage);
    }
    else {
      $output = check_plain($object->name);
    }
    $output .= ' ('. t('not verified') .')';
  }
  else {
    $output = variable_get('anonymous', t('Anonymous'));
  }
  return $output;
}

Searching

It was a requirement to have a searchable directory of free legal resources on this site. We built this using a content type and Views, along with the Views Fast Search module. This allows you to create a view which acts like a search but uses view Filters to restrict the search. Robert Douglass, one of the famed Lullabots has written a great tutorial on how to set it up.

How did you get the search box on the home page?

This is pretty easy. Go ahead and create your Fast Search that we mentioned above. Then create a block and paste the following code into the body of the block, making sure to include the php tags and to set the input format to PHP:

  < ?php
  // Get the view
  $view = views_get_view('directory_search');
  // Get the filters ( in this case the search box) - this is returned as a form
  $form = drupal_retrieve_form('views_filters', $view);
  // When you submit the form make sure we go to the view page
  $form['#action'] = url($view->url);
  // Set your form up correctly in drupal
  drupal_process_form('views_filters', $form);
  // Spit the form out to screen
  return drupal_render_form('views_filters', $form);
  ?>

Of course this method can be applied to any view filters.

Views, views and more views

The rest of the site is mostly views and view blocks with some serious argument handling. The rotating images on the homepage are achieved using a simple content type for the image and then using a view to randomly load one of those pieces of content.

If you have any questions about any of the other functionality on the site or on anything I’ve menitoned above please feel free to post a comment.

We are very pleased to announce that Pivot Legal LLP has a brand new website, just launched today. If you don’t know anything about Pivot Legal LLP then you can start with their tagline: a different kind of lawyer, a different kind of law firm. Having worked with the lovely people at Pivot for the last few months I can confirm that they are indeed a different kind of law firm.

If you follow Vancouver news at all then you’ve probably heard about Pivot Legal Society, they do a lot of advocacy work and have been in the news from time to time, connected with issues and projects related to the Downtown Eastside. Pivot Legal LLP, a full service law firm, grew from the Society and 100% of the profits of the LLP go to the Society. Have you ever heard of a law firm that donates 100% of their profits? (For the full story, check out John’s blog post: How Pivot Legal got started.)

One of the other things that sets Pivot apart is their personal nature, which I think helps diffuse the mystery (and misconceptions) about Law and Lawyers. You can read through the bios of each of Pivot’s Lawyers and they are blogging, holding their own Events and contributing a wealth of knowledge through the Legal Resources section of the site. The website even has a Directory of Free Legal Services site visitors can search through.

This has been such a great project to work on and is a true example of the collaborative way in which we work together here at Raised Eyebrow. From the conceptualizing and planning phases though to the design and development phases we’ve all been involved with this site – and we’re adding it to the ever growing roster of sites that we’re quite proud to have worked on.

It’s been a busy year at the Raised Eyebrow HQ. To date we have worked on more than 30 different website projects and we’ve got a few more in the works. For some projects we designed, built and launched an entire website and for others we worked on the design and handed development over to someone else. Overall the projects were as varied as our clients.

We dabbled a little in the political arena and built the JustShutUpBC website. We also worked on the nomination site for Gregor Robertson (which has since been taken offline) and we built websites for Geoff Meggs and Heather Deal. Gregor, Geoff and Heather all won in the recent civic election which can only mean that having a site done by Raised Eyebrow is sort of like a good luck charm when it comes to election time ;-)

Ofcourse the big political website we worked on in ‘08 was for the BC NDP.

We also had a chance to work with a collection of musical clients. The Vancouver Recital Society got an updated look for their new season. The Vancouver Welsh Men’s Choir got a whole new site that allows site visitors to listen to their music, buy tickets to their shows and purchase their CDs online. The Chan Centre’s website was moved into Drupal and they were also given a new look for their new season.

This year we had a contingent of clients on the Educational side of things:

• The Federation of Post Secondary Educators got an updated look and we also helped reorganize their site when it was moved into Drupal.
• The BC Teachers of English Language Arts got a snazzy new site which has a really great Resource section and a dynamic Conference area.
• Economics for Everyone is primarily a book but we got to build the book’s online companion which houses further resources for educators, unionists, activists and anyone else interested in modern day capitalism.

As well we got to work on a few sites for people who do really great work to try to make this world a bit better for everyone:

• Covenant House Vancouver: an incredible organization dedicated to helping homeless youth.
• ThinkCity: they help to empower citizens to realize their dreams of having the city they want to live in.
• Citizens for Public Power: an advocacy organization working to keep the province’s power generation system in public hands.
• The Columbia Institute: they work to foster individual and organizational leadership to help nurture sustainable communities.
• Shareholder Association for Research and Education: a social enterprise that works to coordinate and implement responsible investment practices.

It’s been an absolute pleasure to work with such great clients who are doing such awesome work themselves.

We also got to launch a pet project that was waiting in the wings for some time: the RE Blog.

It’s been a fantastic – and productive – year at Raised Eyebrow. Happy Holidays everyone! All the very best to you in ‘09.