A Drupal Photoblog Recipe

Tags:

Caution this is a long detailed post!

I had a recent requirement to build a photoblog website for my daughter who has just started to learn about photography.

After evaluating a number of different product including: gallery 2, cheesecake, pixelpost and photostand to name a few I decided that none of these would match with my requirements. With a few years experience and having built several Drupal powered sites I decided to investigate the possibilities.

When you think of a photoblog Drupal is probably not the first application that comes to mind. But, it is relatively simple to create a stylish, scalable and very functional photoblog with Drupal.

Requirements

Lets take a look at the main functionality that I want to achieve:

  • Single image per page with previous/next navigation.
  • Images must be able to be put into multiple categories.
  • Multiple image sizes
  • Square thumbnails.
  • Full size images should open in a new pop-up window.
  • Watermark protection on full-size images.
  • Thumbnail preview pages of images in each categories.
  • Ability to add image description.
  • Visitor commenting with anti-spam protection.
  • Scheduled future publishing of posts.
  • Static content pages.
  • RSS syndication of content.
  • Friendly, logical url's

What I wanted to try to avoid to do was to hack any modules or core Drupal code to ensure any easier future upgrade path of modules and core.

What's not important at the moment:

  • Bulk Upload
  • Shopping cart

Research

I started down the path of using image_gallery.module and image.module but this would not work without hacking code for full-size pop-up. I also wanted to remove the link to the thumbnail from the image nodes.

I also investigated CCK using image fields and image_cache.module for resizing the images. This method currently requires that you make the files public rather than private (not really what I was after).

I guess I could have also looked at building a custom content type that exactly suited my requirements. But, this would require ongoing maintenance to keep up to date with new releases of Drupal and take longer to develop than I intended to spend on the project.

So, after lots of investigation, building and re-building a test site, trying the various different combinations of modules I have gone full circle and decided to use image module. But, not the image_gallery.module as creating custom views allowed greater flexibility. I also wanted to have multiple taxonomy vocabularies and pick terms from each.

Modified image.module

I ended up modifying the image.module to use lightbox as an Ajax pop-up of the full sized image.

Replace the existing code:

/**
* Implementation of hook_link.
*/
function image_link($type, $node, $main = 0) {
  $links = array();

  if ($type == 'node' && $node->type == 'image' && !$main) {
    $request = ($_GET['size']) ? $_GET['size'] : 'preview';
    foreach (_image_get_sizes() as $size) {
      if ($node->images[$request] != $node->images[$size['label']]) {
        $links['image_size_'. $size['label']] = array('title' => t($size['label']), 'href' => 'node/' . $node->nid, 'query' => 'size=' . urlencode($size['label']));
      }
    }
    if (user_access('view original images') && ($node->images[$request] != $node->images[IMAGE_ORIGINAL])) {
      $links['image_size_original'] = array('title' => t('original'), 'href' => 'node/' . $node->nid, 'query' => 'size=_original');
    }
  }

  return $links;
}

With:

/**
* Implementation of hook_link.
*/
function image_link($type, $node, $main = 0) {
  $links = array();

  if ($type == 'node' && $node->type == 'image' ) {
    $request = ($_GET['size']) ? $_GET['size'] : 'preview';
  
    if (user_access('view original images') && ($node->images[$request] != $node->images[IMAGE_ORIGINAL])) {
      $links['image_size_original'] = array('title' => t('Fullsize Image'),
      'href' => '' . $node->images['_original'],
      'query' => 'size=_original',
      'attributes' => array('rel' => 'lightbox'));
    }
  }

  return $links;
}

Modules

  • Categories - Used to classify images. I have created a number of different vocabularies, populated them with terms and associated with image nodes.
  • Image - The default content type used for image nodes.
  • Image Exact - Used to produce square thumbnails. However, you need to be careful not to rebuild images or alter image dimensions after creating image nodes. Otherwise you will loose square thumbnails and have to go to each node and save again to restore (in the end I have decided not to use this).
  • Image Import - Allows bulk import of images into image nodes from a directory on the web server.
  • Watermark - As the name suggests, this module allows you apply watermarks to your images.
  • Custom Pager - Was used to create pagination links for the image nodes.
  • Lightbox2 - Used to create full size image pop-ups above content (without altering fixed width page layout.
  • Tagadelic - Used to create a Tag cloud of Taxonomy terms.
  • View, Views RSS and Views UI - Used to create numerous custom views including the Photoblog pages and Album views.
  • Comments, Akismet, Captcha and Textimage modules - Allow for anonymous commenting with very effective SPAM protection

You may notice that I am not using the image_gallery.module. This was conscious decision as I wanted the flexibility of layout provided by views and multiple vocabularies.

Watermark Module

In the watermark.module I had to make a minor change to get it working - comment out the following line (this should be around line 143) as the path is incorrect:

/*  $dir = './' . variable_get('file_directory_path', 'files') . '/'; */

But, in the end I decided against using this module as the way the watermark is applied means that on multiple saves of the image node the watermark end up being written over the top of the original watermarked image. If you wanted to make changes to the node this results in a noticeable degradation of the image quality. There where also some inconsistencies that resulted in my thumbnail sized versions of the images being watermarked even though I had not specified for the watermark to be applied to them.

So for now I have limited the size and quality of the full size image as to not allow a decent print from any image which get stolen from the site.

Changed to Pixelpost

Although this has worked ok for the last couple of months I have decided to change the photoblog over to Pixelpost.

As it was important to be able to watermark images and easily implement EXIF this was the best choice.

For watermarking I have used a simple PHP watermark script.

Submitted by nzwhost on Thu, 2007-09-27 21:31.