Drupal, Flickr and a photo gallery part 2

In part 1 I set out the problem and the aim. This post will cover setting up the modules required to display a gallery. The custom coding needed to make creating galleries a breeze comes in part 3.

The following modules must be installed and enabled:

You will need a Flickr API key which can be obtained from http://www.flickr.com/services/api/keys/apply/, go to admin/settings/flickr and enter your key and shared secret. I set the number of photos per photoset to 100.

The next task is to create a content type which will be the member gallery. Go to admin/content/types/add and give your gallery content type the name 'Member Gallery' and type 'member_gallery', add a short description and disable comments. Save the content type. Now click on manage fields for the new content type. Two fields are needed, one which collects the photos from a set and another which fetches the main photoset image which will be used for an index of galleries.

Add a field labeled Images with the name field_flickr_photos of type Flickr Photo. This will collect all of the images in the set. This field is required and only a single value is needed.

Add a field labeled Photoset with the name field_flickr_photoset of type Flickr photo set. This will fetch the index image. This is also required and only a single value is needed.

Next go to admin/content/node-type/member-gallery/display and set the label for field Images to hidden and exclude the Photoset field (which is only used for building an index of galleries). You must click save on the page or no images will appear in your galleries.

Try out your gallery by going to node/add/member-gallery and filling in the form. You must select Photoset as the Item Type and enter the id of the photoset (the number in its URL) and your flickr user id (the e-mail address which you gave flickr will work). The photoset id goes in the Photoset Flickr ID box as well.

You should see your images in a column. Tidy up the display by adding this css to your theme:

div.flickr-photoset div.flickr-photoset-img {
  float: left;
  margin: 0 12px 12px 0;
}
div.flickr-photoset, div.field-field-season {
  float: left;
  clear: both;
}

To use lightbox to view the images add something like this to your theme's template.php file:

function mythemename_flickrfield_photoset($img, $photo_url, $formatter, $photo_data,
                                          $node) {
  $output = '<p>Click on a thumbnail to view the image.</p>';
  $output .= '<div class="flickr-photoset">';
  if (module_exists('flickr_sets')) {
    $photos = flickr_set_load($photo_data['id']);

    foreach ((array) $photos['photoset']['photo'] as $photo) {
    //insert owner into $photo because theme_flickr_photo needs it
    $photo['owner'] = $photos['photoset']['owner'];
    $title = is_array($photo['title']) ? $photo['title']['_content'] : $photo['title'];
    $img = flickr_img($photo, $formatter);
    $original = flickr_photo_img($photo, 'b');

      if (arg(0) == 'node' && arg(1) == $node->nid) {
        $output .= 
           '<div class="flickr-photoset-img flickr-photoset-img-'. $formatter .'">'.
           l($img, $original,
           array('attributes' => array('title' => $title, 'rel' => 'lightbox[gallery]'),
                 'absolute' => TRUE, 'html' => TRUE)) .'</div>';
      } else {
      $output .= '<div class="flickr-photoset-img flickr-photoset-img-'. $formatter .'">'.
           l($img, 'node/'. $node->nid, 
           array('attributes' => array('title' => $title),
           'absolute' => TRUE, 'html' => TRUE)) . '</div>';
      }
    }
  } else {
    $title = is_array($photo_data['title']) 
             ? $photo_data['title']['_content'] : $photo_data['title'];

    if (arg(0) == 'node' && arg(1) == $node->nid) {
      $output .= '<div class="flickr-photoset-img">'. $img .'</div>';
    } else {
      $output .= '<div class="flickr-photoset-img">'. 
           l($img, 'node/'. $node->nid, 
           array('attributes' => array('title' => $title),
                 'absolute' => TRUE, 'html' => TRUE)) . '</div>';
    }

  }
  $output .= '</div>';
  $output .= '<div class="flickr-photoset-meta">';
  $output .= '<p>'. $photo_data['description']['_content'] . '</p>';
  if (isset($photo_data['title'])) {
    $output .= '<cite>'. l(t('From Flickr set') . ' ' 
                . $photo_data['title']['_content'], $photo_url) .'</cite>';
  }
  $output .= '</div>';
  return $output;
}

You should now have a functioning gallery. All of the ideas in the post come from 'Create a Drupal Photo Gallery Using Flickr, CCK & Views, Take Two'.

Site Section: