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.

Modules

A views image gallery uses several modules. You can download and install all of these modules (and the modules they require) at /admin/modules/install.

Enable the following contributed modules...

  • Views - all purpose "reports" generator for Drupal
  • Chaos Tools - a tools library required by Views

...as well as these core modules:

  • Field
  • Image
  • File

Step 1a: Create Content Types

We need to create a new content type for images we put in our gallery.

  1. Browse to /admin/structure/types and create a new content type calledGallery Image.
  2. Add a field to the content type called My Gallery Image. This will allow you to upload an image when creating content.
  3. 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

  1. Browse to /node/add and add content using theGallery Image content type we just created
  2. Use the "My Gallery Image" field to upload one of the photos that you want in your gallery.
  3. Set any other settings as necessary and save the content.
  4. Repeat the steps above until you have loaded up 3 - 5 photos for dummy content

Step 1c: Create an image style for your thumbnail

  1. Go to /admin/config/media/image-styles and click Add Style to add a style named gallery_thumbnail.
  2. Add an effect of "scale and crop" (several other effects may work for you, so feel free to play with these settings)
  3. Set the width and height to be 150 pixels
  4. 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.

  1. Go to /admin/structure/views and click Add new view
  2. For the view name, call it "Photo Gallery"
  3. Set the view to Show Content of type Gallery Image sorted by Unsorted
  4. Check the box to Create a block (and uncheck the Create a page box if necessary)
  5. Name the block title "Photo Gallery"
  6. Set the display format to Grid of fields
  7. 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
    • Title: 'Photo Gallery'
  • Format:
    • Style: 'Grid'; Number of columns: '5'; Horizontal
    • Show: 'Fields'
  • 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)

Other Resources

Comments

nice tutorial ....
but we are looking for create views based on photo Directory? how to ....
plz give us short guide lines

Muhamed,

I'd be happy to help out, but I'm not sure I understand precisely what you are looking for. What modules are you using and what are you trying to create.

tk

- i'm trying to create photo gallery from images uploaded to specific directory in site.
- i have no problem of customizing page or adding fileds to conent and link views to content.

- my really problem how to link the uploaded directory to specific page and displaying images as gallery
- i'm using Drupal 7.

- i have many modules installed like lightbox2, Brilliant Gallery, Media and Media Gallery

i hope u understand me
tnx

OK, no troubles.

1.) Go to the Modules Page and make sure that Media and Media Gallery are activated. To make Media Gallery work you'll also need the Multiple Forms module (http://drupal.org/project/multiform or drush pm-download multiform).

2.) From the modules page, go to Media Gallery and click on "Configure." This will set up the format for the main gallery directory.

3.) You will now have a content type called "Gallery." To create a gallery, go to "Content/Add Content/Gallery." The "Create Gallery" form will open. Fill out the Title and Description fields. There are several controls here that allow you to control the layout and display.

4.) Click "Save," and it will open the empty gallery. Click the link marked "Add Media" to load your photos. You can add photos from your hard drive, a URL, or a batch that are already on your site. To d the latter, click the "Library" option on the "Upload New File" dialog box. A display will open showing the photos uploaded to your site. You can add multiple files at the same time by clicking on the files while holding down the Apple key. Click the "submit" button when you are done. The files will appear in your new gallery.

If anything is unclear, don't hesitate to ask.

tk

Nice thank u tooo really ....
i fully understand ur explanation and it exactly i looking for .....

when I go to Media Gallery and click on "Configure." sorry the error msg:

Notice: Trying to get property of non-object in taxonomy_form_term() (line 696 of C:\wamp\www\egov\modules\taxonomy\taxonomy.admin.inc).
EntityMalformedException: Missing bundle property on entity of type taxonomy_term. in entity_extract_ids() (line 7562 of C:\wamp\www\egov\includes\common.inc).

I'm really trying to fix this problem. Do u have any notes about this issuse?

too thanks
i have fix my problems and now media gallery work ....
it is nice tool to create image gallery
thank u too .

i can do that using views and add custom style to it, but my problem i have a lot of images on hard drive I'm thinking in solution that enable me to display images in gallery from uploaded directory to site. Do u understand me thomaske ?

