Gallery - Masonry

University Communications has provided further information about this component with regards to best practices on their Web Creator Guide. Check out their guide for more tips and tricks for this component and more.

  • Published - Select or unselect to make component visible or not to site visitors. Defaults to published
  • Columns (required) - Select the number of columns (2-4) to use before wrapping items
  • Background Color (required) - Choose the color to use when displaying the component
    • White, Black, Gray
  • Use Lightbox for images (optional) - Ability to click on images to bring up a full-screen version
  • Section Header (optional)
    • Include in Jump Links Menu - Select or unselect to make section title an anchor link
    • Section Title - Give the section a title that will help identify the component. This also doubles as an anchor link for the section when using the Current Page Section Menu on Basic Pages
    • Description - Short description that helps further explain the section
    • Button Color - Color of the CTA button (green, gold)
    • Button Link URL / Text - Identify where the button should take visitors and what the button should say
  • Image Size (required) - Choose the image size to use for all images in the grid
  • Image (required) - Pick an image to display
  • Display Title & Caption (optional) - Select or unselect to include the caption
  • Caption Title (optional) - Provide a short title for the image or video
  • Caption Description (optional) - Provide a short description for the image or video

Instructions start on the Create or Edit within a piece of content.

  1. Create Content using the Add Component button
  2. Choose Gallery - Grid from the list of Components in the Media section
    OR
    Edit Gallery - Grid content using the Edit button
  3. Switch the Published field on or off for the component to be published or unpublished
  4. (required) Select the number of Columns (2-4) to display before wrapping items
  5. (required) Choose the Background Color for the component
    1. White, Black, Gray
  6. (optional) Select or unselect Use Lightbox for images to display images as full-size when clicked on
  7. (optional) Section Header allows for the creation of a Call to Action (CTA) to display beside the articles
    1. Include in Jump Links Menu (defaults to yes)
    2. Section Title
    3. Description
    4. Button Color (green, gold)
    5. Button Link URL / Text
  8. (required) Select the Image Size to display the images
    1. Square (1:1)
    2. Standard (3:2)
    3. Portrait (2:3)
  9. (required) Choose an Image / Video from the media library to display
  10. (optional) Switch the Display Title & Caption on or off to display the caption for the image or video
  11. (optional) Provide a Caption Title for the image or video
  12. (optional) Provide a Caption Description for the image or video
  13. Repeat steps 8-12 until desired number of images have been added

Examples

Below you will find an examples of Gallery - Masonry using available options.

Caption Title
Caption descriptions are typically longer than caption titles.
Caption Title
Caption description
Caption Title
Caption descriptions are typically longer than caption titles.
Caption Title
Caption description
Caption Title
Caption descriptions are typically longer than caption titles.
Caption Title
Caption description