This tutorial describes step-by-step how to build a basic thumbnail based image gallery. The instruction is designed for Drupal site builders or admins with a basic understanding of Views and Fields. It assumes you are running Drupal 7.x and Views 3.x.
A views image gallery uses several modules. You can download and install all of these modules (and the modules they require) at
Enable the following contributed modules...
...as well as these core modules:
Step 1a: Create Content Types
We need to create a new content type for images we put in our gallery.
- Browse to
/admin/structure/typesand create a new content type calledGallery Image.
- Add a field to the content type called My Gallery Image. This will allow you to upload an image when creating content.
- Optional: remove any unnecessary fields like the body field. This content type only needs to be able to upload an image.
NoteFeel free to use use whatever names you like for these fields and content types
Step 1b: Upload some photos as dummy content
- Browse to
/node/addand add content using theGallery Image content type we just created
- Use the "My Gallery Image" field to upload one of the photos that you want in your gallery.
- Set any other settings as necessary and save the content.
- Repeat the steps above until you have loaded up 3 - 5 photos for dummy content
Step 1c: Create an image style for your thumbnail
- Go to
/admin/config/media/image-stylesand click Add Style to add a style named gallery_thumbnail.
- Add an effect of "scale and crop" (several other effects may work for you, so feel free to play with these settings)
- Set the width and height to be 150 pixels
- Update the effect
Step 2a: Create a Gallery View
To display images in a Gallery we will create a view that displays every piece of content you have published under the Gallery Image content type.
- Go to
/admin/structure/viewsand click Add new view
- For the view name, call it "Photo Gallery"
- Set the view to Show Content of type Gallery Image sorted by Unsorted
- Check the box to Create a block (and uncheck the Create a page box if necessary)
- Name the block title "Photo Gallery"
- Set the display format to Grid of fields
- Set to 10 Items per page, check to use a pager and click save and exit
Step 2b: Views Configuration
We'll have created a view with a block display and now we need to ensure that all our settings are correct.
First, locate the view in your list of views and click the link to edit it. Make sure your settings match those listed below:
- Display name: 'Photo Gallery'
- Title: 'Photo Gallery'
- Style: 'Grid'; Number of columns: '5'; Horizontal
- Show: 'Fields'
- Content: 'My Gallery Image'; Formatter: 'Image'; Image style: 'gallery_thumbnail'; Link image to: 'content'
- Filter Criteria:
- Content: 'Published (Yes)'
- Content: 'Published or admin'
This criteria ensures that a photo won't appear in the gallery unless the photo has been properly uploaded and publish as part of your Gallery Image content type.
Save the view.
Step 3: Test your setup
Now scroll to the bottom of your view configuration page and check the Auto preview checkbox. If your gallery is being properly displayed in the region below, then you did it! Just navigate to the blocks page, and enable the block to see how the view looks on your site.
Step 4: What's next?
You can do a lot to customize your gallery. Here are some options:
- Change the pager settings for your view (determines the default number of thumbnails in your gallery)
- Style the view output for your view using CSS
- Change Image styles to change thumbnail size or image scaling/cropping in the thumbnail
- Uploading more images
- Allow rating of images (using modules like Voting API, Fivestar, Plus1)
- Views Gallery module by KarenS
- a module for a similar display with hard-coded content types