Content Editing Goodies In Open Atrium 2

Heather James of Acquia recently published a great post about all the fancy new content editing features of Drupal 8. If you haven’t read it, go ahead and do that–it’s chock full of great reasons to be excited about Drupal 8.

That said, here at Phase2, we were struck by a lot of the similarities between things mentioned in that post and things that we’ve built into Open Atrium 2. Here’s a quick rundown of some content editing goodies that are in Open Atrium 2, some of which also made it into Drupal 8 and some of which didn’t.

Two Column Content Creation/Editing

Like Drupal 8, we put the meat of the node add/edit forms on the left and the metadata on the right. This gives form elements a clear separation and reduces the “oh crap this form never ends” factor when messing with content.

Here’s what it looks like when adding a discussion post:

The particularly astute readers might notice that the fields have also been rearranged and resized a bit. For example, the title input is now really big as if to scream “I AM IMPORTANT” and the URL alias field is placed right underneath it, since that’s usually based on the title.

Save As Draft

This simple little feature can save a lot of headaches. Rather than changing the “Published” field to Not Published before clicking Save, which I personally forget to do approximately 10/10 times, just click the “Save As Draft” button, conveniently made nice and big and placed next to the Publish button.

Notifications? Notifications!

How many times have you made a change to some piece of content and then promptly emailed a person or group of people to tell them about it? The future is now, friend. Let OA2 do that for you.

When adding or editing content, you can choose if you want to notify specific users, specific teams of users, or specific groups. You can also opt out of sending notifications altogether by clicking the checkbox, so that you don’t have to manually removing anyone that you may have subscribed on the last edit every time you correct a simple typo.

Or how about being on the receiving end of these? Say you’re subscribed to a thread that gets a lot of traffic and you find yourself with 30 emails a day because of all the comments. We created the Message Digest module to fix that. That module will let you tell OA2 that you want to receive digest emails only every day or every week (one message per-group or one global message for all groups) rather than a new email per update.

Well-integrated WYSIWYG editing

It was a given that OA2 would need a solid WYSIWYG editing experience, so we pushed pretty hard to make that as solid as we possibly could. To start, there’s the standard TinyMCE editor with all the usual suspects in terms of formatting.

We also included some perhaps less-used or more advanced features such as Paste From Word, Insert Special Character, Undo/Redo, etc. which are collapsed by default and show themselves when you click the little “keyboard” icon at the top right.

Or maybe you feel more at home looking at HTML than formatted text? Change the input format to “HTML” and the WYSIWYG will be replaced with a toolbar that lets you insert HTML elements easily but still gives you access to the code.

But how about media? Adding images and embedding things like YouTube video is done by clicking the “picture” icon. From there, you can upload an image directly or paste an image URL or video link to generate embed code. You can also browse for previously upload images thanks to the Media module integration.

To round out the WYSIWYG goodies, we made it easy to link to existing content by adding LinkIt support. This gives you a cool little autocomplete field when adding a link that looks for titles of existing content.

Lots of UI simplifications

We worked really hard to prune the UI and remove Drupalisms wherever possible to make everything really easy for non-developers to get around, and there’s really too much in this category to name.

As one quick example, we removed the army of tabs that tend to show up on nodes on Drupal sites with a lot of modules (Edit, Delete, View, Panelizer, Log, Subscribe, Revisions, Archive, etc. etc. help me). Instead, we show the most used one (“Edit”) by default, and hide any others that might be useful under a little gear dropdown menu. So you’re left with these pretty little buttons instead of a mile long tab strip.

 

Taking a tour

When you’re first presented with a system as powerful as Open Atrium 2, it’s going to be a little daunting no matter how easy we try and make it. To ease that pain, we created the Bootstrap Tour which gives us (and YOU!) an easy to use interface for creating tours. For example, if you want to learn how to create a new page, you’d just click the little question mark icon in the navbar and click “Adding a new page” in the dropdown.

That will take you to the admin section and give you a little pop up next to the link you’d use to create a new page. This will describe what the link does and what happens when you click it.

Then, click “Next” in the popup and you’ll be taken to the actual form where you enter details about your new page along with helpful popups telling you which fields do what. It’s a really seamless experience and it makes learning the ins and outs of Open Atrium 2 about as easy as it possibly could be.

The cool part about this is that it’s so easy to create and edit tours that once you learn the ins and outs of OA2 and you move on to customizing things, you can create your own tours to teach your coworkers or users how to use what you build. So if you build an Intranet on top of OA2, adding guided tutorials for your users is really, really easy.

tour

Lots more

There’s really too much to put it all in one (or a few) blog posts, but take it from me, as someone who is not easily impressed by things like this: there are a LOT of really exciting things for content editors in Open Atrium 2. We’re really excited to launch later this month at BADCamp! In the meantime, download the latest beta and tell us what you think!