Published: July 23, 2014
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:
- Drupal 7
- Multi-upload File Field Widget (to allow your file fields to upload multiple files in one batch)
- Multi-upload Image Field Widget (to allow the above to upload multiple images in one batch)
- Colorbox
- Some rudimentary CSS
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.)