Start a FREE 7 day trial! Get training videos and books, plus expert support:  

Drupal Tutorials and How-to Support Articles

Creating a Photo Gallery in Drupal 7

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

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 7.

If you're still using Drupal 6, we have a tutorial for you also.

Step 1: Install modules

You will need to install and enable the only modules listed below:

Step 2: Create a content type

First, we're going to set up a photos content type. Go to Structure > Content types > Add content type and create a new content type to use for the photo gallery.

tutuploadsmedia_1331060256061.png

Step 3: Add a Photo Field

Now we're going to add an image field to our new content type so that we can actually upload photos. Go to Manage Fields and create a field using the Image data type.

tutuploadsmedia_1331060521185.png

Step 4: Upload the photos

There's a variety of ways to to upload enough photos to fill a photo gallery.

tutuploadsmedia_1331060694984.png

Step 5: Create the View

Go to Structure > Views > Add new view and let's set up the view:

  1. Give your view a name such as Photo Gallery.
  2. Choose to show Content of type Photos.
  3. Check the create a page box.
  4. Choose the Grid display format and choose fields.
  5. Choose a number that will work well in a grid: 12 is the example used here.
tutuploadsmedia_1331060923047.png

Click Continue & edit.
Scroll down and you'll see a preview of your photo gallery. The only thing missing? Photos.

tutuploadsmedia_1331060942549.png

Step 6: Improve the View

Let's go and add the photo to our view. Click add next to Fields.

tutuploadsmedia_1331060960346.png

Search for and select the photos field that you created earlier.

tutuploadsmedia_1331062354345.png

Click Apply (all displays) twice. Now your preview at the bottom of the page will look like the image below. The only thing wrong now is that the images are all different sizes.

tutuploadsmedia_1331061075586.png

Step 7: Resizing the Images

Drupal comes with a way to automatically resize images. Let's see how.

  • Go to Configuration > Image styles > Add style.
  • Enter a name of your new resizing option.
  • Click Create new style.
tutuploadsmedia_1331061159450.png

You'll now see a preview of the image resizing. Currently nothing is happening.

tutuploadsmedia_1331061180084.png
  • At the bottom of the page, choose Scale and crop.
  • Click Add.
tutuploadsmedia_1331062529803.png

Choose how wide and high the photos will be. In our example we have four photos across the page, so we'll choose a width that will allow us to fit four photos in. Click Add effect to finish.

tutuploadsmedia_1331061232609.png

You'll now see a fresh preview of the image resizing.

tutuploadsmedia_1331061251914.png

Now let's go and apply the resizing to our photos.

  • Go to Structure > Views > Photo Gallery > edit.
  • Click Settings next to your photos field. You can now go to Image style and choose the style that you just created.
  • You might also want to uncheck the Create a label box so that the field name doesn't show.
  • Click Apply (all displays).
tutuploadsmedia_1331061400126.png

Click Save to finish your view and go to visit it on the front end of your site. Voila! Your Drupal 7 photo gallery is complete.

tutuploadsmedia_1331061620284.png

 

Start a FREE 7 day trial! Get training videos and books, plus expert support: