Creating A Photo Gallery

Adding images in Drupal gets easier with every new Drupal release, and Drupal 7 makes it positively child's play. Image styles, introduced in Chapter 6, "Content," automatically create thumbnail, preview, and large versions of uploaded images. Views can then pull these images and display them in a 3x3 grid, 4x4 grid, vertically, horizontally, or in nearly any manner you can dream of.

Follow along in the next two exercises to create a photo gallery like the one shown in Figure 11-27. In the first exercise, you create a new content type: Photo. Creating content types is covered in Chapter 6, so this exercise provides only the high-level steps. In the second exercise, you create your gallery.

Creating a Photo Gallery | 223

FIGURE 11-27


Creating a New Photo Content Type

In this exercise, you create a new content type named Photo and add an Image field to it so that users can upload photos.

1. Navigate to Structure C> Content Types and click Add Content Type.

2. Enter or set the following information and then click Save Content Type: Submission Form Settings

^ Title Field Label: Photo caption ^ Body Field Label: Leave this field blank ^ Preview Before Submitting: Disabled Publishing Options > Published

^ Leave all other options unchecked

3. Add a new Image field to the Photo content type, as shown in Figure 11-28. Accept the field's default settings.

How It Works

The base foundation of any photo gallery is a photo, and an image field provides the ability to get images into Drupal. Creating a new content type specifically for photos allows you to expand upon the fields of the photo to add items such as photo credit, categorization tags, exit data, and so on.

Now that you have a new content type for photos, take a few minutes to upload some photos before moving on to creating the photo gallery in the next exercise.

Creating the Photo Gallery

In this exercise, you create a view to display the image fields of your Photo content type in a 4x4 grid.


Navigate to Structure C> Views, click Add at the top of the page, and type in the following information:

View Name: photo_gallery View Description: My wonderful photos View Tag: photos, gallery

View Type: Node Click Next and add the following filters: ^ Node: Type: One of Photos > Node: Published: Yes Add the following sort criteria: ^ Global: Random Set the following Style Settings:

^ Set the Number Of Columns to 4 and the Alignment to Horizontal as shown in Figure 11-29.

5. Under Basic Settings, set the following:

^ Items To Display: 16 (4 across and 4 down is 16) ^ Use Pager: Full pager

6. Under Fields, add the Node: Photo field. Set the Label to None and the Format to thumbnail image as shown in Figure 11-30.

7. Add a Page display, and then with the Page display selected, set the Path to /gallery as shown in Figure 11-31.

8. Save your view.

How It Works

The magic of this view lies in just three settings: the Row Style set to Fields, the Style set to Grid, and the Photo Fieldset to use an Image style. Drupal 7's built-in Image styles automatically resize the images, allowing you to quickly create a gallery that matches your website.

NOTE The Lightbox2 contributed module ( lightbox2/) provides a very nice pop-up enlargement of an image. After you install and enable this module, you can revisit the Photo field's options and direct views to use Lightbox for the enlarged view.

Page settings

Path: gallery Menu: No menu

Page: The menu path or URL tii this view

http://localhost/ gallery

This view will be displayed by visiting this path on your site. You may use 'V in your URL to represent values that will be used for arguments: For example, 'nodeĀ”%lfeed".

Update Cancel

FIGURE 11-31

The Style Settings of a view are quite powerful and allow you to format your site's output in numerous ways. Contributed modules can also extend views by adding in new Styles. The Views Slideshow contributed module ( is an example of this. It provides a method to create a slideshow out of your photos. In fact, you could add it to your Gallery view to create a nice automatically rotating slideshow of your photos.

Your journey through views is just getting started. The next section teaches you how to leverage arguments so you can extend your photo gallery to provide per-user photo galleries.

Make Money Writing

Make Money Writing

This Report Will Show You How To Make Money By Providing Writing Services To Other Internet Marketers. Learn how to make money by writing the right way. Grab your copy of this report now and learn. Why writing is a great way to earn money. How to compete with cheap writers, even if you charge a lot more money.

Get My Free Ebook

Post a comment