Observer Interactive

Big News: Making Life Easier for Producers

The 'Edit Link'

A feature you see frequently in modern CMS systems is the ability to get to the job of editing content straight from the presentation layer. If you’re viewing a story on the site — and you’re logged in — a little edit icon allows you to go straight to that task. This greatly improves work flow and increases efficiency.

Those of us who came from the KRD CMS (called SDP — acronym soup, ha) were VERY accustomed to having this feature. And unfortunately when we went to Workbench it was lost forever. I asked the charlotteobserver.com content team if having this back would make their lives easier. They were literally speechless at first… and then the tears of joy followed. I took that response to mean, “YES!”

I have a very simple solution and I will lay out the fundamentals of how it works. It’s already in development on charlotteobserver.com and I expect the producers to begin using it next week.

The secret lies in using jQuery (which is readily available to all of our sites) and implementing a method to trigger the ‘edit mode’ gracefully from a browser.

The easiest and most comprehensive way to trigger the ‘edit mode’ (in my opinion) was to include a bit of query string at the end of the URL. Something like: http://www.charlotteobserver.com/oursports/?editmode (this is a made-up URL). In the header of the generic.comp I can sniff this using javascript. If it exists, I can pull in a supporting jquery file that will put the page in ‘edit mode’ once the document loads.

The jQuery loops through all link tags and pulls the href attribute. At this point I can simply test whether I have something that matches the ’story/[id].html’ convention or the ‘gallery/[id].html’ and save the backreference. If I do have a match, I append after the </a> tag a fully linked ‘edit’ button or the word ‘edit’ that when clicked opens a new window with that article/gallery ready to be edited in Workbench.

I should mention that to use this, you must already be logged into Workbench or you will encounter a session/login error.

Other features I have added:

  • The ability to go straight to the highlight list for the section you are in
  • The ability to edit the section you are in

I am exploring the notion of creating unique attributes for the link tag so I can very easily lift what I need. This would require some retooling of our headline components in TempSys — but that’s no big deal.

I’m thinking something like <a href=”url” id=”story” storyid=”123456″> and then the resulting jQuery can be something like: $(”a#story”).each(function (e) {}

  • You lost me at "storyid." I kid, I kid!

    Producers -- you're going to want to see this as a follow-up when he releases this... it's suh-weet.
blog comments powered by Disqus