On this page
How to Create an Image Gallery in Drupal
Last updated on
25 January 2018
Drupal 7 will no longer be supported after January 5, 2025. Learn more and find resources for Drupal 7 sites
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:
- 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 (make sure you have Libraries installed)
- 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 (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.
Help improve this page
Page status: No known problems
You can:
You can:
- Log in, click Edit, and edit this page
- Log in, click Discuss, update the Page status value, and suggest an improvement
- Log in and create a Documentation issue with your suggestion