NetSquared Camp is an unconference, and for those who aren’t familiar with that term, it’s an event where the agenda is entirely driven by the participants. So if you show up and speak up, there’s a very good chance that you’ll learn something that’s relevant to you. (You may also end up teaching others, since the participants also lead & facilitate the sessions.)

The list of suggested session topics is both wide-ranging and highly practical, and the organizers have set up a wiki where you can propose your own session ideas.

Perhaps best of all, the ticket price is by donation, with the suggested donation a very affordable $20. By the look of the RSVP list, interest is high, and as with all unconferences, the event’s success will depend entirely on who shows up — so please mark the date in your calendar and spread the word.

Here at Raised Eyebrow we’re very passionate about sharing what we know and building capacity within the nonprofit sector, so we’re very pleased to be a sponsor of NetSquared Camp Vancouver 2010. I’m looking forward to seeing how the agenda evolves.

Information about the program and the one page application form are available on the Ministry website: http://www.aved.gov.bc.ca/workplace_training_program/welcome.htm

In brief the eligibility requirements are:

• Business or organization (non-profit organizations are eligible) with less than 50 employees (this number would not include volunteers).
• Been operating for more than a year.
• Apply the funding to training which will “help improve productivity” and/or “support the introduction of new equipment, technology or work process”. Your new CMS should be eligible as a new technology which will also help improve productivity.
• You must have not already applied for the grant.

The grant offers:

• Up to $1,500 per employee for training costs
• An organizational maximum of $5,000

Please note that training for Owners is not eligible for the grant, however, we have been unable to ascertain whether or not Executive Directors are excluded (there is no language that says so, and the Ministry has been slow to respond).

The program is in place until January 31, 2011.

Please note, this is a one time grant so if you feel there is other training to which you could better apply this grant, then we would advise you to not apply for the grant for your website training.

Of course Raised Eyebrow can not guarantee that your funding will be approved, but the training we provide to our clients as a part of a website redesign or a new development project does fit into the criteria of the program. We are in no way affiliated with this program, we simply want to make our clients aware of it as we are conscious of the limited resources that many of our clients operate under.

More information:

• Download the One Page Application Form (PDF)
• Questions and Answers on the Ministry website (PDF)

This is a position for someone with solid technical skills — someone who can rock HTML and CSS, who prides themselves on attention to detail and clean, elegant code. You’ll be turning design comps into themes for Drupal and WordPress sites, so experience with one (or both) of those CMS’s is preferred, but if you’re confident in your coding skills and are new to Drupal & WordPress, don’t let that stop you.

Because we’re a small shop, everyone here tends to wear a few hats, so we’re looking for someone with smarts, adaptability and a serious appetite for learning. We pride ourselves on the quality of our work, our efficiency, and our passion for our clients — and we’re looking for someone whose shares those values.

In our beautiful, heritage Gastown office, you’ll find a friendly team of experts, a ridiculously well-stocked tea cabinet, and abundant opportunities to work on projects that allow you to flex your technical muscles and bring your heart and ideals to work.

Sound like a fit for you (or someone you know)? The job description, with details on how to apply, is right here.

So, where do you turn if your needs are relatively straightforward and your budget is limited? I would recommend one of the following tools:

Picnik

Picnik is a powerful online application that allows you to upload & edit images on the fly. There is a free version but the options are rather limited; however, it might do the trick for what your client needs. The premium version starts at $2.08/month. Picnik even integrates with Flickr, Picasa & Facebook, so if your client uses those tools that might come in handy. I find it a little slow, compared to Photoshop (mostly because of the time required to upload & download files), but it’s a very good tool for people with no/little budget.

Photoshop Elements

This is a stripped-down version of Photoshop that’s perfect for what most of our clients need, which is basic photo & image editing tools for web use. It’s under $100 and provides a good chunk of the core Photoshop functionality — in some ways I would recommend it over Photoshop for basic-level users, because with fewer options it’s less confusing.

Photoshop.com

Adobe’s answer to Picnik is an online editing toolset that you can use for free; the only limitation is file storage. The free accounts comes with 2 GB of storage space for your files, and beyond that you pay an annual subscription fee that varies (anywhere from $20-$500 USD) based on the amount of storage you need.

What is CKAN?

CKAN is a registry or catalogue system for datasets or other “knowledge” resources. CKAN aims to make it easy to find, share and reuse open content and data, especially in ways that are machine automatable.

CKAN is a nice big database that is built to accept user input of the type of data we’re trying to collect for datadotgc.ca. It has a slick front and back end that allows administrative access to the collected data.
You can find out more on their website.

CKAN’s API

In order to utilize the power of CKAN I needed to link it up to Drupal. CKAN has a powerful and flexible API that I used extensively in the module.

The Foundation

Early on in the project I got in touch with the wonderful team at CKAN and they then put me in touch with Sean Burlington from the data.gov.uk development team. They had also built their site in Drupal and Seán had lots of information on how they tweaked their CKAN site to work with Drupal. He worked hard to open source some of the work that they had done, and released it just in time for us to get started. Seáns module provided the basic API connectivity we needed to get started and was the foundation for our module.

The Build

How do you integrate Drupal with the CKAN API? Let’s start with the basics:

CKAN stores the individual datasets that you see on Datadotgc.ca as ‘Packages‘. It became clear that these ‘Packages’ could be directly mapped to the standard node architecture in Drupal. To achieve this I created a content type in the module that stored all the data I needed.

/**
 * Define module-provided node types.
 */
function ckan_node_info() {
  return array(
  'ckan' => array(
    'name'           => t('CKAN Package'),
    'module'         => 'ckan',
    'description'    => t('A package of Open Data.'),
    'has_title'      => TRUE,
    'title_label'    => t('Title'),
    'has_body'       => TRUE,
    'body_label'     => t('Package Description'),
    'min_word_count' => 0,
    'locked'         => TRUE
    )
  );
}
 
function ckan_create_node($ckan_data) {
  $node = array(
    'title'   => $ckan_data->title,
    'uid'     => 1,
    'body'    => $ckan_data->name,
    'promote' => 1,
    'path'    => 'dataset/' . $ckan_data->name,
    'type'    => 'ckan',
    'comment' => 2,
  );
}

As you can see from the code, the only data elements to be set when a node is created are Title, Body and Path. The body of the node is set to be the name of the CKAN package, which is in fact a simple string: geogratisnat_hydrography_v100.

The more complex CKAN data was not mapped to any CCK fields as you might think, but instead it is pulled from CKAN when the node is loaded. This simplifies the Drupal side of things by ensuring that we don’t have to keep track of any changes to the structure or contents of the dataset that may happen on the CKAN side.

Here is an example of some package data:

[maintainer] => Government of Canada, Natural Resources Canada, Centre for Topographic Information (Sherbrooke)
[name] => 1996_population_census_data_canada
[author] => Government of Canada, Natural Resources Canada, Canada Centre for Remote Sensing, GeoAccess Division, The Atlas of Canada
[url] => ftp://ftp.geogratis.gc.ca/atlas/Population_Ecumene_Census/1996/
[notes] => The parts of Canada making up the 1996 Settled Area, (or Population Ecumene), represents a selection of the 5984 Census Subdivisions (CSD) as defined by Statistics Canada for the 1996 Census. The selection process essentially removes those CSDs with very large areas and/or very low populations. Some of British Columbia's CSD boundaries have been further modified to better conform to the distinctive settlement patterns in the Cordilleran regions. The 1996 Settled Area is an attempt to balance the needs of national scale choropleth mapping with the spatial reality that the majority of Canada's land area contains very few people. The Settled Area represents more than 98% of the Canadian population captured in the 1996 Census of Canada.
[title] => 1996 Population (Ecumene) Census Data, Canada
[download_url] => ftp://ftp.geogratis.gc.ca/atlas/Population_Ecumene_Census/1996/1996.zip

When a node is loaded, the package data is pulled from CKAN and then cached for later use.

/**
 * Load node-type-specific information
 */
function ckan_load($node){
  $ckan = ckan_ckan();
  if(($cache = cache_get('ckan:'. $node->body, 'cache_ckan')) && !empty($cache->data)) {
    // Get the cached data
    $node->ckan = $cache->data;
  } else {
    try {
      // Call the API to get the package data
      $node->ckan = $ckan->getPackage($node->body);
    } catch (Exception $e){
      drupal_set_message($e->getMessage(), 'error');
    }
    // Cache this package data for later use
    cache_set('ckan:'. $node->body, $node->ckan, 'cache_ckan');	
    watchdog('ckan', 'Called CKAN API for '.$node->body.' package - ckan_load()');
  }
  return $node;
}

Once the CKAN data has been added to the node object it’s relatively easy to output this data in a node template. I created a template file in my theme called node_ckan.tpl.php and here’s an example of how I displayed some of the CKAN package data in there:

< ?php if ($title): ?>
 <h1 id="page-title" class="title tk-museo-slab">< ?php print $title; ?></h1>
< ?php endif; ?>
 
< ?php if ($ckan->name): ?>
  <div class="package-name">(< ?php print $ckan->name; ?>)</div>
< ?php endif; ?>
 
< ?php if ($ckan->url): ?>
 <div class="package-link">< ?php print l($ckan->url, $ckan->url, $options = array('attributes' => array('class' => 'link'))); ?></div>
< ?php endif; ?>

You can see from all of the above examples I’m using a class object called “ckan” to store our data. This came from Sean’s module and is a simple class that provides the connectivity to the CKAN API. Here’s a brief synopsis of how it works:

1. First I need a way to connect to the API. That’s relatively straightforward using the curl libraries in php.
   ^?View Code PHP

   $ch = curl_init($this->url . $url); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); curl_setopt($ch, CURLOPT_HEADER, 0); curl_setopt($ch, CURLOPT_TIMEOUT, 30); $result = curl_exec($ch); $info = curl_getinfo($ch); curl_close($ch);

2. Now create some functions that allow various parts of the API to be called. Below is an example of two class functions which call the API.
   ^?View Code PHP

   // Get an individual package public function getPackage($package) { $package = $this->transfer('api/rest/package/' . urlencode($package)); if (!$package->name){ throw new CkanException("Package Load Error"); } return $package; }   // Get a list of all packages public function getPackageList(){ $list = $this->transfer('api/rest/package/'); if (!is_array($list)){ throw new CkanException("Package List Error"); } return $list; }

All of these API calls return a JSON object which is then decoded into an object using the PHP function:

json_decode($results);

Theming

Once that data has been successfully retrieved and decoded from JSON into something that’s easier to handle, it needs to be themed. For this I created two theming functions; one for creating an individual list item, the other to create a formatted list of these individual items. I call the theme function whenever I get results from the API, and pass it the results, along with the title I want to appear on the listings page.

// Theme the results retrieved from API call
theme('ckan_results', $results, 'All Packages');
 
/**
 * Theme search results
 */
function theme_ckan_results($results, $title = '') {
  // Two global variables needed by the pager.
  // Taken from pager_query() in pager.inc
  global $pager_page_array, $pager_total;
 
  $output = '';
 
  // Grab the 'page' query parameter.
  // Taken from pager_query() in pager.inc
  $page = isset($_GET['page']) ? $_GET['page'] : '';
 
  // Convert comma-separated $page to an array, used by other functions.
  // Taken from pager_query() in pager.inc
  $pager_page_array = explode(',', $page);
 
  // Generate the data for page the requested and add it to the output.
  $items_per_page = variable_get('ckan_items_per_page', 4);
  // If there are less results than the specified number of items per page, reset the number of items per page
  if($results->count < $items_per_page) { $items_per_page = $results->count; }
 
  // Initialize pager
  $start = 0;
  // If it's not the first page
  if($page) {
    // Set the data to start displaying on the correct page
    $start = $page * $items_per_page;
  }
 
   if($title) {
     $output = '<h1 id="page-title">'.$title.'</h1>';
   }
 
  $output .= '<h3 class="resultscount">Your search returned '.$results->count .' records</h3>';
 
  // Theme the individual results
  for ($i = 0; $i < $items_per_page; $i++) {
      $output .=  theme('ckan_item', $results->results[$i]);
  }
 
  // Put some magic in the two global variables
  // Based on code in pager_query() in pager.inc
  $total_results = $results->count;
  $pager_total[0] = ceil($total_results / $items_per_page); //ckan_number_of_pages();
  $pager_page_array[0] =
    max(0, min(
      (int)$pager_page_array[0],
      ((int)$pager_total[0]) - 1)
    );
 
  // Add the pager to the output.
  $output .= theme('pager', NULL, $items_per_page, 0);
 
  return $output;
}
 
/**
 * Theme individual search items
 */
function theme_ckan_item($item) {
  // Link the title to the dataset
  $output .= '<h2>' . l($item->title, 'dataset/' . urlencode(check_plain($item->name))) . '</h2>';
  // Truncate the notes field
  if($item->notes) {
    $output .= '<p>' . truncate_utf8($item->notes, 250, $wordsafe = FALSE, $dots = TRUE) . '</p>';
  }
  // Output any tags	
  if(count($item->tags) > 0) {
    foreach($item->tags as $key => $value) {
      $items[] = l($value, 'data/tag/'.$value);
    }
  $seperated = implode(', ', $items);
  $output .= '<p><strong>Tags:</strong> ' .$seperated. '</p>';
  }	
return $output;
}

