Building A Better Drupal Photo Gallery

There are a lot of ways to build a image gallery in Drupal, but most of them are very complicated, require users to make a view for each gallery, and don't end up looking the way you want.

Don't make them think!

For G.Willikers! Toy Store I set out to build a better photo gallery that would allow users to easily create new gallery pages and upload images to them – without having to know anything about cropping images or how to create a new view.

The end result is an new, previously undocumented (as far as I can tell) image gallery that is intuitive to use and easy to set up.

Check out the G.Williker's! photo gallery to see the final product.

Before I set out to build my own gallery, I tried all the modules, and read as many blogs and handbooks pages as I could. The problem with most modules is that they can't be easily customized. Other directions require you to create "image gallery" taxonomies and upload images individually, and then style the page with views making it impossible for an end user to do without serious training. This is what I found to be the easiest way.

Using CCK, Image Field and Contemplate

To do this you are going to need CCK, ImageField, and Contemplate. Image Cache, Thickbox and Views are optional.

1. Create a content type. Let's call it "Imge Gallery", and leave all the fields body, title, etc...
2. Next add an image field and call it something like "gallery" Alow multiple images to be uploaded. Enable custom title text if you like.
3. Go to Image cache and create your perfect thumbnail size. I usually scale the image to a slightly larger size then I want, center it, and then crop it to size. That's what I've found works best.
4. Create Content > Image Gallery, and upload a bunch of images to this page. Also add some words to the Body.
5. So after you've uploaded all your images, go to Display Fields within your image gallery content type and and select Thickbox:(name of imagecache thumbnail). Make surethe label is hidden.
6. Now your ready to style your page with Contemplate. I throw the title in there, and the body text, and I add some quick directions to viewers like: click on the image to see it bigger....
7. Then I do something like this:
   <?php if ($node->field_gallery[0]['view'] > '') : ?><?php print $node->field_gallery[0]['view'] ?><?php endif; ?>
   for as many images as I have. For the purpose of this site, I limit them to 24 images per page. I also have the option of adding text like this: <p><?php print $node->field_gallery[0]['title'] ?></p>within the statement if the desing calls for it.
8. [update class="9.27.2008"] An alternative way to write step #7 in Contemplalte is so that you have more control over the size of the popup image in Thickbox. Writing it this way essentially eliminates step number 5, and gives you more control over the thumbnail and popup sizes in Imagecache.:
   <?php if ($node->field_gallery[0]['view'] > '') : ?><div class="gallery">
   <a href="/files/imagecache/Gallery_Display/<?php print $node->field_gallery[0]['filename'] ?>" title="<?php print $node->field_gallery[0]['title'] ?>" class="thickbox" rel="gallery-gallery"><img src="/files/imagecache/Gallery/<?php print $node->field_gallery[0]['filename'] ?>" alt="<?php print $node->field_gallery[0]['title'] ?>"  /></a>
   <p><?php print $node->field_gallery[0]['title'] ?></p>
   </div><?php endif; ?> [/update]
9. All that's left then is styling the page in CSS.

After you have created your gallery page you may want to make a landing page which links to all your super cool galleries. Check this out.

1. In Contemplate, create a teaser view that takes the first image and the page title. It might read something like this: <a href="/<?php print drupal_get_path_alias("node/$node->nid"); ?>" title="<?php print check_plain($node->title) ?>"><?php print $node->field_gallery[0]['view'] ?><p><?php print check_plain($node->title) ?></p></a>.
2. Go to Views and create a block and select Teaser list. Select the node type in the filters and sort whatever way you want.
3. Attach the block to a page and style with CSS. It really don't get easier then this.

I'm interested to find out if these steps were helpful. Please let me know in the comments below. Feel free to digg this page or quote it in the Drupal handbook.