Streamlining the Blogging Experience with Drupal

Photo by david pham.

In my previous post I spoke of WordCamp Vancouver, a blogging event that inspired me plenty. One of the things I realized was that the process of writing these blog posts could be smoother. Two tools of note:

• WordPress's QuickTags
• Flickr Photo Album plugin at TanTanNoodles

WordPress's quicktags is like your typical rich-text editor's buttons, actually. You click "B" and it puts <b></b> tags around the current selection. Since I really don't mind typing such short tags it's not terribly useful for me, but it's great for long and repetitive elements like my external links:

<a href="http://example.com" class="external" rel="external">Example</a>

The Flickr Photo Album plugin lets you easily embed content from Flickr in your blog posts. It saves you the trouble of visiting the Flickr website and copying and pasting chunks of HTML.

Drupal's Quicktags and Flickr modules

Unfortunately for me, these are WordPress tools (it was a WP camp after all) but the Drupal community's got a couple modules of their own which, together, can perform the same feat. The modules in question:

• QuickTags module
• Flickr module

The Quicktags module basically ports the WordPress functionality to Drupal. The module also provides hooks that make it easy for module developers to add custom quicktags to the menu.

The Flickr module defines a filter for converting macros like [flickr-photo:id=123456789,size=m] into HTML which displays a particular Flickr image.

Implementing custom quicktags

Making custom quicktags does take a little bit of Drupal know-how. Once you've installed the quicktags module you'll need to create a custom module by filling out a .info file and placing it in a folder under /modules. Check out the module developer's guide for details on this.

Now, create the .module file in the same folder and write a single function, MODULE_NAME_quicktags_insert. This function will be called when Drupal's planning to display some quicktag buttons and it's your chance to return any buttons you want to have added to the list.

function MODULE_NAME_quicktags_insert()
{
  $iconBasePath = base_path()
    . drupal_get_path('module','MODULE_NAME')
    . '/quicktag_icons';
 
  $items = array
  (
    // add a new element to $items for each quicktag you want to add
    'anchor_external' => array
    (
      // the display name of the quicktag.  this appears on mouse over,
      // or if there is no icon file
      'name' => 'External link',
 
      // this is the string that will appear before the selection when 
      // the quicktag button is clicked.
      'prefix' => '<a href="" class="external" rel="external">',
 
      // this string appears after the selection when the quicktag button
      // is clicked
      'suffix' => '</a>',
 
      // the weight determines the order of the buttons
      'weight' => 75,
 
      // the URL of the icon for the quicktag
      'icon' => "$iconBasePath/anchor_external.png"
    )
  );
  return $items;
}

Now you can click the "External Link" quicktag button and the anchor HTML will automagically be added. Just don't forget to fill out the href attribute.

Next time I'll show you how to easily add Flickr photos to your blog posts, complete with author credit.