In February, I did a high-level review of the Mises.org CMS admin UI.  Today I want to highlight both the public and private parts a part of it: the multimedia CMS.

The Mises.org Media Management System is part of the Mises.org open source project.  It was started around 2004, and evolved slowly from there, with the latest release around February.  It is used to manage over 6400 audio/visual files.  Total document size is 275GB.  Monthly bandwidth exceeds 10 terabytes.   (You can find  the source code at Bitbucket)

The front-end features:

• Dynamic, AJAX-based interface build with JQuery UI
• Advanced search and browsing based navigation
• Detects the best media player for the current browser: HTML5, Flash, or Silverlight
• Extensive RSS support.  Integrates with iTunes and iTunes University with iTunes-specific feed extensions
• Optimized for scalable deployment, CDN’s, SEO, external embedding, and social network sharing

The media asset management includes:

• Support for internal and externally hosted content: MP4, MP3, WMA, streaming video, & YouTube
• Integrated drag and drop uploader: management interface allows uploading multi-gigabyte media files straight from the browser us
• Meta data parsing: reads full meta information such as embedded thumbnails, duration, keywords, description, etc.  Able to process all popular audio/video formats as well as PDF.
• Catalog builder:  organizes files in a human-friendly format: http://library.mises.org/media/
• Define arbitrary hierarchical categories
• Versioning and multi-volume support.

Architecture:

• Backend: ASP.Net 4.0, MVC3 (frontend) & Web Forms (backend), Entity Framework, and SQL Server
• Frontend: JQuery UI, HTML5,

How to get it for your site:

• It’s part of the Mises.org CMS
• See http://wiki.mises.org/wiki/MisesWiki:Development for details

Screenshots:

Filtering UI:

 

 

 

 

 

 

 

Media list:

 

Light box popover players:

Media detail:

Category browse UI:

Category detail:

RSS feed:

Backend:

Admin UI – detail page:

Alternative UI:

File system storage:

iTunes U interface:

 

---

 

The project started in 2004 when I created a new .Net-based site as the basis of future development. Mises.org has never had any full-time technical resources, so the website has always been cobbled together from bits and pieces of spare time and many different technologies. Over 15 years, we have accumulated much content, slowly transitioned to new technologies and usually done the bare minimum to keep everything running. According to ohloh, which calculates the cost of a software project based on the amount of work, the total time investment in Mises.org is over four million dollars. 16 people have made over 1500 separate contributions to the current site.

So what kind of functionality does the CMS provide? Let’s dive in:

All the management functionality can be accessed from the CMS admin home page, which links to the editors for different sections and integrates with third-party services:

It’s not necessary to use the manager home page, as logged-in admin users see an edit button which takes to the relevant admin page on every page on the site:

Clicking “Edit” takes you to the relevant content edit page:

Here is the user interface for editing a daily article:

Here is the complete page. Note the support for data templates, image upload (multiple sizes are automatically generated), and version history.

Here is the central page for the document/media manager. It’s one of the oldest sections and rather messy:

Here is the UI for editing documents such as books. Note the integration with our store and built-in file uploads:

The CMS knows to show different fields when you edit audio/visual content:

The “Page Content” editor is used for miscellaneous text sections and email on the site:

Here is the editor for the Mises Quotes:

The “Are you an Austrian?” quizzes:

The fellows database (there’s also one for staff):

The tagging system (it detects what Google keywords people used to get to pages and uses that results to suggest related information)

Media Categories:

The events calendar editor:

Registration forms:

Event registrations forms editor:

Periodical management UI (this is only a small fraction of it)

Ward Library:

Fundraising monitoring:

404 redirect mappings make sure that (in theory) the user is always redirected to the right page, even when the site design or technology changes.

Error logging:

Of course this is just the visible interface. Behind the scenes are automated services which organize and index files based on meta-data.

Editing supported file types:

Organization of books and media:

Finally, the user account management

As you can see, there’s a lot to the website – and this is only a fraction. If you’d like a more detailed look, you can grab a copy of the source code:

If you’re interested in learning more, join the MisesDev list.