Soul of Athens Blog » Technology

Bringing Some Soul to Drupal

cbaird — Thu, 22 Jul 2010 13:22:36 +0000

Once again, for this year’s edition of Soul of Athens we decided to use Drupal as our
CMS. Drupal gave a level of flexibility and ease of use that matched our knowledge of
both programming and CMSs.

While using Drupal, we ran into a few unique problems that required some interesting
solutions.

Let me prerequisite this by saying I do not claim to be some know-all Drupal or PHP
guru; these are just some solutions that happened to work for us in our situation.
As you may know, this year’s site was built around the idea of having multiple editions,
five to be precise, each with a unique template. While one approach to that would have
been to load specific CSS files for each page template on each page and piece of
content, we decided to do it a bit more dynamically with PHP. The idea behind the code
was to inject part of the current URL path into the body tag so that we could specify
each CSS rule more specifically with each edition’s links and divs:

path); print $edition[0];?>">
There it is. Simple, but it does exactly what I need it to do. What the PHP is doing is
taking the path of the node (expression/ink, for example) and exploding the string into
an array that is being delimitated by the “/” character. Then I use the first element in
the array as the id of the body.

Alright phew.

While we were building the node templates for the pieces of content, it became quite
obvious that the way in which we were entering the contributors was slightly
problematic. When we would go into the devel module and inspect the node contents,
the only content available for the contributors was their “number.” The reason why that
was happening is still a bit of a mystery. Nevertheless, I was presented with a large list
of numbers that I was going to have to somehow correlate to an author. Instead of
going and spending an hour or so constructing a keyed array of values in PHP off a list
formated like this,

… I wrote a quick and dirty script in C++ to process the text into the format that I
needed, which took all of .0025 seconds to run:

#include #include #include using namespace std; int main () { ifstream ins; ofstream ous; ins.open("parse.txt"); string tmp,tmp2,tmp3; while (!ins.fail()) { int i; getline(ins,tmp); for (i =0;tmp[i] != '|';++i) std::cout< ++i; std::cout<<"=> \" "; std::cout< std::cout<<"\","; } }
… which ended up spitting out something that looked like this:

0=> ” Matthew Anderson”,1=> ” Jonathan Adams “,2=> ” Josh Birnbaum”,3=>
” Victor Blue”,4=> ” Kiersten Bonifant”

While that solved one problem, we also had to figure out a way to correlate all the users’
roles with their names and then display that in an organized fashion. The first thing we
tackled was how to grab the roles that people held:

That is what the input format looked like in Drupal. We were using a single select dropdowns
and then a multi-select field for their roles because one person could do multiple
things in any given piece.

So let’s take a look at the code … and then we can talk about it:

for ( $ii = 0; $ii <= 5; $ii++) { print("

print $arr2[$node->field_content_role_1[$i]['value']];

}

if ($ii == 1&&$arr2[$node->field_content_role_2[$i]['value']])
{
print $arr2[$node->field_content_role_2[$i]['value']];
print(” “);

}

if ($ii == 2&&$arr2[$node->field_content_role_3[$i]['value']])
{
print $arr2[$node->field_content_role_3[$i]['value']];
print(” “);
}
if ($ii == 3&&$arr2[$node->field_content_role_4[$i]['value']])
{
print $arr2[$node->field_content_role_4[$i]['value']];
print(” “);
}
if ($ii == 4&&$arr2[$node->field_content_role_5[$i]['value']])
{
print $arr2[$node->field_content_role_5[$i]['value']];
print(” “);
}
}

print("'>"); if ($ii == 0) print $arr[$node->field_content_contributors[0]['value']]; if ($ii == 1) print $arr[$node->field_content_contributor_2[0]['value']]; if ($ii == 2) print $arr[$node->field_content_contributor_3[0]['value']]; if ($ii == 3) print $arr[$node->field_content_contributor_4[0]['value']]; if ($ii == 4) print $arr[$node->field_content_contributor_5[0]['value']]; print("

");

}

?>

Basically, what I did was set up a variable called $arr that holds all of the
contributors and another array, $arr2, that contains the roles that someone
could hold (and, yes, it is also a keyed array).

Then it gets a bit more complicated. I set a nesting looping structure that goes through all five possible contributors (variable $ii) and within that goes through their possible roles. If the role field is not NULL and $i is at the corresponding contributor it prints the role(s) within the title field of a link.

The reason for all of this code is that we really wanted to refine how peoples roles were displayed. Instead of listing the contribtors roles below or beside them we decided to do something a but more dynamic and throw some jquery into the mix, with something called Qtip.

So all that work for something so simple? Yes, but that is what makes this years site so great, it’s the little things that seem almost expected that work so intuitively that really make this years site shine.
I hope this explanation helps and pulls back the curtain that all to often falls on those glued to their monitors coding away.

Good luck and Thanks for reading.

