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

CommentFileSizeAuthor
#24 gallery.png703.98 KBpriyankprajapati
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

MuhamedAuda’s picture

MuhamedAuda CreditAttribution: MuhamedAuda commented

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

thomaske’s picture

thomaske CreditAttribution: thomaske commented

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

MuhamedAuda’s picture

MuhamedAuda CreditAttribution: MuhamedAuda commented

- 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

thomaske’s picture

thomaske CreditAttribution: thomaske commented

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

MuhamedAuda’s picture

MuhamedAuda CreditAttribution: MuhamedAuda commented

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?

MuhamedAuda’s picture

MuhamedAuda CreditAttribution: MuhamedAuda commented

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?

thomaske’s picture

thomaske CreditAttribution: thomaske commented

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

buzz64’s picture

buzz64 CreditAttribution: buzz64 commented

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

thomaske’s picture

thomaske CreditAttribution: thomaske commented

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

buzz64’s picture

buzz64 CreditAttribution: buzz64 commented

Thanks Thomas!

That helps a lot!

Will check in when I'm done.

Ken

peksipatongeis’s picture

peksipatongeis CreditAttribution: peksipatongeis commented

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)?

tanmoydeb’s picture

tanmoydeb CreditAttribution: tanmoydeb commented

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

drupalmonkey’s picture

drupalmonkey CreditAttribution: drupalmonkey commented

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

paskainos’s picture

paskainos CreditAttribution: paskainos commented

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

MutterHorn’s picture

MutterHorn CreditAttribution: MutterHorn commented

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

bryanbraun’s picture

bryanbraun CreditAttribution: bryanbraun commented

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.

naught101’s picture

naught101 CreditAttribution: naught101 commented

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

yosisays’s picture

yosisays CreditAttribution: yosisays commented

edit

naught101’s picture

naught101 CreditAttribution: naught101 commented

@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

Binu Varghese’s picture

Binu Varghese CreditAttribution: Binu Varghese commented
Issue summary: View changes
Status: Active » Fixed

Thanks @bryanbraun..

LGA’s picture

LGA CreditAttribution: LGA commented

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.

tohid66’s picture

tohid66 CreditAttribution: tohid66 commented

hi programmers :)

i want to user can add her or his image on website , and admin can see the uploaded image and let to display on user profile gallery or discard the image (only accepted image by admin will show on user profile), how can i do this please help if you have any idea..

thanks

priyankprajapati’s picture

priyankprajapati CreditAttribution: priyankprajapati commented
Title: How to create a Views based image gallery » How can I remove the grid line
Priority: Normal » Critical
Status: Closed (fixed) » Active
Issue tags: -Novice +CSS, +css3, +#css, +Grid
Parent issue: » #2492485: Style results as columns or grid
Related issues: +#2499451: Style and view mode not changing
FileSize
gallery.png703.98 KB

HI i have create a image gallery using the grid view in views.My question is how can I remove the grid on my image gallery? I tried but I did not found any solution. So can you help me for that ?

bryanbraun’s picture

bryanbraun CreditAttribution: bryanbraun as a volunteer commented

@priyankprajapati,

The gridlines appear because your CSS styling is defining a border on the table that makes up the structure of this gallery. You can typically remove this border with a css rule:

td {
  border: none;
}

You may need to make the rule more specific in order for it to take effect.

naught101’s picture

naught101 CreditAttribution: naught101 commented
Title: How can I remove the grid line » How to create a Views based image gallery
Priority: Critical » Normal
Status: Active » Closed (fixed)
Issue tags: -CSS, -css3, -#css

Please don't change the title just to make a comment. Make a new issue for your problem instead.

fkelly12054@gmail.com’s picture

fkelly12054@gmail.com CreditAttribution: fkelly12054@gmail.com as a volunteer commented

As many have said, thanks. I have the basics working to upload and view images one by one, and even view them from a menu link. Cool.

However, trying to follow:

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

I have Media installed. Going over to look at Media Gallery, I see it is BETA (BIG WARNING LETTERS) and as of mid-October 2015 it seems to have a lot of outstanding issues, though hopefully it seems to also be under active development. I'm not interested in jumping into the middle of that, especially with the warning they give to make sure you have your database frequently backed up.

Too bad. Both the other Gallery related modules I've tried (Plus Gallery and Brilliant Gallery) seem to be in a permanent Beta quality state too with no consistent developer support.

fkelly12054@gmail.com’s picture

fkelly12054@gmail.com CreditAttribution: fkelly12054@gmail.com as a volunteer commented

Now (December 2015) trying this with newly installed 8.0.1. Following instructions for creating the view, I don't seem to get a block created. So, when I go to admin/structure/block layout there is no Photo Gallery block defined that I can do anything with.

I can see a preview of the block when editing the view, the images appear okay. Except they are rotated. Strange since I know the original jpg files are not rotated.

RupaliPatil189’s picture

RupaliPatil189 CreditAttribution: RupaliPatil189 commented

hii im new in drupal.so,if i want to retrive the image along with other information in webform and arrange it in grid that are submitted through webform.then how i can do this??please tell me the solution.

DamienMcKenna’s picture

DamienMcKenna
Location NH, USA
CreditAttribution: DamienMcKenna at Mediacurrent commented

@RupaliPatil189: Please open a new issue rather than posting a comment on a random issue.

Summit’s picture

Summit CreditAttribution: Summit commented

Hi, this great tutorial with these posts
- https://www.ostraining.com/blog/drupal/photo-gallery-drupal-7/
- https://www.drupal.org/forum/support/post-installation/2013-06-08/in-vie...
make sit for me possible to build a grid of 4 images, and have the images link to the content I want within views. Thanks!

greetings, Martijn