but i unable to load images form directory ? how can i do that?

OK, check out SWFUpload, http://drupal.org/project/swfupload.

There is a detailed manual that explains how to set up the batch uploads, here drupal.org/files/issues/SWFupload.pdf.

tk

Hi,

I'm planning to create a website where viewers can upload their own images, which can be commented on by other viewers.

Can Drupal do this?

Thanks.
Ken

Absolutely. It's part of the basic functionality of drupal core. To be really brief: First, under Structure/Content Types/Add Content Type, create a content type that has a field for uploading images. On the content-type template, check the boxes allowing for comments. Then, under People/Permissions/Roles, create a role for your users that has the authority to upload photos, make comments and create the specific content type.

One thing you will probably want to add is some sort of system for alerting you to objectionable content. The Flag module can help with that.

tk

Thanks Thomas!

That helps a lot!

Will check in when I'm done.

Ken

As far as I understand, using "Format: Style: 'Grid';" will create that gallery as table? If this is right, how can I do it so, that every image is wrapped as div and still maintain the gallery like layout (for example 3 colums and multiple rows)?

This is a good article. Can we use the gallery images in articles ?

#11: You can change the wrapping markup for the grid style by overriding: views/theme/views-view-grid.tpl.php Copy this file into your site's theme folder. See the Theme: Information link in your View under Advanced for more override options.

#12: If you want to reuse images on your site you should look into the Media module. It will give you a library of uploaded images to choose from to use in your content instead just an upload form.

@MuhamedAuda: in case you haven't found a solution yet (and for future reference) the issue you're dealing with (in #6) is caused by NULL [empty] entries in the 'type' column of the 'file_managed' table in your database. This issue has been extensively reported in various places, including:
#1268378: Empty file type causes exceptions in Drupal 7.8
#1277376: EntityMalformedException: Missing bundle property on entity of type node. in entity_extract_ids() (line 7390
#1323244: EntityMalformedException: Missing bundle property after updating to OG 7.1.2
#1330882: EntityMalformedException : Missing bundle property on entity - after uninstalling modules providing reference fields
#1426820: Fix Notices and EntityMalformedException if FID is not in the file_managed database table
#1446440: Unable to view me media management pages (EntityMalformedException: Missing bundle property...)
#1724202: EntityMalformedException: Missing bundle property on entity of type file. in entity_extract_ids()

In simple terms, it's caused when you have media (images in particular) files referenced in your site prior to adding the Media collection of modules. Using the 7.x-1.x version of Media (et al) the pre-existing file records aren't updated in the 'file_managed' table of the db, and thus, the error is thrown and pages break. The Media 7.x-2.x version is [in process of] correcting this issue. In the meantime, to remedy this issue and get things back to normal, you can always run the db query posted by HongPong here in comment #11 namely:

UPDATE file_managed set type = 'application' where filemime = 'application/pdf' OR filemime = 'application/msword' OR filemime = 'application/rtf';
UPDATE file_managed set type = 'audio' where filemime = 'audio/mpeg';
UPDATE file_managed set type = 'image' where filemime = 'image/jpeg' OR filemime = 'image/png' OR filemime = 'image/png' OR filemime= 'image/gif';

Hope that helps.

Thank you so very much! It worked on v7, easy steps!!!

I've cross-posted this tutorial here (A Drupal 7 Image Gallery Tutorial) so I could continue to update it with images and links. I never was quite sure if this belonged in the Views issue queue in the first place.

I'm glad this has been helpful to a few of you.

This should probably be moved to the documentation, and closed..

edit

@bryanbraun: Probably the place to add the documentation to make it semi-offical, and edited by drupal.org users is as a child-page of https://drupal.org/node/431846

Issue summary:View changes
Status:Active» Fixed

Thanks @bryanbraun..

hi to all ,who can help me.

This is a great tutorial, it works great but......
In my views "Photo Gallery" the preview is displaying correctly the auto preview ( it's displaying the images in a grid)
but whem i open the Gallery page the photo's are displayed in a vertical line .
i can't find how to correct this, or is it a bug in drupal 7.23 ?
Can somebody give me some advice ,

Thanks a lot and greetz from Belgium

Status:Fixed» Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.