Sam Saccone

Oh hello there…

cbaird — Mon, 28 Jun 2010 12:00:50 +0000

How did I get this tan? You are so observant! No I don’t sun bathe on college green, i’m too shy for that. Really this quarter my attention was placed on one thing: Soul of Athens. Yes I got this pasty complexion by spending the quarter with a fantastic group of people, the 2010 SOA web team. (insert heroic music) The amount of time, energy, and pizza spent by this fine group of people is insane. In 10 weeks we cranked out a site that we are all proud of and to top it off it’s the most accessible yet.

On the web team I was on the server side team- we handled Drupal, a content management system that has been utilized by Soul of Athens for the last two years. It is a very powerful open source software. My role was to set up Drupal and create a structure for our site. Organizing how content will enter the site, be collected, and aggregated.

We created a structure that allowed the students to log into the site and fill out our custom forms and that information would appear on the site based on what we asked for. It seems like nothing, someone answers a couple of questions about themselves or fills in the title of their video and it appears on the site after you hit refresh. The first time I saw that I was bubbling over with joy! It was very cool. So all the information you see on the credits page, for the most part, was typed by that student. Same is true for the headline on the content, the description and the transcript. Once the students had filled out their story form for example, we could go in, and upload their video, the thumbnail , and click the aspect ration. In the 9th week we were able to have a gathering of the senior producers and ask them to look over their editions in Drupal and adjust or point out the errors. To have them all logged in and fixing spelling errors, or adjusting descriptions in my opinion made for a better end product. Drupal allowed us to have 60 plus people contribute to the site.

Looking back at what we did and how we went about accomplishing it I would have adjusted a few things. Mostly clarifying the structure of the forms I created, and clarifying exactly how Drupal works to the SOA class. The latter might have helped us avoid a section of Moby Dick being used as transcript filler- thankfully Jill Bateman made a last minute catch. Man that was close! It wasn’t all smooth sailing, but the content management system made the process so much easier than the alternative.

(left to right) Jonathan, me, Corey, Brandon, and the bartender's finger over the lens.

There is no question that the process is intense, and challenging. The process was also fun, and I learned so much alongside my team. Thank you Zach, Brian, Dustin, Tony, John, Corey, Sam, Jill, Jonathan, and of course our fearless (sleepless) leader Brandon.

Christina Baird
Drupal Developer & Marketing Senior Producer
www.christinaeiler.com

SEO and SOA

jbateman — Mon, 19 Apr 2010 18:25:49 +0000

I feel pretty honored to write the first blog post for the 2010 Soul of Athens (SOA) project. The Vico 488/588 students will be keeping you up-to-date on some of the technical issues we’re focusing on as we build the Soul of Athens website, so let me start off with a look at search engine optimization or SEO.

When I mentioned I was doing a presentation about SEO to a former SOA web designer, he looked at me like I had six heads! Yes, we are on a short deadline, but as with all our marketing efforts, what good is all this hard work if no one sees it? And there may be another issue at play.

Definitions for SEO are very easy to Google, but let me sum it up in terms I like; Getting your website to show up as high as humanly possible on search engines without paying a dime for it.

SEO is in some ways really simple. No one seems to know exactly what makes it work, so you’re hardly ever wrong – kind of like being a weather forecaster. The rules change a lot, most of the signals search engines like Google use are big, fat, hairy secrets and of course, marketing/news/trends etc. play a big role in whether or not people will ever find your precious key words. So we should just throw up our hands and give up.

Nah.

Interestingly enough, by just doing one tiny thing, it turns out we can really improve our odds of winning the SEO game.

According to the United Nations Convention on Rights of Persons with Disabilities, 650 million people worldwide are considered handicapped. By making simple adjustments to the way we develop our website so they too can enjoy our content, we will automatically improve our standing with search engines. Even if it didn’t improve SEO, personally I think we all owe Tim Berners-Lee a nod as we carry out his vision to make the Internet accessible to everyone.

People with handicaps often use special technology to help them interpret the web so they can get to the information they are looking for. For instance, a blind person may use technology that speaks a website for them, a deaf person can read the captions on a video. When you type a word or phrase into a search engine, it sends out bots that sift through websites to find the words you are looking for. These bots are blind and deaf and they need special things to help them find what they are looking for. In both worlds, SEO and Accessibility, we can do a lot to help our audience find and use our content.

Here are a few things we can do to serve both needs:

Use descriptive alt tags on images
Hard code descriptive words as text
Use key words for h1, h2, h3, etc headers – not necessarily AP style headlines
Use the meta description tag carefully and thoughtfully
Make sure your html and css validates – no broken links
Use anchor text for links that are descriptive
Use captions on videos

There are a lot more things we can do to improve both SEO and Accessibility. It would be great to get a list going here. What should we all be focusing on in this area and why?

- Jill Bateman, Marketing Team