For an upcoming Drupal website project, the client requested that they would like a Photo Gallery on their site that would contain a number of Galleries in one section, with each gallery easy to navigate through an be accessible from each other, without having to get lost going back and forth between them.

Previous Drupal Photo Galleries I have done have been quite simple and look great. Usually with each image in a gallery shown as thumbnails on a page which open in a Lightbox or Thickbox window. But with this new project I needed something a little different, and after searching around I remembered a website that had recently launched using Drupal, which had a great Photo Gallery that would be perfect for what I needed.... The Whitehouse's new website http://www.whitehouse.gov/photogallery.

After checking out  their Photo Gallery, it didn't take long to realise the Photo Gallery could be easily replicated with just a few Drupal Contrib Modules. Don't get me wrong though, I'm not saying the the Whitehouse's Photo Gallery is simple and they just threw together a couple of modules and they had a Gallery. It looks like they have done some very nice work on it and added their own customisation to get it the way they wanted it. All I'm saying is that the basic functionality of the Gallery can be achieved with some Contrib Modules and a little bit of configuring and CSS.

I will split this Tutorial into two posts. This post I will go though how to setup the gallery, the next post I will run through how to display a listing of galleries with Ajax navigation and filters at the bottom of your Photo Gallery, similar to the Whitehouse's Gallery – http://www.whitehouse.gov/photogallery.

Step 1. Download and install the following Contrib Modules.

• Galleria
• jCarousel
• cck (with ImageField + FileField)
• ImageCache
  

*Note: Check for additional required modules for any of the modules listed above to function, and download and install them also as instructed. Also, this Tutorial is based on Drupal 6 so you will need to download the 6x version of each module.

Step 2. Setting up the Galleria Module

• Create or choose an existing content type that will display the Galleria.
• Add an ImageField (called FileField in the "Data type" drop-down) to the content type in the "Manage fields" section.
• Set your desired configuration as per standard ImageField settings.
• Click the "Display fields" section for the content type.
• Change the output formatter for "Full node" and/or "Teaser" to display "Galleria".
• Create a node of the content type you used in the previous step, upload a few images (say 10 or so) and view your node. The node should load displaying a large image with thumbnails with navigation. As seen in the Demo here.
  

Step 2. Setting your Galleria Gallery to us ImageCache
Now we want to use ImageCache to set how we want to display the large image and the thumbnails in our Gallery.

• Create a thumbnail preset to how you would like your thumbnails to look. Cropping, resizing etc.
• Create a image preset for your large image. Cropping, resizing etc.
• Go to the configuration settings for the Galleria Module at 'admin/settings/galleria'.
• Under the section 'ImageCache integration', use the Dropdown to select the preset you created for the Large image and the thumbnails. Save.
• View your Gallery, it should now be displaying the images as per your presets. You may need to tweak your presets so have a play until you are happy.
  

Step 3. jCarousel
Now that we have our Gallery set up displaying a main image with thumbnails underneath which we can click and navigate through, we want to change it so that all the thumbnails display in a carousel which will enable a large number of thumbnails to be easily visible, like the Whitehouse's Gallery – http://www.whitehouse.gov/photogallery.

• Go to the configuration settings for the Galleria Module at 'admin/settings/galleria'.
• Under the section 'jCarousel integration' we can configure how we want the jCarousel to work. Set it to 'enabled', the other settings you will need to play with as it will depend on how many thumbnails you will want to show in your gallery and how you've setup you thumbnail preset.
• Save your changes.
  

Viewing your gallery - your thumbnails should now be using the jCarousel. If not, make sure you have added enough images to your gallery or check over your settings. You will most likely need to play around with the  'jCarousel integration' settings and also your thumbnail ImageCache presets and your CSS to get your gallery looking the way you need it to.

Hopefully, once you have finished playing with your settings etc. your gallery should now look similar to the Whitehouse's Gallery – http://www.whitehouse.gov/photogallery.

Let me know if you have any questions about this tutorial and keep an eye out for Part 2 which I will post soon.