Who love to Drupal

Creating a Photo Gallery in Drupal 6

Posted by drupallovers on March 30, 2012

This tutorial will show you how to create a photo gallery in Drupal 6.

It won’t create the world’s flashiest or most impressive gallery, but it will work. This tutorial is designed for beginners so that they can understand the key concepts behind creating a gallery in Drupal 6.

You will need to install and enable at least the five modules listed below. Several of these do depend on other modules so your final list of installed modules will be longer.

Step 1: Create a content type


Go to Administer > Content types > Add content type


Create a new content type called Photo Gallery.

Step 2: Add a Photo Field


Click Manage fields next to Photo Gallery and we’re going to add a photo field.

  • Label: Photo
  • Field name: photo
  • Type of data: File
  • Form element: Image

Click Save twice to create the field.

Step 3: Upload the photos


Go to Create content > Photo Gallery and upload the photos you would like in your gallery. Each photo will be it’s content item.

Go ahead and upload at least four photos so that we have something to work with.

Step 4: Creating the View

Go to Site building > Simple views > Add view.


Enter the following settings:

  • Title: Dog Photo Gallery
  • Path: dog-photo-gallery
  • Display: Photo Gallery posts
  • Sorted: Newest first
  • As a: List of titles

Click Submit when you’ve finished.

Step 6: Improving the view

Go to Site building > Views > click on Edit next to your new view which will be called simpleviews_1 if this is your first time using Simple Views.

Make sure to click Page on the left-hand side as in the image below:

Click on HTML List under Basic settings:
Choose Grid and click Update:

Set the number of columns to 2 on the next page.

Now we’re going to add the photo and caption. Click the plus icon next to Fields:

Check the box next to Content: Photo.

Click Add.

Set Label to None and set Format to Image:


Click Update.

Click the plus icon next to Fields once more.

Check the box next to Node: Body.


Click Add then you’ll see a Label field. Remove the text in that field.


Click Update.

Click Save at the bottom of the page make sure your changes aren’t lost.

Click View “Page” in the top-right corner to visit your Photo Gallery. It will look like the image below:


Those photos are clearly too big. We’ll need to fix them. That is why we also have the ImageCache module installed …

Step 6: Resizing the images



Click Add Resize enter the maximum height and width that you would like for the images on the main page of the photo gallery.

300 pixels wide and high might be a good choice to start with.


Go to Site building > Views > click on Edit next to your new view. Make sure you click Page on the left-hand side.


Click Save and visit your Photo Gallery. It will now look like the image below:


Step 8: Resizing the individual images

You can also create presets for individual photos so that they will not go over the edge of the page, no matter how big they are.

Go to Site building > ImageCache > Add new preset.

Create a new preset called individual photo.

Click Add Scale and set both the width to 700. That means that no photos will be wider than 700 pixels but they can be as high as necessary.

Click Save Preset.

Go to Content management > Content types > manage fields next to Photo Gallery > click Display fields at the top of the page.

Click on the Full node dropdown and choose the individual photo image that you just created. That will apply the 700 pixels maximum width to all of the photos when they are shown individually.

Click Save.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: