Latest project launched: Yale Journal of International Affairs

yjia-home-screenshotEarlier this week, I launched my latest project: a new website for the Yale Journal of International Affairs.

I’m really excited about how it turned out. The journal, which is run entirely by grad students at Yale, had accidentally lost their old website last year due to some payment mistakes (oops!). So, we built a new one.

The needs of the site were pretty straightforward:

  • Publish news about the organization
  • Maintain a calendar of events
  • Keep an archive of the journal’s issues & articles
  • Make it as easy as possible for the staff to update everything without any technical knowledge

The site was built in Drupal, using CCK (especially the node reference functionality) for the Articles and Issues and using Views to organize the content.

  • The News page is simply a page view which displays the latest News items at the top of the page.
  • The Archive takes advantage of the new “grid” display feature in Views, showing a teaser image and the title of each Issue.
  • The Current Issue page is a full node view of the most recent issue of the journal: this makes it really easy to access the latest issue of the journal at the same page.
  • The homepage is built with views and an assortment of Views-driven blocks (I had originally intended to use Panels to drive the frontpage, but it wasn’t stable yet when I was developing the site).
  • The Events are being displayed from 30boxes. Even though Drupal has modules for making events, 30boxes was an easy way to just pull

The theme was built on top of the Zen theme. It had been a few years since I had used the Zen theme as a starting-point for a Drupal site and it has definitely come a long way since 2005! I was really impressed with how solid the documentation was and, combined with Firebug and MAMP, how easy it was to go from a visual design concept to a live site.

Special thanks to Diana Chu and the folks at YJIA for helping get everything together to launch this.

Take a look at the site, poke around, and let me know what you think!

Yale Journal of International Affairs []

Interactive photo exhibit on the cheap, part 1: Drupal & Podlinez

Victoria Yoa, refugee from Liberia
FUSE is a portrait exhibit of the complex worlds of resettled refugees in the Phoenix metro area.


Victoria Yoa, refugee from Liberia
Victoria Yoa, refugee from Liberia

In April 2008, COAR launched a photo exhibit with artist Eliza Gregory. Titled “FUSE: Portraits of Refugee Households in Metropolitan Phoenix,” the exhibit sought to raise awareness in the community regarding Phoenicians’ newest neighbors. From the summary of the exhibit:

FUSE is a portrait exhibit of the complex worlds of resettled refugees in the Phoenix metro area. It fosters critical thinking on who refugees are and how, through sharing experiences, the Phoenix metro community can seek common ground. The photographs validate the struggles and triumphs of these families, portraying them in a way that cultivates a deeper sense of belonging in the community.

In order to support this effort, I helped put together an integrated system, allowing audience members to engage on a more direct level with the portraits.

Using podcasts of interview clips with the refugee subjects of the photos allowed us replicate on a very tight budget what would be quite expenisive with a proprietary museum guide system. With Podlinez, audience members could also call a phone number printed next to the portrait in order to hear the podcast.

Finally, audience members were also able to give feedback on the exhibit via SMS, which was compiled into a Twitter feed for the exhibit (I’ll describe this last piece later, in Part 2).

Beyond the photographs: audio portraits via podcast

So, here is the basic outline of the system:

  • Audio interviews with the photographic subjects were performed by Rose Love Chou during photography sessions. Later, she selected and edited clips in consultation with Eliza Gregory & saved them as mp3 files.
  • COAR’s website already uses Drupal with the CCK, Views, & Pathauto modules among others. A few other modules needed to be installed, too, to handle the media files nicely. These were then setup to present a podcast and interactive pages online.
  • The podcast RSS feed was run through Feedburner to clean up downloads, and offer users who might not be familiar with podcasts a bit more guidance.
  • Feeds for each of the audio files were submitted to Podlinez to handle call-ins.
  • Donated mp3 players were preloaded with the audio portraits and left at the entrance to the exhibit.
  • Phone numbers were printed on the labels so that people could call and listen to the audio through their cell phone.

Setting up the podcast in Drupal

I’m not going to go through the nitty gritty details of installing Drupal modules, but here is the list of modules we used for this system:

  • CCK
  • Views
  • Pathauto
  • Image_field
  • Imagecache
  • Token
  • Audio Field
  • Media Field Display

Drupal’s framework is incredibly flexible, allowing you to do amazing things with just a little bit of elbow grease. This was all done under Drupal 5, so I am not going to go into too much detail with the configuration because the details are probably out of date even though the concepts are still valid with the new CCK and views modules.

The “portrait” content type

Drupal is built around nodes (units of content). For our purposes, we wanted a “portrait” to be our content type. Each content type will have a photo, a number (the title), and a caption. Some of the content will have an mp3 audioportrait as well.

So, we first create a new custom node type and called it portrait. Then, we add the following CCK fields: photo (an image field), photo_caption (a text field), and audioportrait (an audio field).

Next, we can go to pathauto settings and set the URL pattern for each portrait to be fuse/portraits/[title]

Now, to control the visual presentation of the content we can do a few things. First, we can use Imagecache to setup automatically resized versions of the uploaded photo. Then, we can go to the view option for the content type and change the presentation of each of the fields. For example, we can get rid of the labels for each field, set the image field display mode to the resized image_cache version, and set the display for the audioportrait to the Media Field Display. That last one will let the users play back the audio portrait right in the browser.

The bread-and-butter: Views

Next, we use the views module to setup each of the views for the different modes of presentation. This is the key to the whole deal because it lets us build the actual feeds for the podcast and for Podlinez.

  • The fullpage view is simply a “full node” view set to only presenting one node per page. This uses the “full page” version of the node (and therefore, all of the display options we setup before) with “pagers” turned on so that the user has “next” and “previous” arrows at the bottom of the page.
  • The podcast view is a “table” view with the only the title and audioportrait fields displayed. We also add the “RSS: RSS Feed Selector” argument in order to present all of the portraits with audio in podcast form. Instructions for downloading the podcast was inserted into the header of the view. The podcast was also pre-loaded onto three mp3 players that were donated by local businesses.
  • The podlinez view is of the type “Views RSS: RSS Feed” tweaked to deal with Podlinez. Since Podlinez will only playback the most recent episode from a podcast, there is no way for the user to browse through all of the audioportraits. By allowing the portrait number to be passed as an argument to the view, each audioportrait gets “it’s own” single-episode podcast.

Accessing the audio through Podlinez

Podlinez is a free service that lets you call a podcast from a phone. You simply submit the URL of the podcast feed and they kick back a phone number. They preface the podcast with a “brought to you by Podlinez” kind of ad. They cull the list of numbers periodically, though, so if no one calls your podcast for more than two weeks, you might lose your number. It was brought to my attention by Casey Muller.

Since you have a list of feeds (one for each file) from the view you setup in Drupal, simply go to the Podlinez homepage and drop that URL into their phone number generator.

Word of caution: Be sure to test your phone numbers before “going live” and printing panels with phone numbers on them. Sometimes the numbers that they give you don’t work. This can be particularly problematic if you are trying to throw this together at the last minute, hours before opening, like I was. I tried adding the feed again and it would tell me “We already have a phone number for that feed” and give me the non-working phone number. The tech people at Podlinez were quite helpful in taking down such numbers, but you should give yourself a few days before opening to get the kinks worked out.

Shouldv’e, could’ve, would’ve…

In hindsight there were a few things that I would pay closer attention to if I were to do this again:

  • Podlinez is not perfectly reliable. As mentioned above, some of the numbers didn’t work when I first added the feeds. Some stopped working a few weeks into the show.
  • The donated mp3 players were of poor quality. One stopped working after the first week. Another after two months. They were basically the cheapest ones that Best Buy was willing to give up when the team went hunting for in-kind donations.
  • Needed to use better equipment for recordings. To say the least, there were sound quality issues. By the time the audio has been digitized, compressed to mp3, recompressed by podlinez, squeezed through the cell phone signals into a museum with bad signal, & played out on a bad cell phone speaker, a soft spoken non-native English language speaker can be quite difficult to understand. The only way to fix this would have been to acquire the audio at a better signal-to-noise ratio, with professional audio equipment. That costs money, though.
  • User interface wasn’t clear at the exhibit level. Most people didn’t notice the phone numbers on the labels unless they were told. There was no graphic, no bold, no typeface changes at all to indicate that you could call the phone number and listen to a story from the person you were looking at in the photograph. All there was was a phone number underneath the description on around 2/3 of the photos.

Stay tuned for Part 2…

I’ll post soon on Part 2 of this series, which will cover adding the “interactive” layer to the system: using 4INFO, Twitter, Yahoo Pipes, and a few other tools to let audiences respond to the exhibit in real time.