Gallery

Creating Components

What is a Gallery?

The Gallery component provides a flexible way to display a number of images on your site.

Laptop with a gallery component on the screen

Gallery Example

How to add a Gallery

  1. Click the edit link at the top of the page
  2. Move your cursor where you want to place the component. (Add a section if needed).
  3. Click the plus icon.
  4. Select Gallery from the menu

Content 

  1. Add your Title (optional).
    Note: Title field text is limited to 70 characters.
  2. Click Add Image or Video depending on the type of gallery you are creating. Select the appropriate media or upload the URL for a video or image to the Media Library.
    Note: Recommended image dimensions are 3:2, with a maximum image size of 4MB.

Styles

  1. Toggle to the Styles tab.
  2. Choose a gallery display: grid, carousel, slider, or video.

Save

  1. Click Save.
  2. Scroll to the top of the page and click Save.
  3. Click the Done button beside the save button.
    Note: This will display the page in the closest representation of how site visitors will view it. All links and actions that are disabled in editing mode will be functional now.

Style Options

Example of a grid gallery display

Example of a carousel gallery display

  • EDI conference break in Geffen Hall, participants walking up the stairs of the courtyard
    Custom caption about the photo.
  • A lecture hall discussion in the biomedical sciences at UCLA
    Custom caption about the photo.
  • Medical students in a lecture in Geffen Hall smiling at the camera
    Custom caption about the photo.
  • CNS event held in auditorium
    Custom caption about the photo.
  • group of people working together at one table
    Custom caption about the photo.
  • UCLA Health IT panel welcomes the Turner-UCLA Allied Health Interns. 
    Custom caption about the photo.

Example of a slider gallery display

  • EDI conference break in Geffen Hall, participants walking up the stairs of the courtyard
    Custom caption about the photo.
  • A lecture hall discussion in the biomedical sciences at UCLA
    Custom caption about the photo.
  • Medical students in a lecture in Geffen Hall smiling at the camera
    Custom caption about the photo.
  • CNS event held in auditorium
    Custom caption about the photo.
  • group of people working together at one table
    Custom caption about the photo.
  • UCLA Health IT panel welcomes the Turner-UCLA Allied Health Interns. 
    Custom caption about the photo.
  • EDI conference break in Geffen Hall, participants walking up the stairs of the courtyard
  • A lecture hall discussion in the biomedical sciences at UCLA
  • Medical students in a lecture in Geffen Hall smiling at the camera
  • CNS event held in auditorium
  • group of people working together at one table
  • UCLA Health IT panel welcomes the Turner-UCLA Allied Health Interns. 

Example of a video gallery display

Background Colors 

This setting is available only to site owners and should be used sparingly to draw attention to key information.

Note: This applies only to One Column Sections.

How to apply a background highlight:

  1. Open the Styles tab.
  2. Choose a background color to highlight your components:
  • None (default)
  • Blue 100
  • Blue 300
  • Blue 500
  • Blue 700
  • Sand 300
  • Sand 500

Example of a grid gallery display on a teal background color

Example of a grid gallery display on Sand 300