Making The Admin Backend Shine!

Out of the box, the admin interface in Drupal 7 leaves a lot to be desired. It’s cluttered, uninformative, and feature-poor. There often seems to be an unspoken assumption that this is part of the Drupal experience, but it doesn’t have to be that way. On our recent engagement with Pac-12 Networks, a lot of effort went into tuning the behind-the-scenes experience. The combination of contrib work and custom work, means that it’s worth a quick tour through the components that make up the backend of this site.

Administrative Theme

The Pac-12 site uses the Ember theme. This theme is a responsive administration theme originally built for use with the Spark distribution, though it works as a stand alone admin theme as well. Ember theme was also built to work with Navbar module (Toolbar in Drupal 8) and includes module style overrides for Views, Ctools, Panels, Media, Workbench and Features.

Administrative Navigation Bar

In order to more easily access the administrative menu, we turned off the Overlay module and put the Navbar module to work. This gives us a very nice hide-able admin sidebar, which is also mobile-friendly. It also has a great, intuitive foldable structure which accommodates nested menus in an elegant fashion. The core Shortcut module also gives us the ability to add some key links to this sidebar. Notably, this includes shortcuts to add and find content, the Workbench moderation dashboard, and a link to node/add/article, their most commonly created content type.

Content Views

While Drupal 7 comes with a default “find content” page at admin/content, if we’re being honest, it isn’t very good. The filters that come out of the box are pretty weak, and the information included in the content list is not terribly informative. Fortunately, the Views module allows us to override this page with a custom view, which is what we did. The addition of a handful of exposed filters on title, content type, status, and taxonomies makes finding specific content much more doable. The Views Bulk Operations module adds in checkboxes and the operations select box, allowing for mass publication, deletion, or moderation. Custom icons for edit and delete operations on individual nodes are provided using Views’ Global: Custom text field option, with code similar to this:

<a class="edit" href="/node/[nid]/edit?destination=admin/content"><img src="/path/to/theme/img/edit.png"/></a>
<a class="delete" href="/node/[nid]/delete?destination=admin/content"><img src="/ path/to/theme/img/delete.png"/></a>

Note the tokens for nid, a feature built into Views. Additional views using this methodology create custom content listing pages for videos, files, scheduling information, and other specific needs.

Content Creation

Content creation is, of course, an incredibly complex experience, particularly on node types with lots of fields. The Fieldgroup module can help with this experience. This module takes the old collapsible fieldset idea, and expands on it by giving you the option to create vertical tabs, horizontal tabs, accordions, and div wrappers. Pac-12 primarily uses vertical tabs. The Chosen module makes <select> elements a bit more user friendly. Utilizing the Chosen jQuery plugin, this module transforms the multi-select experience and is highly worth investigating if you have a list of options longer than about six items. Finally, as noted in my earlier blog post, Optimizing Referenced Content in the Database for the Pac-12 Conference, this site relies heavily on the References module for a lot of its content interaction.  However, what that post doesn’t talk about is the curation process for those relationships. In short, there are thousands of nodes to choose from, many with titles like “Oregon vs. Oregon State”.  Clearly, it would be impossible to tell just by title exactly which Oregon rivalry game is the one you want to highlight, so we implemented the References Dialog module to help streamline that experience.  My colleague Will O’Beirne wrote about this module in a blog post, Reference Dialog Helps Make Content Management a Breeze!, so head over there for more details. Did I miss anything you think is vital? What’s your favorite editorial experience tweak? Tell me in the comment area below, and thanks for reading!