This post is Part 2 in a series with my previous post, Creating a Drupal Photo Gallery. In this post I will run through how to show a thumbnail navigation of each of your galleries, which can be shown below each gallery and used for navigation. By the end of this tutorial, we should end up with something similar to the gallery on The Whitehouse website http://www.whitehouse.gov/photogallery.

Step 1. Make sure you have finished Part 1 of my post and it is working correctly :-)

Step 2. Download and install the following Contrib Modules

• Views
• PathAuto

*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 latest stable 6x version of each module.

Step 3. Create an ImageCache preset for your navigation

• Go to the ImageCache settings and create a new preset, setting the cropping, resizing etc.

Step 4. Create a View to show all your galleries

• Go to the "Build Views" page and add a new View, give it a unique name and leave the view type as “node”.
• Set Basic settings: Give it a name, leave Title to none. Style = HTML list (unordered), Row Style = Fields, Use AJAX = Yes, Use pager = Yes, Items per page = 5 (or however many you wish to show), the rest of the basic settings you can leave as default.
• Set Fields: Add a new field and select the image field name that is used to upload your images in your gallery content type. For example, mine is called “Content: Image (field_image)". The only settings needed for this field is to check the “Group multiple values” box and in its settings set value to “1” starting from 0. (This is so it will show the first image in your gallery). Set Label = None and for the “Format” select the preset you created and link it to the node, and update.
• Next field we want to add is the “Node: Title” to display your Gallery Name under each thumbnail, click the [+] icon again and select “Node: Title”, remove the label and check “Link this field to its node” and update.
• Now we add some filters. Add a new filter “Node: Published = Yes”, add “Node: Type = Gallery” (this will be whatever the content type your gallery is)
• Sort Criteria: This is optional, but you can add something like “Node: Post date = asc”, this will list them in the order they were created.
• Save your View!
• Next we want to add a Block display for your view, so select “Block” in the drop down to the left of the view settings and select “add display”.
• All we need to do here is under “Block settings”, select “admin:” and give your block a name and hit “update".
• Save your View!

Step 5. If not done already, we want to Drupal to automatically generate a path alias for your image galleries.

• Go to the Automated Alias Settings (/admin/build/path/pathauto)
• Under “Node Path Settings” find the field for your Gallery node type.
• Add the pattern we want Drupal to generate for us, eg, “photo-galleries/[title-raw]”. This pattern will generate all my galleries to be “mydomain.com.au/photo-galleries/thegalleryname”.
• Check “Bulk generate aliases for nodes that are not aliased”
• Save configuration

Finally Step 6. Add your custom block view to the bottom of our galleries

• Go to blocks settings page (/admin/build/blocks)
• Locate your custom block view and hit configure.
• Under “Page specific visibility settings”, select “show on only....” and add the first section of the alias pattern we used for your galleries and add the wildcard after it. eg. photo-galleries/*
  This will enable the block to be viewed on any gallery we create, as all galleries will be aliased under “photo-galleries/” (or whatever alias you used).
• Save the block
• Set the region of the block so it will display below your nodes. This will depend on the template you are using. In my case, it is a region called “content bottom”.
• Save the blocks page.

Hopefully now, you should have a few image galleries, each image gallery is viewed at the alias pattern we added, when viewing a gallery it has a large image with small thumbnails in jCarousel below to scroll through each images and your custom block view that will display each of your galleries with a thumbnail and title which you can click on to navigate through all your galleries. It probably all doesn't look too pretty at the moment, but with a little bit of CSS and modifying some the the image cache presets, you should get it looking the way you need it too and maybe a little bit like The Whitehouse's Gallery – http://www.whitehouse.gov/photogallery.

Thanks for reading my post! Let me know if you have any questions or get stuck and I will be glad to help you how I can.