Last updated September 18, 2015. Created on December 8, 2013.
Edited by nevets, jumeiraconsultants, legovaer, mrP. Log in to edit this page.

Here is one way to to make an image gallery in Drupal 7 (the same theory will hold for Drupal 6 and, I presume, Drupal 8). This will create an "Image Gallery" content type, with images within each gallery re-orderable by 'drag and drop'. Here we go.

You will need:


  • First off, enable the modules listed above.
  • Then we need to create a content type. In this case, we'll call it "Image Gallery".
  • Next, we need to create an image field inside this content type.
    • Choose "Image" as the field type and "Multiupload" as the widget type.
    • Set the number of allowed values for this field to "Unlimited".
  • Create some image presets (admin/config/media/image-styles), such as:
    • Gallery Thumbnail (150px x 150px) - used on the gallery page to list the images in that gallery.
    • Gallery Full Size (1000px wide) - used in an overlay when Gallery Thumbnail images are clicked on.
  • Go to your "Manage Display" page for this content type and for "Full Content" set the following displays for the image field
    • Label = Hidden
    • Image = Colorbox
      • On the colorbox settings, set "Content Image Style" as "Gallery Thumbnail" and "Colorbox Image Style" as the "Gallery Full Size"
      • There are some other options here as well. Feel free to experiment.
      • Click "Update".
    • Click "Save".

Now you are ready to create an image gallery. You may need some CSS to float the images left/right and set some margins/padding.

You can then use Views to list the galleries and link each item in the list to its corresponding gallery.

Looking for support? Visit the forums, or join #drupal-support in IRC.


magin1’s picture

Create some image presets, such as:

Where can you do this? what screen?

markconroy’s picture

You can do this at the Add Image Styles page,
Admin >> Configuration >> Media >> Image Styles >> Add

benoitemiel’s picture

This worked great for me.
Only if I watch the link for the album, I see a overview of all the photos listed one per row.
How could I for example make a five by five grid?

markconroy’s picture

That's where you'll need to add in some CSS.

.field-field-name img {
  float: left;

Or something like that.

evaldez’s picture

where do i go to change the CSS so that I don't just have 1 image on each row? I want the images to be in a grid

alhena’s picture

It doesn't work if multiple images are in field collection. does it?

zoeblue8’s picture

i select the images and press "upload". if i select more than 10, i erases the images i already uploaded and upload nothing. if i upload 10 images at a time its okay.


markconroy’s picture

I've a vague recollection that I had issues trying to upload more than 20 images in one batch, but as far as I can remember that was a setting from my server rather than the module.

gobnat’s picture

Ok it works except I can find no way to hide the labels and title.

Even when I turn them off in the content type they remain stubbornly on...

I usually control such styling issues directly in my views by showing content as fields and then over-riding the fields template for the view but the only way I can get colorbox and the views behaving properly - that is using the overlay rather than going through to a specific page for each image first is to use the "full content" setting but this always seems to render the title and labels for the image...

Edit: nvm have fixed the issue by overriding the node--[contentype].tpl.php

markconroy’s picture

You might need to check the "manage display" settings for your content you're.

aww’s picture

Hi Mark,

Is there a way to set a caption/description/alt on a per image basis?

Your insight is greatly appreciated!

aww’s picture

OK, I answered my own question:

Field -> Edit -> Allow Alt & Allow Title.