Drupal: photo albums, image galleries

Created by janroe

Updated Sat, 29 Sept 2012 to include difference in field and node based images, and D7

For 6, checking to see what's currently the best, and most forward looking (= most D7 compatible) way to show:

- images in posts
- an photo album or image gallery (see below)
- image slide show /content slide show
- watermarks on images
- organising images

It's time to get these going on my site.

Photo album

First: What's the difference between a photo gallery and a photo album? Probably this:

A gallery is intended to show images in an artful, pleasing way that somehow reflects the quality of the images themselves. Emphasis: artful presentation.

An album is intended to show images in a practical and functional way, somehow reflecting ease of use and the ability to interact with the makers of the photo content. Emphasis: structure and interaction.

This is for my personal photo album. of course it would be great if it also looked good. Prerequisites: needs to be D6, currently best, most forward looking practice for eventual upgrade to D7, hierarchical structure must be possible (~ albums), image descriptions, ability to comment on an album as a whole (if possible) and on individual images (crucial).

Update: The ante is upped. It's also needed for a product showcase site.

How to go about it

Some of the ready-made solutions may not be Drupal forward looking and I could not find anything I liked or found easy enough to install or work with.

Apparently everyone is creating photo albums from scratch. This is the traditional Drupal way. While it looks like the modern way may be just around the corner (for D7).

After some experimentation, it's clear that we basically have two types of photo albums, with different characteristics:

- field based
- node based
- plus a third mix (?): Media Gallery (upcoming D7)

In the field based approach, multiple images are uploaded to a node (using multiple image fields). The images first align vertically, but can be rendered in grid form in several ways (css or views & panels or display suite). A gallery (i.e list of such album nodes) is again created with views. The distinct disadvantage of the field based approach is that apparently you can't create a way to comment on one image, and you can't use any of these images in slider /rotator. Apparently the images are insufficiently defined to do so.

- http://drupalovereasy.com/drupal-7/tutorials/creating-photo-gallery-using-fields
- http://jamestombs.co.uk/2011-05-26/create-album-based-image-gallery-drupal-7-using-fields-and-views
- http://jamestombs.co.uk/2011-08-18/use-panels-override-node-output-drupal-7

In the node based approach, single images are uploaded to a node with a single image field. Any other fields such as comments, links, etc relate directly to the single node image. This allows for greater flexibility to use the image across the site. Galleries of photo albums are created with views (possibly also panels, etc).

- http://drupalovereasy.com/drupal-7/tutorials/creating-photo-gallery-using-nodes
- http://highrockmedia.com/blog/screencast-creating-and-theming-node-photo-gallery-drupal-7-and-colorbox

The new D7 Media with Media Gallery (which is being worked on right now) apparently combines these approaches possibly as a third way, multiple images are on a node. yet they are detailed in a sort of sub-node:

site.tld/media-gallery/detail/21/46

But D7 Media currently can't add alt and title tags to images in its current stable version and Media Gallery's image field type is still in development - while this is another alternative for a complete photo album /gallery solution - soon. I actually tried it and it's very nice, except I absolutely need the image alt and title tags.

The combination of Media and Media Gallery also answers the need for better media file management. Check it out, only Media is in full stable version, all limited to D7:

- http://drupal.org/project/media (stable, yet waiting for v2)
- http://drupal.org/project/media_browser_plus (for integration into media)
- http://drupal.org/project/media_gallery (one detailed file location for all)
-- requires: http://drupal.org/project/multiform
- http://drupal.org/project/media_gallery_extra (file locations per gallery)

Manage: - People > Permissions
- Config > Media
- Structure > Types > Any type > Image widget: adds Media file selector to existing choice Image.
- Structure > Types > Gallery (new gallery content type)
No new block, no new view.
- Content > Add content > Gallery

Current version Media Gallery
- quick and easy to set up
- adjusts image size to chosen number of columns
- image title is originally the file name, can be changed
- choice to view all images in colorbox or separate pages
- description available, for colorbox or full page display

- no alt and text description tags
- no choice to not show enlarged image
- changes the default appearance of the colorbox (ugly)
- colorbox sizing doesn't fit when description is shown there
- colorbox /full page images contain a copyright © without details, field cannot be deleted. Should have selector: - none - (so that watermarking can be used), or ability to add proper/legally accepted copyright detail with year and name
-- http://www.drupalgardens.com/content/removing-license-settings (with css)
- slideshow default on, while off in colorbox settings

I also tried the D7 OpenEnterprise RC3, only with the slide rotator enabled and ran into serious error trouble immediately. I was able to solve the errors within a day of fixing things. Finally I could a) not trust this distro version to get me ahead quickly and b) learn quickly enough how to undo some of distro's customisations. -----

Requirements

And earlier research:

An overview of example photo albums and photo galleries: - http://groups.drupal.org/node/7018albums

The best, meeting the criteria with an elegantly simple "minimalist" design: 
- http://vuphotographie.com. very nicely done! 
- http://www.davidlesieur.com/vu-revu used modules - french
- http://translate.google.com/translate?u=http%3A%2F%2Fwww.davidlesieur.com%2Fvu-revu&langpair=fr%7Cen&hl=en&ie=UTF8 - google english
- http://www.facebook.com/WhiskyEchoBravo - the author

Uses the following:
- http://drupal.org/project/cck
- http://drupal.org/project/custom_pagers
- http://drupal.org/project/imagecache
- http://drupal.org/project/imagefield
- http://drupal.org/project/pathauto
- http://drupal.org/project/views

Interesting: http://blip.tv/drupal-school/drupal-school-maintainable-image-gallery-261534
not sure if this is in keeping with best practice, but uses cck and views from scratch
http://drupal.org/node/587878, http://drupal.org/node/144725

http://drupal.org/project/views_gallery but no demo available