Image Galleries


An image gallery will display a set of small images (thumbnails) that can be clicked or scrolled through one at a time. Any image can be clicked to launch a full-size rendering of that image. 
 

  • Image galleries are content nodes that you can put into any pane on any page
  • Image galleries can be used to create slideshows

To create an image gallery

Click on Add Content

add content image

On the left, click on Image galleries option

image galleries widget image

Title the gallery and add a description if you want. The title field of gallery is required.

gallery description image

Begin adding images by clicking on the Attach media Browse button.

  • Only one image at a time can be uploaded
  • Gallery images larger than the maximum size will be automatically downsized
  • Images are also resized to fit within the maximum allowed dimensions of 1600x1200 pixels
  • Gallery page has thumbnails by default
  • Gallery page can be hidden, but with the URL it is always visible

Attach media image

Continue using the Browse button to add additional images to the gallery. You can add images from your local computer or the Library.

Upload locations image

Once several images have been added, you can use the Drag to re-order slider to change the order of the images in the gallery. You can also click on the Edit button or the Remove button for each image.

Edit gallery image


Displaying one gallery

Create a Basic Page and add the gallery to the page within a panel. 

You can point to any gallery using the relative URL of /gallery/NameOfGallery


Listing multiple galleries

You can list all your galleries from any page you choose.

List of all image galleries

option 5
 


You can add a sub-menu panel that lists all your galleries

Submenu panel

Remember that you can point to the gallery using the relative URL of /gallery/NameOfGallery

How to link image


Accessibility and Alt-Text Image Gallery Considerations 

Overview

Image galleries have been available in the Drupal Template System, however, in an effort to make our websites more accessible, we suggest using this new, more accessible method of adding image galleries to your site.

How to Create Accessible Image Galleries

To avoid screen readers reading both alt-text and title text aloud, which would provide a poor user experience, site builders should follow these instructions to create accessible image galleries:

  1. Navigate to the page to which you would like to add an image gallery
  2. Select "customize this page"
  3. Find the stand-alone "image gallery" item, adjacent to the "billboard" and "accordion" items. [Note: Do not select one of the "image galleries (deprecated)" items.]
  4. Once the image gallery item is selected:
    1. Add a title (optional);
    2. Determine whether the gallery will be re-usable throughout your site;
    3. Add a description of your image gallery (also optional); [Note: When adding images, you can choose to upload new images or select from your media library.]
  5. "Save" your content pane and "save" your page customizations
  6. Because the slideshow functionality relies on javascript, you will need to reload your page in order to properly see your image gallery.”

[Note: Website builders may only add one single accessible image gallery slideshow per page.]

For more information about creating accessible sites in Drupal, please refer to our Web Accessibility resources.