Leadel - A Drupal & Flash intensive site

LEADEL.NET is a video portal and social network, funded by the European Jewish Congress, which revolves around the elements that make social, technological, political and financial leaders tick and thereby encouraging Leadel's viewers to explore what makes them do what they do.The site focuses on Jewish identity and tries to explore the differences which make us as identity bearing human beings unique.
The path LEADEL have taken in inspiring the perseverance of that identity, is to create a website which will appeal to young people and will adhere to their standards of quality, user experience and ease of use.

This was a great chance to take the services module further then we (at linnovate) have ever done before.
We ended up writing 16 custom services and using drupal to organize the site's information and flash as a front end, this combination seems to be the best of both worlds.

The Talk Carousel

The talk carousel is the main visual component in the home page and is used to promote the videos inside.

The way it works is that it is based on a custom service which in turn is based on a view. This view of the published “talks” returns an active list of “cards” with quotes from the different leaders, a picture and the category (based on simple taxonomy) where each taxonomy term has it's own color.
When the users click the "play" icon it leads to the chosen “talk page” where the interview is then played within our video player.

The cool thing about this element, is that it displays all results when it's service does not receive an argument, but when you filter the result using the tagcloud on the top right, the termid(s) picked are communicated to the carosuel by javascript and the flash get's a signal which replays it with the new argument this time.
The service is then submitted with the tid argument, which in turn runs the view with that argument.
This is how we get the filtering of the the results without a page refresh.

The Think-Tank

The think tank is used to create an associative display of the different categories used to segment the “talks” in the site.
It's built by a custom service that gets the taxonomy_tree of the categories vocabulary and adds additional meta data about these categories (like their colors and descriptions).
The think tank has three functions depending on the location the surfer is in the site.
We have code checking the url we're located at and passing a flashvar to the flash with the desired mode.
In the home page the tag cloud is used to filter the Talk carousel by sending the chosen category's as arguments to the Talk carousel's view and thus filtering the result to display talks from the chosen categories.
In various internal pages you can run a search on a category and receive a standard "talks" result.
In the member edit page the think-tank is used to set the members identity through setting his color-line on things which he feels build his identity.

The Color line

A nice feature requested by the leadel staff was to somehow communicate the diversity of the identity of the site's members. We decided using a color-line which is combined by what the member decides (in the member edit page) but later needs to evolve on it's own to communicate the diverse identities of the site's members.

The color-line is saved in a hidden field in the members cck and is displayed using css which shows the percentage of the identity the specific category picked occupies.
To enable the color-line's evolution, we then created a service embedded in to the player which added a small percentage of the color from the category to the talk that is being viewed, in to the color-line.
That way after a while the member's true interests start to be communicated through his color-line.
The color-line is not just displayed in the users member's page but in various listing of members across the site.

Messages and the Inbox

One of the main challenges in leadel was to make communication between the sites members as easy, intuitive and fast as possible.
The privatemsg module is a great implementation for inter-site communication but it's interface was not what the client wanted.

They wanted a much more “facebooky” user experience with a lot of floating divs opening and closing and a lot of ajax based eye candy.
We completely rewrote the interface which mainly operates from “the inbox”.

We wrote a custom module called popup_form which let's us embed a form in one of these “popups” it also enforces a model window behavior and communicates all of the messages without refreshing the page, thus reaching the fast and twittery/sms like user experience required.
To implement some of the jquery based inbox functionality we needed to connect the jquery to exisitng and custom built services.

Luckily when looking for the solution I learnt about dmitrig01's json_server module which provides a services engine that let's us use the same services using jquery based post requests.

We created many subtle effects using jquery shows and hides, and we implemented delete and spam buttons as well, all of these are backed up by services that delete, mark as read and get the number of new messages so they can be passed on to the requesting jquery code.

Player

The player is a custom coded flv player which plays the movies which are hosted on the limelight content delivery network.

Basically the player is the core method to communicate Leadel's goals, because of that a requirement was to embed as many of the communal and viral marketing elements into the flash.
This means that we have substituted many of the contributed modules default interfaces to new service powered flash front ends.
These example consist of the following...

• Fivestar rating (based on the fivestar and voting api modules)
• Related videos (node references to other talks)
• Favorites using the favorite node module.

Share button which is actually a mix of buddylist and privatemsg, basically we read the user's buddy list and create a list of images of his friends for him to choose, then he can either choose and existing user and send him the talk shared as a privatemsg or share it by mail.

Facebook integration is done using a trick taken from the service links module – using facebook's sharer.php and passing it into the flash.
Naturally all of these took numerous services to implement and we finished off with 16 custom services written to address different aspects of the site's behavior.

Modules Used

Contributed modules

• CCK, talk, news, member, debate content types definitions for the site.
• Views, 26 custom views, Earl, I humbly bow my head in gratitude
• Services, Powering the flash and ajax goodness in the site.
• amfphp, Flash Magic
• json_server, Jquery based Ajax magic
• fivestar, Using it to store the fivestar ratings done through flash, using it with views to display talk ratings
• nodeprofile, A complex member profile needs a node, thanks fago
• privatemsg, Powering internal messaging in the site and provides the base functionality in the "inbox"
• activity, Aggregating members activity.
• mollom, Pretty Captcha, Pretty Graphs, Pretty interesting
• nodequeue, When you want to totally control your listings.
• service links, Share content with others.
• masquerade, When you want to see the world as your users do.
• webform, We needed a richer featured contact form.
• flag_content, For the "flag as inappropriate" feature for members.
• forward, Forward to friends.
• buddylist, Friends management.
• logintoboggan, Log in both with username and mail.

Custom modules

• debate, A custom built debate module which let's you create debates and let the users add their comments and agree or disagree upon submission.
• popup_form, See the Inbox and Messages section, pretty divs that float over the content and are given a form_id and a return message to render.
  They are even draggable! jquery interface is fun.

Infrastructure

The main site is hosted on an amazon ec2 instance which was tuned to run drupal (apc opcode caching, Mysql tuning), The videos are hosted in the limelight CDN.

Development practices

Bigger teams require management procedures and tools, to expose certain aspects of the project to the client, we have grown to use and love the open source redmine product management application.
The thing I love about redmine is that it's really easy to set up, and supports multiple svn repositories.It has a lot of social add ons (like shared document management, wikis, forums, promoted news) and it's one of the only times we're not "eating our own dog food" - it's ruby based.
I adopted Larry Garfield's practice described in his post about using a joint db server for multiple sandboxes in the development phase.
This simplified the whole "db sync" problem at least in the initial phase and made the chronic db issues transparent.

Credits

The site was architectured and developed by Linnovate with the help of several great partners...

• Hinbit Development: Our ongoing partners in big drupal projects - Drupal development, Account management, QA and css wizardy
• Inbal East: Site Design and information architecture
• Fatlady: Flash development.