How to Create an Image Gallery in Drupal 7

It's not difficult. It really isn't, but people struggle over it. Lots. Let's see how 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:

Technique

  • 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, 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.

(Note: a version of this is available on Drupal.org.)

Filed Under:

  1. Drupal
  2. Drupal 7
  3. Image Gallery
  4. Drupal Tutorials
  5. Drupal Planet