One thing you need to consider when displaying a list of results is having a pager built in so that you can break the list into bite-sized chunks. This took quite a while to figure out how to do. The problem was that the API call resulted in a lot of data and that resulted in a significant delay loading the page, due to the amount of time to complete the round trip to the API, along with the time taken to render all of that in a pager. CKAN however is very clever. When you call the API and ask for a list of packages, it returns the packages, but it also returns, as a variable, the count of the records your query generated. As well as that you can use the parameters ‘offset‘ and ‘limit‘ just like in SQL. What’s even more clever here is that it still returns the variable that holds the count of the records the query generated, but it also only returns the number of packages determined by the ‘offset‘ and ‘limit‘ parameters.

So if an API call to list all packages for a certain tag would normally return 200 records, and you specify a limit of 10 and an offset of 10, the data returned will contain a count of the number of records normally generated by that call, 200, but will only return 10 packages in the data, as specified by the offset and limit. This came in extremely useful for the pager as I just passed an offset and limit each time a page was loaded and then cached the returned data.

$ckan = ckan_ckan();
$start = 0;
$items_per_page = variable_get('ckan_items_per_page', 4);
if($page) {
  // If we're in a page, we need to set where to start the list
  $start = $page * $items_per_page;
}
 
// Set the offset
$offset = $start;
// Limit to the number of items per page 
$limit = $items_per_page;
 
// Get the list of tags with their count
try {
  $results = $ckan->advancedSearch(array('department' => $ministry, 'all_fields' => '1', 'offset' => $offset, 'limit' => $limit));
} catch (Exception $e){
  drupal_goto(variable_get('ckan_no_results_page', 'sorry'));
}

Homepage Chart

There was a requirement for a graph on the homepage the displayed the number of packages attributed to each Government Ministry. The quickest way to do this was using Google Chart Tools. It was relatively straightforward to get the data we needed. I did however have to do some funky sorting to get the data in the correct order. I also found a wonderful tutorial that really helped to clear up some of the label/legend issues I was having.

/**
 * Function to build a Google Chart
 *
 * @return	  string	HTML code with img tag
 *
 **/
function ckan_chart() {
  // If there is a cached version of the chart
  if(($cache = cache_get('ckan:chart', 'cache_ckan')) && !empty($cache->data)) {
    $image = $cache->data;
  } else {
    watchdog('ckan', 'Called Google API to build chart');
    // Get the list of ministries
    $ministries = explode("\r\n", filter_xss(variable_get('ckan_ministry_list', '')));
    // Set up our data array
    $data = array();
    foreach($ministries as $ministry) {
      $ckan = ckan_ckan();
      // Get the list of tags with their count
      try {
        $results = $ckan->advancedSearch(array('department' => $ministry, 'all_fields' => '0', 'offset' => '0', 'limit' => '1'));
        $count = $results->count;
      } catch (Exception $e){
        $count = 0;
      }
      // Cache the count to use on the Ministry list page '/ministry'
      cache_set('ckan:ministry_'. $ministry .'_count', $count, 'cache_ckan');
      $chart->data[$ministry. ' ('. $count . ')'] = $count;
    }
    // Sort the array in reverse order - most packages first and maintain index association
    arsort($chart->data);
    // Return all the keys of the data array - the names of the ministries
    $chart->legend = array_keys($chart->data);
    // Get the range of the chart - highest + a quarter
    $range = round(current($chart->data) * 1.25, -1);
    // Grid spacing  100/MaxRange*IntervalAmount
    $grid = 100/$range * 50;
    // Chart size, must be less than 30k pixels
    $chart->size = array(
      '590',
      '380'
    );
 
    // Create query
    $chart->query =
      'cht=bhg&'.	// Type
      'chd=t:'.implode(',', $chart->data).'&'.	// Data
      'chs='.$chart->size[0].'x'. $chart->size[1].'&'.	// Size
      'chco=cc0000&'.	// Color ( Remove # from string )
      'chxt=x,y&'.	// X,Y axis labels
      'chxr=0,0,'.$range.'&'. // Range
      'chxs=1,000000,13|0,000000,13&'. 	// Axis colors and font size
      'chg='.$grid.',0,5,5&'. // Grid verticalgridlines, horizontalgridlines, linesize, gapsize
      'chds=0,'.$range.'&'.	// Scale
      'chma=0,0,0,0&'. //left_margin, right_margin, top_margin, bottom_margin| legend_width, legend_height
      'chbh=13,0,2&'.	// bar_width_or_scale, space_between_bars, space_between_groups
      'chxl=1:|'.implode('|', array_reverse($chart->legend, TRUE)).'&'; //|Jan|Feb|Mar|Apr|May'
 
    $api_path = 'http://chart.apis.google.com/chart?';
    $url = $chart->query;
    $image = sprintf('<img src="%s" alt="%s" style="width:%spx;height:%spx;" />', $api_path.$url, 'Who\'s Sharing', $chart->size[0], $chart->size[1]);
      cache_set('ckan:chart', $image, 'cache_ckan');
  }	
  return $image;
}

