Image Gallery Tutorial: Images Belong to Multiple Galleries

I did a Google search recently to see how people were creating image galleries in Drupal. I found several options but none did what I needed. So I combined strategies offered by those who have shared before me and came up with a way to have two image gallery displays automatically appear on the gallery page AND allow images to belong to multiple galleries. Let's see how it's done.

Requirements

When you start any project, no matter how small, it is good to have a plan. Here are the requirements that created the need for the recipe below.

  • Create different galleries on the fly
  • Images can belong to more than one gallery
  • Give the user the option view all images in the gallery without having to leave the gallery
  • Allow the user to click an image to get the full image story and details
  • Show both a single slideshow and a grid on the same page
  • The slideshow and grid should have their own pagers
  • Have a menu that automatically updates when a gallery is added

Here is a simple wireframe of what we hope to accomplish.

Create Content Types

Create two content types with the following recipe.

Gallery

This is your basic content type. Configure it anyway you want but the following default fields are suggested.

  • Title
  • Body (for the description of the gallery)

Note: two node content fields will be added to this CT when you create the View

Gallery Image

This is the content type where you will add your images.

  • Title
  • Image upload created using CCK Imagefield
  • Image caption created using CCK Text field

Other fields to consider include

  • Photographer created using CCK Content taxonomy field
  • Date Taken created using the CCK Date field
  • Full Story Behind the Image created using the default Body

Create a Vocabulary

Create a vocabulary called gallery with the following settings.

  • Content types: gallery and gallery image
  • Tags: checked yes
  • Multiple select: checked yes

The free tagging option allows you to create the gallery to gallery image relationship tool on the fly. The multiple select allows you to assign the gallery image to multiple galleries.

Create Imagecache Presets

Set up two presets.

  • slideshow size (maybe scale to 450 pixels wide)
  • grid thumbnail size (maybe scale to 75 pixels wide)

Create a View

Create a view with two node content displays. At this point I am assuming you know how to create a view. There are many tutorials out there that show you how to create different types of views.

Filters

  • Node: Type Gallery image
  • Node: Published yes

Argument

  • Taxonomy: Term ID
  • Action to take if argument is not present: select Provide default argument
  • Default argument type: PHP code
    $node=node_load(arg(1));
    if($node->taxonomy){
    foreach($node->taxonomy as $term){
    if ($term->vid = = 7) { //where 7 is replaced with the vocabulary ID assigned to your gallery vocabulary//
    $terms[]=$term->tid;
    }
    }
    }
    if ($terms) { return implode('+',$terms); }

Add two Node Content Displays

For this next step I used Views Attach. Mustardseed has a video that shows several features, one being views attach, if you want to take a look: http://mustardseedmedia.com/podcast/episode37. I chose not to use the node reference feature Bob discusses because I wanted Gallery images to be assignable to multiple

Slideshow display

For this specific recipe to work, you need the Views Slideshow module. Create a slide show display. Set up fields for the slide show using the override feature because you don't want the same field configuration for the grid display. I recommend changing the default Name and Title in the Basic Settings so you can distinguish between the two node content displays.

The fields I used were the image field and caption from the Gallery Image content type. You could include other Gallery image content such as date or photographer if you wanted that to show under or above the image in the slideshow.

Mustardseed has a tutorial on slideshow. http://mustardseedmedia.com/podcast/episode42

Grid display

I experimented with using the technique that Bob demonstrated in episode42 but I found that if the gallery had many images and some where portrait and some were landscape, the screen did not layout nicely. So I decided to go with two view displays. The grid display simply allows the user to see all the images in the gallery and if there are many images, I can include a separate Ajax pager so users can scan the images without leaving the gallery.

Create a Gallery Menu

Now that you can create galleries on the fly, you will probably want a way for your menus to update "on the fly" as well. One way to do this is to create another view. The most common view is a block with a list of node titles that are links.

Filter

  • Node: Type Gallery
  • Node: Published yes

Fields

  • Node: Title (without a label and check "Link this field to its node")

Display

Add a block display. Depending on how many galleries you will have listed, you might want to configure the basic settings to allow for a pager using Ajax and Pager. If you choose to use More link, you will need to add another display called Page.

Results (without theming)

The image below illustrates the gallery once built. It needs a little theming but I assume you get the idea.

Conclusion

I made several assumptions in the recipe above, just like a cook does when they write out their recipes. I assume you can locate, install, and configure modules. I assumed you know how to build views. I assumed you know how to create content types with custom fields.

If you need more details on how to work with modules, content types, and views, Google searches can yield many tutorials. Or you can take some training (facilitated, self-paced, or classroom) at http://planningdrupalsites.com/training and learn the basics of what you need to know in order to follow this recipe. Happy Drupaling!