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.

carogllanos’s picture

Hey, pretty new to drupal. I followed the directions but when I click multiple files to upload only one shows up after uploading. How do I get them all to show up?

markconroy’s picture

Hi Carogllanos,

Without more information, I'm not sure I can give you an answer. If you followed the instructions, it should work - that was the point of them :-)

Your issue might be with your server that it only allows you to upload 1 file at a time. It might be because you don't have the multi-upload file field widget enabled, or the multi-upload image field widget enabled (or you have the latter enabled but not the former). Or on the field settings you may have selected single upload instead of multi upload.

If you can provide more details, I might be able to help debug it a bit better.

manarak’s picture

Hello, thanks for the how-to.
I guess by using an entity reference field, the galleries can be attached to other nodes.

I would like to display the first picture of the referenced gallery as a display field in the parent node. How can I do this?

markconroy’s picture

One simple way of doing it would be to create a new field called "Album Cover" and use that as the field that is used for listing pages or entity reference pages.

manarak’s picture

hi mark

thanks for your reply.
I didn't quite understand what you meant with "use that as the field that is used for listing pages or entity reference pages"
can you please elaborate?
what type of field do I need to put into the parent node for it to automatically display the referenced gallery's first picture?

markconroy’s picture

An image field.

manarak’s picture

okay, and how do I get that image field to display the first picture of the gallery?

markconroy’s picture

Upload the first picture of the gallery to it. Like I said above, it's just a quick and simple solution.

manarak’s picture

Thank you mark for trying to be helpful, but this is an obvious and tedious manual workaround and doesn't answer my question of how to do it automatically.
The user will upload pictures and then re-arrange them manually with drag & drop, but I want the parent node to update automatically with any changes and I also want the first/main picture of the gallery to be available in other content when the parent node is referenced.
I likely will have thousands of galleries and I want that behavior to be automated.

markconroy’s picture

Well, like I say, it's just a quick a simple solution I was offering. I haven't been working with Drupal 7 for the past 6 months so don't have the time to write up what you need to do. As well as that, this post is about how to create a gallery, not how to embed that gallery in myriad ways.

Perhaps something in a preprocess hook for hook_preprocess_node() that says if view_mode == 'teaser' then $variables['content']['insert_name_you_want_here'] = $variables['content']['field_gallery_images'][0];

Sorry can't be more helpful.

manarak’s picture

thank you mark for your help