So that’s a brief(not-so) overview of some of the fundamentals of how I integrated Drupal with CKAN and was able to create nodes and listings directly from API calls.

In my next post I’ll cover some very important areas of the module development such as:

• Caching
• Tag cloud creation
• Using the CKAN Search API for all lists

When we were planning the session, Leif suggested we use a format I wasn’t familiar with — the Samoan Circle, a modified fishbowl process that encourages listening and made room for many of the attendees to come forward and speak. The chairs in the room were arranged in the round, and we pulled four chairs into the middle of the room, facing each other, so that everyone could see and hear the folks who were talking.

The theme of the session was “Socially Conscious Geek: making money while doing good,” and we provided some framing questions, but we knew that whoever showed up would have their own questions and goals for the discussion, so we tried to move quickly beyond our introductions and dive into the conversation proper.

I’m so glad we did, because as soon as we opened it up to the room, the conversation went in very interesting directions. Some of the themes that emerged were:

• Recruiting challenges for nonprofits: Someone asked how nonprofits can attract staff when the salaries are generally lower than they are in the corporate sector. Some great responses to this question emerged, including:
  • Explore what gets geeks interested, and offer up incentives that matter to them
  • Sell the lifestyle & “sleep better at night” benefits
  • Offer other benefits that provide competitive advantage with corporate positions, e.g. keep work hours reasonable, paid volunteer time, etc.
  • Someone mentioned that in the US, if you work for nonprofit organizations for 10 years after college, your outstanding student loans are forgiven. Given the size of the average student loan these days, that could provide a tangible financial benefit in the tens, or even hundreds of thousands of dollars.
  • Recognize that nonprofits can offer more opportunities for leadership & effecting change within the organization, because nonprofits often have leaner & more democratic structures. (I want to point out that this is definitely not always the case, though I do think it’s a valid point. However, I’ve seen some highly inefficient nonprofit organizations in my time.)
• There was some great discussion of how our definitions of sustainability must include financial sustainability; this is true for both for-profit and not-for-profit organizations. We need to both make money and do good; neither can be sacrificed. Some models put forward for this included:
  • Businesses can build charitable giving into their modus operandi, i.e. give x% of pre-tax profits to a particular cause or organization.
  • Design & tech agencies can offer discounts to nonprofit clients & stay profitable by engaging high-profit corporate clients.
  • Social enterprise models, e.g. nonprofits creating products & services people are willing to pay for.
  • Seed funding from progressive coalitions
• We also heard a number of people ask how we can collaborate better across movements and sectors – there is a real hunger for cross-pollination of ideas and learning from one another’s successes and failures.
• One women shared her story of working at a large, multinational corporation, feeling somewhat discouraged by said corporation’s lack of a formal social responsibility mandate, and responding by starting interest groups within her company. This has had the effect of both raising the profile of various causes, but also concrete changes in the business such as influencing purchasing decisions.
• Someone said they would love to see a crowdsourcing app that could leverage companies’ internal technical skills & resources and connect & share them with nonprofits who need them.

Those were my notes, but there’s plenty more available on Twitter — attendees tweeted their session notes using the hashtag #scgeek.

But this year we’re back, this time with a panel that we hope will prove helpful to geeks of both the design and techie varieties – both camps are in full force at SXSW’s Interactive conference, which is a pure, 24/7, all-out geekfest – who are looking to bring their values into their paid work, whether it’s by learning to work with clients in the nonprofit sector, creating apps that help mission-driven organizations work more effectively, or infusing some environmental or social-justice savvy into their workplaces. The panel’s called “Socially Conscious Geek: Makin’ Money While Doin’ Good”, and it takes place Saturday, March 13^th.

