Image Gallery Block

What is it?

The image gallery block is a way to display a multitude of images on your page in a full-display gallery. The image gallery block offers the following features:

  • Tiled presentation
  • Keyboard accessible
  • Lightbox presentation when images are clicked
  • Playable slideshow of included images
  • Arrow navigation to Previous and Next
  • Captions based on the alternative text information
  • Responsive design based on screen resolution

Where can you find it?

  1. Click on New > Blocks > Image Gallery block.
  2. Configure the information requested, including System Name and Parent Folder location.
  3. Click Submit to save.

In general, how it works

The image gallery is designed to display the images you select and attach within the width available in the main body area of your page template (Flex or Standard). The Flex page will give you the largest initial preview since it has the widest potential visible width, at least until you designate narrower column widths. The Standard page's default left navigation panel will already narrow the preview slightly, and with if a right column is activated, that will narrow the preview even further making the images smaller. This is taken into account as the screen itself narrows to activate responsive design; at a certain point the programming will take over an reduce the number of columns to allow for reasonably sized images.

Also, if someone wants a better look at the images in your gallery they can click on any image to launch the lightbox and display the larger version. The lightbox feature then has navigational arrows for previous and next along with a play button for a slideshow function.
 
Ideally, the gallery is meant to showcase a multitude of images in a constrained way, but still allow users to view the full versions and navigate the gallery with ease.

How to configure the block

Image gallery block sections

  • Title - Optional
  • Description - Optional
  • Image - Image to be included in the gallery
  • Alt text / Caption - Required text for accessibility purposes. Information provided here will also be used in the lightbox's caption field
  • Settings
    • Heading level for block title
    • Language code
  • Style
    • Custom class field for customization of presentation
  • Comments - Optional

How to attach the block

The image gallery block can be attached in any of the block attachment regions of the body area of  the Flex and Standard Page templates.

Customization

You're welcome to either add a custom class (format: .u_your-class-name) or overwrite the existing classes in your own supplemental.css. View the classes used in the live stylesheet named gallery1.css.

Demo