How do I create an image gallery in Drupal
Posted by on 12 February 2013 02:33 PM
Lightbox is an image gallery tool which can be used on a Drupal page, allowing images to be clickable and expand fullsize 'over' a webpage (see below).
Before you attempt creating a gallery page, you should ensure you're fully familiar with the related tutorials (see right) first. These will be referenced throughout this guide.
- Prepare all of the images and thumbnail versions you wish to use in your gallery. For optimum results when creating a lightbox, you should have two versions of each image created:
- A preview image - this will be used on the gallery page itself. If you're preparing images for the new DCU website (2013), we recommend that you crop your "preview" images to 210px wide by 115px high.
- A full-size version of your image to be appear when users click on the preview image. As this will appear full screen, it can be larger than the maximum image size recommended in the guide to preparing images. The filesize should however be no larger than 500kb so as to ensure that the image loads quickly.
- Log in to Drupal, create a new page in Drupal, or edit an existing page that you want to add a gallery to. Follow the instructions in the guides for those tasks.
- Upload and add the preview version of the first image in your lightbox gallery to your page using the WYSIWYG editor, following all the instructions laid out in the WYSIWYG guide. There are some additional settings you will need to set:
Click on the Appearance tab when you're adding the first image, and select one of the Lightbox classes from the Class dropdown menu. You should pick a class as follows:
These classes add the correct spacing and ensure that the images in your lightbox will align properly. You can also change the dimensions to make your preview images smaller and fit more on a row if you wish. For best results, all of the preview images should be set to the same dimensions as this will ensure they align properly in a grid.
- Lightbox-First for the first image on each row of images.
- Lightbox-Main for the middle images on each row of images.
- Lightbox-Last for the last image on each row of images.
- Once you have added each preview image, select the image in the WYSIWYG editor by clicking on it once, then click the Link button on the WYSIWYG toolbar. When the link box pops up, click the Media Library button (shown below).
- Upload the full-size version of your image as per the instructions in the WYSIWYG guide and select it as the file you wish to link to.
- Add a description of your image in the Title field under the General tab (shown below). This the caption text that will display underneath the full-size version of the image.
- Select Lightbox from the Relationship page to target dropdown under the Advanced tab (shown below)
- Click Insert.
- Repeat this process for each image you wish to add to your gallery. As long as you set class option correctly for each image (see step 3), the images will lay out correctly in grid.
- Ensure that your page has all other required fields filled out (see the guide How do I create a page in Drupal?) then click Save.