The topic was inspired by a topic our friend Noah Scalin (of Skull-A-Day and Another Limited Rebellion fame) spoke about at the 2009 HOW Conference. His focus was more on graphic design, since that’s his area of expertise, but when I asked him about riffing on his ideas for an interactive design audience, he shared his materials with me with typical generosity. (This is a guy who lives and breathes a DIY, share-and-share-alike mentality that a lot of designers could learn from. But that’s a topic for another day.)

This time I’ll be attending the conference solo, while Emira spends some time with her new baby; my co-facilitator for the session is Leif Utne, a friend and colleague who works for Zanby, a software company that specializes in supporting online social communities for change. Leif’s background includes a stint as the publisher of Worldchanging.org, and lots of experience building online communities; he’s also a journalist, activist and social entrepreneur.  Zanby is used to support The UpTake, a web video community that among other things was heavily involved in documenting the RNC and DNC prior to the 2008 election, and was also engaged in citizen vote monitoring during the election. He brings both amazing facilitation skills as well as a solid understanding of how businesses and nonprofits can work together in mutually beneficial ways.

We’ll be conducting our session in a highly interactive, inclusive format called a Core Conversation: Leif and I will be kick-starting the discussion and planting some seeds, but the idea is that whoever shows up will have a chance to step forward and contribute questions and ideas – so I’m really excited to see how it develops.

We’re hoping to address questions like:

• What is a socially conscious geek?
• How can I specialize in socially conscious work and earn a living wage?
• What are some of the unique opportunities and challenges of specializing in socially conscious work?
• What is the difference between non-profit and no-profit clients?
• How do I make the transition from corporate work to working with non-profit and/or mission-driven clients?
• What is the “triple bottom line” approach to business?
• What are some examples of alternative business models that are emerging among socially conscious geeks?
• How is socially conscious work different than “green” work?
• What are some examples of clients I might be able to work with as a socially conscious geek?
• How should I market myself to values-driven clients? Is it different from marketing to corporate clients?

Ultimately, though, the decisions about what we cover will rest with whoever shows up. So please help us spread the word – and if you’ll be at SXSW, we’d love to see you there!

This isn’t the first time I’ve come across the idea of renaming the nonprofit sector. Tom Suddes makes a compelling case in favour of using “for impact” instead — though personally, I’m not sure that distinguishes this sector from the business & government sectors in any useful way. Surely we all want to make an impact? (That being said, if you ever get to hear him talk about fundraising, do yourself a favour and go — he has some amazing insights and a great deal of charm.)

I’m also not convinced of the “humanity” moniker, because the nonprofit sector includes a lot of organizations that really don’t focus on humanity — there are astronomy educators and environmental justice warriors and all kinds of other groups for whom “humanity” isn’t the emphasis. I’ve heard “third sector” (which feels awkward & low-priority), “non-governmental” (okay, but uninspiring), “community profit” (can’t the community profit from corporate & governmental work as well?), and “public benefit” (see “community profit”) — but none of those work for me either.

Although I love the idea of moving away from “nonprofit,” I’d really like us to find an option that is both broadly inclusive of the wide variety of organizations within the sector, and clearly distinct from the focus of for-profit and governmental actors. Because the key differences that mark nonprofits are legal in nature, perhaps “nonprofit” is the simplest option.

But there is one other suggestion I quite like, with a couple of reservations: “the delta sector,” as proposed by Robert K. Ross in The Chronicle of Philanthropy. Yes, it sounds a bit like a Star Trek reference. But here’s his pitch:

Robert K. Ross, president of the California Endowment, a health foundation in Los Angeles, says he’s got just the word: “delta,” the Greek letter that signifies change. So, no more talk about the “nonprofit sector,” he said at the closing session of the National Conference on Volunteering and Service.

It’s now the “delta sector.”

“We need to be more intentionally about change and transformation,” he said. “Business as usual is leaving too many families broken and too many families and folks with hopelessness and despair.”

I’m not a hundred percent sold on “delta sector” — I’m not sure it works for arts organizations (or many conservative groups that actively resist change), and I’m also not convinced that change is a worthwhile motive in and of itself — but I like the sentiment behind it, and indeed behind all these ideas. It warms my former-English-major heart that so many good people are putting so much brain power towards thinking about the importance of language, and I’d love to see the nonprofit / for impact / humanity / delta sector wrestle with this some more and see if we can’t come up with a better name.

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.

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.