Gallery (V2)

Galleries (V2) provide an easy way of tagging photos for display in a lightbox.

This component has a UO Edit Suite template for easy use on Drupal Sites: How to use this template

Examples and Code

This component requires Drupal to function, hence the examples here are not interactive.

Select exampleDefaultTwo Different Image Groups

Open Full Example

<div class="grid grid--3col grid--centered gallery-v2">
  <div class="grid__item">
    <div class="gallery-v2__item">
      <div class="gallery-v2__thumbnail"><img src="/styles/landscape_medium/public/test-image-landscape.jpg" alt="Test Image" /></div>
      <div class="gallery-v2__caption"><span>Image Caption</span></div>
      <div class="gallery-v2__group"><span>group1</span></div>
    </div>
  </div>
  <div class="grid__item">
    <div class="gallery-v2__item">
      <div class="gallery-v2__thumbnail"><img src="/styles/landscape_medium/public/test-image-landscape.jpg" alt="Test Image" /></div>
      <div class="gallery-v2__caption"><span>Image Caption</span></div>
      <div class="gallery-v2__group"><span>group1</span></div>
    </div>
  </div>
  <div class="grid__item">
    <div class="gallery-v2__item">
      <div class="gallery-v2__thumbnail"><img src="/styles/landscape_medium/public/test-image-landscape.jpg" alt="Test Image" /></div>
      <div class="gallery-v2__caption"><span>Image Caption</span></div>
      <div class="gallery-v2__group"><span>group1</span></div>
    </div>
  </div>
</div>

Open Full Example

<div class="grid grid--2col grid--centered gallery-v2">
  <div class="grid__item">
    <div class="gallery-v2__item">
      <div class="gallery-v2__thumbnail"><img src="/styles/landscape_medium/public/test-image-landscape.jpg" alt="Test Image" /></div>
      <div class="gallery-v2__caption"><span>Image Caption</span></div>
      <div class="gallery-v2__group"><span>group1</span></div>
    </div>
  </div>
  <div class="grid__item">
    <div class="gallery-v2__item">
      <div class="gallery-v2__thumbnail"><img src="/styles/landscape_medium/public/test-image-landscape.jpg" alt="Test Image" /></div>
      <div class="gallery-v2__caption"><span>Image Caption</span></div>
      <div class="gallery-v2__group"><span>group1</span></div>
    </div>
  </div>
</div>
<div class="grid grid--2col grid--centered gallery-v2">
  <div class="grid__item">
    <div class="gallery-v2__item">
      <div class="gallery-v2__thumbnail"><img src="/styles/landscape_medium/public/test-image-landscape.jpg" alt="Test Image" /></div>
      <div class="gallery-v2__caption"><span>Image Caption</span></div>
      <div class="gallery-v2__group"><span>group2</span></div>
    </div>
  </div>
  <div class="grid__item">
    <div class="gallery-v2__item">
      <div class="gallery-v2__thumbnail"><img src="/styles/landscape_medium/public/test-image-landscape.jpg" alt="Test Image" /></div>
      <div class="gallery-v2__caption"><span>Image Caption</span></div>
      <div class="gallery-v2__group"><span>group2</span></div>
    </div>
  </div>
</div>

Usage

Gallery V2 requires the colorbox library active on your page to function. Add the gallery-v2 class to a parent container to “enable” the gallery functionality on it. Each photo to be used in a gallery needs the item, and each item has thumbnail, caption, and group divs. The thumbnail contains the image to display on-page. The caption contains the HTML/text that will display under the image in the lightbox. The group defines a group that the image belongs to. You can use multiple groups on the page to offer different galleries. The group name can be any string in the group tag, and every gallery item with that string will display in the same “set” in the lightbox.

Guidance

When to Use Galleries

• To provide full-size display of thumbnail images: If the page contains many small images that you want the user to be able to see at full size, then galleries are a good fit.
• When images are the focus of the page or story: If the focus is on the images, it makes sense to use a gallery.

Usage Guidance

• Don’t use for single images: Using the lightbox fox just one image is unintuitive and may be confusing to the end user.

Accessibility Guidance

• Ensure Gallery images have proper alternative text: Galleries provide an optional caption field that can be used to give more information about a photo, but the photo still needs proper alternative text set to describe the image.

Elements

Element	Description	Usage	Required	Multiple
Item	The Gallery Item container	Wrap the photo and metadata in this	Yes	Yes
Thumbnail	The item’s thumbnail image	Use as you would for in-page display, or a small image in a grid for a gallery collection	Yes	No
Caption	The image’s caption	Limit HTML to basic text formatting tags	No	No
Group	The item’s gallery group	Use a plaintext string to identify which group of photos the item belongs to	Yes	No

Keyboard Navigation

Key Command	Description
enter	Open the lightbox gallery for the focused image
left	When in lightbox, display the previous image in the gallery
right	When in lightbox, display the next image in the gallery
esc	When in lightbox, close the lightbox

Javascript

This component requires the colorbox javascript library to be installed to function. This is provided out of the box in the UO Cosmic theme.