Chittibabu

In this tutorial, we're going to walk you through the process of setting up a photo gallery system in Drupal; in the process, we're going to take a fairly close look at the Drupal CCK and Views modules.

Prerequisites

1. This tutorial makes use of a couple of Drupal modules that are not installed by default in the CWS Drupal distribution (imagecache and imagefield); if you'd like to use this functionality, just let us know and we'll install the extra modules for you.

Creating the Photo Content Type

First, you're going to need to set up a special content type allowing photo uploads. We've covered the basic content type creation process in another tutorial, so here we'll focus mainly on setting up the image upload field.

1. Create a new content type called "Photo".
2. Then, find your way to its "Manage fields" page.
3. Under "New field", fill in the appropriate values to create a new field called "Photo". For "Type", select "File"; for "Element", select "Image". Click "Save" to continue.
4. On the following page, you can fine-tune the required characteristics of uploaded images; for instance, you can set minimum/maximum resolutions, filename extensions, and so on.
5. Under "Path settings", enter "photos" to help keep your uploaded files organized.
6. Under "ALT text settings", you can set up rules governing the text that will be displayed if your uploaded image cannot be viewed. This is extremely important for accessibility compliance; at minimum, you should check the "Enable custom alternate text" box, and also enter a sensible default for "Default ALT text": for example, "Photo contributed by [user-name]."
7. Under "Global settings", check the "Required" box to make sure that every Photo node has an uploaded photo.
8. Click "Save field settings" to continue.

Organizing your Photos

Photo sharing sites typically allow photos to be organized via at least two different facets: galleries and free tagging. We'll set up both of these facets using Drupal's built-in taxonomy module.

1. In the menu at the top of the screen, choose "Content management > Taxonomy".
2. First, we'll set up gallery categorization.
   1. Click "Add vocabulary"; vocabularies in Drupal taxonomy are simply collections of related words describing a particular content facet.
   2. Under "Vocabulary name", enter "Galleries".
   3. Under "Content types", check "Photo".
   4. Under "Settings", check "Required"; this will force every photo to be placed into a gallery when it is created.
   5. Click "Save".
3. To add a new album, you'll need to add a new taxonomy term to the vocabulary:
   1. Click "list terms" next to Galleries in the list of vocabularies.
   2. Click "Add term".
   3. Enter the name of your gallery in the "Term name" field.
   4. Click "Save".
4. Next, we'll set up free tagging. If you've already been through our Drupal First Steps tutorial, all you need to do here is make sure that your tagging vocabulary can be used on the Photo content type. If you haven't set up free tagging yet, here are the steps:
   1. Click "Add vocabulary".
   2. Under "Vocabulary name", enter "Tags".
   3. Under "Content types", check every type of content you'd like to be able to tag.
   4. Under "Settings", check "Tags" and "Multiple select".
   5. Click "Save".

Generating Thumbnails and Preview Images

Digital images come in all different shapes and sizes, which can often lead to unfortunate inconsistencies in how they are presented on the web. Fortunately, the Drupal ImageCache module provides all the flexibility you'll need for controlling the appearance of your galleries; ImageCache allows you to configure a variety of image manipulation "presets" to automatically process your uploaded images. Let's set up two presets, one for thumbnail images in the gallery view, and another for a slightly larger preview when the image is clicked.

1. In the menu at the top of the screen, choose "Site building > ImageCache".
2. First, we'll create the thumbnail preset. Thumbnails, in our example, will need to be scaled and cropped down to fit in a 120x120 pixel square; this will make it really easy to set up our gallery view later on.
   1. Click "Add new preset".
   2. Under "Preset namespace", enter "thumbnail"; then, click "Create New Preset".
   3. Under "Actions", click "Add Scale and Crop".
   4. Enter "120" for both "Width" and "Height"; then, click "Add Action".
3. Next, we'll create the preview preset. We'll use this preset when the photo is viewed on its own page, so really the main constraint is that it should be no wider than we expect the browser to be. 400 pixels is a good rule here.
   1. From the "Site building > ImageCache" page, click "Add new preset".
   2. Under "Preset namespace", enter "preview"; then, click "Create New Preset".
   3. In this case we only need scaling, not cropping; so click "Add Scale".
   4. Under "Width", enter "400".
   5. Empty out the "Height" field; we want ImageCache to generate the image's height automatically so that the image's aspect ratio remains consistent.
   6. Click "Add Action".
4. Now that the appropriate image manipulation presets are set up, we need to tell Drupal to use them as appropriate in our Photo content type. In the menu at the top of the screen, choose "Content management > Content types > Edit Photo > Display fields".
5. Under "Teaser", choose "thumbnail image linked to node". This will cause Drupal to use the thumbnail preset whenever your image node is displayed in the shortened "teaser" mode.
6. Under "Full node", choose "preview image linked to image". This will cause Drupal to display the preview image when your image node is viewed by itself, and allow the user to click to see the full, unmodified image.
7. Click "Save".

Uploading your First Photo

