Last updated June 18, 2014. Created on December 8, 2013.
Edited by mrP, acabouet, danovadia, drupalshrek. 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?