Now that the content type is set up, you might want to give it a spin to see how the upload form works. As it turns out, uploading a photo is now as easy as creating any other Drupal node:

1. In the menu at the top of the screen, choose "Content management > Create content > Photo".
2. Fill out the form as usual, providing a title and (optionally) a description.
3. You should also see your image upload field somewhere in the form; if you didn't change the order of the fields in your content type, it should show up just below the body field. Upload your image by browsing to it on your computer and clicking the "Upload" button.
4. Click "Save" to submit your new photo node.

You may want to upload a few more photos before continuing on with the tutorial; it'll be easier to set up the gallery view if you've got some live content to work with.

Creating a Gallery View

Once you've got your basic content type set up, it's time to tell Drupal how to generate each photo gallery. To do this, we'll set up a Drupal View that collects all the photo nodes in a particular gallery and displays them in a clean, organized grid.

Initial Setup

1. In the menu at the top of the screen, choose "Site building > Views > Add".
2. Under "View name", enter "gallery".
3. Under "View description", enter "Gallery".
4. Under "View type", choose "Node".
5. Click "Next".

Filtering for Photos

By default, a new node-based View will show all content nodes on your site, regardless of type. To fine-tune this, we'll set up a filter so that only Photo nodes are displayed:

1. Click the "+" sign in the "Filters" block.
2. In the form that appears just below the main interface, check "Node: Type"; then, click "Add".
3. On the next page, make sure that "Operator" is set to "Is one of", and check "Photo" under "Node type"; then, click "Update".

There are a couple of additional filters worth setting up, one for ensuring that the photos displayed have a gallery term, and the other for ensuring that the photos displayed have been officially published.

1. Click the "+" sign in the "Filters" block.
2. In the form that appears just below the main interface, check "Taxonomy: Vocabulary"; then, click "Add".
3. Make sure that "Operator" is set to "Is one of", and check "Galleries" under "Options"; then, click "Update".
4. Click the "+" sign in the "Filters" block once more.
5. In the form that appears just below the main interface, check "Node: Published"; then, click "Add".
6. Choose "Yes"; then, click "Update".

Limiting the View to a Single Gallery

So far we've filtered our View down to display just Photo nodes; that's a good start, but what we really want is to display just Photo nodes from within a single gallery. We could set this up as another filter, but that wouldn't give each gallery its own URL; instead, we're going to set up a URL argument.

1. Click the "+" sign in the "Arguments" block.
2. In the form that appears just below the main interface, check "Taxonomy: Term"; then, click "Add".
3. On the next page, enter "%1" for "Title"; this will cause Drupal to use the name of the gallery as the title of the view.
4. Under "Action to take if argument is not present", check "Summary, sorted ascending".
5. Under "Validator", choose "Taxonomy term".
6. Under "Vocabularies", choose "Galleries".
7. Under "Argument type", choose "Term name or synonym".
8. Click "Update" to finish creating your argument. You may need to click "Update" several more times to accept the default settings for the View summary.

Telling Drupal What to Display

Now that we've got the content selection process taken care of, we'll need to tell Drupal how each Photo node ought to be displayed in the View. All we're really interested in here is the thumbnail image, so we'll just set up a single field for that:

1. Click the "+" sign in the "Fields" block. (nb: if there is nothing to click, make sure that 'Row Style' is set to 'Field' in the Basic Settings section)
2. In the form that appears just below the main interface, check "Content: Photo (field_photo)".
3. On the next page, check "Link this field to its node".
4. Under "Label", select "None".
5. Under "Format", choose "thumbnail image linked to node".
6. Click "Update" to finish creating your field.

Telling Drupal How to Display It

Per the stated requirements, we're going to want to set up a simple grid displaying each photo's thumbnail; here are the settings:

1. In the "Basic settings" block, click the "Unformatted" link next to "Style".
2. In the form that appears just below the main interface, choose "Grid"; then, click "Update".
3. On the next page, you can make a few modifications to the default grid settings if you wish; when you're finished, click "Update" once more.

You may also want to configure the number of items displayed on each page of your View by modifying the "Items to display" and "Use pager" settings; the latter is especially important if you expect your galleries to contain more items than you configure the view to display.

Telling Drupal Where to Display It

We're almost done; all that's left is to assign our new View a page display and give it a URL.

1. In the leftmost column of the Views interface, select "Page" and click "Add display".
2. In the "Page settings" block, click the "None" link next to "Path".
3. In the form that appears just below the main interface, enter the URL path where your galleries should live; for example, "galleries". Click "Update" to finish setting up your path.
4. In the "Page settings" block, click the "No menu" link next to "Menu".
5. In the form that appears just below the main interface, you can set up a menu item for this view. Check "Normal entry" and enter "Galleries" in the "Title" field; configure the remaining fields just as you would any other Drupal menu item.
6. Click "Save" to finish setting up your View.

And that's about it! At this point, any time you'd like to add a photo, all you need to do is create a new photo node; similarly, any time you'd like to add a new gallery, you just need to add a new term to the Galleries vocabulary.