You can use the Image Gallery Element to display a collection of images on your page. You can choose whether they will be organized into a grid (gallery mode), or whether they appear one-at-a-time (carousel mode.)
When users click on one of the images in the gallery, it will expand to fill the screen (this is commonly referred to as a "lightbox".) While in this lightbox view, users can navigate forwards and backwards through your gallery using arrow icons, or by swiping on their mobile device.
Adding an Image Gallery to Your Page
You can add a gallery element to your page by dragging the Image Gallery icon from your left toolbar:
When you place a gallery, by default it will expand to fill its parent container.
You'll see a number of placeholder "squares" in the gallery, indicating that it's in grid mode but hasn't had any content added to it yet:
Like any element in Brandcast, the gallery can be dragged around the page, or placed inside of grids or containers. You can use the right-hand editing panels to style it (change its overall dimensions, add a border, change its background color, and so on.)
Adding Images to a Gallery
The simplest way to add images to your gallery is to select one or more images from the Media Library, then drag and drop them onto the gallery.
Once you've added media to your gallery, the placeholder "squares" will disappear and it will display the images you've added:
Adjusting the Layout of a Gallery
Adjust the columns and gutters
With the gallery selected, you'll see controls in the top toolbar for controlling the size of the gallery items, and the gutter:
The size corresponds to the number of columns in the gallery: reducing the number of columns will increase the size of the images, and vice versa. The gutter refers to the space between items, and is expressed as a percentage of the total width of the element.
The same controls are also available in the Dimensions Panel:
Styling Images in the Gallery
Style all the gallery items
To apply styling to the images in the gallery -- for example, to change their height, add borders, apply filter effects, or add transforms -- double-click on the gallery to open it, and then select one of the images.
When you've selected an image in the gallery, you'll see a green border appear around it:
Any styling you apply will now affect all the images in the gallery.
Style an individual gallery item
You may want to apply styling to only a single image in the gallery. To do this, open the gallery by double-clicking on it, then check the box in the lower-right that says "Style this only":
An example of styling: if you notice an image is being cut off on one side you can select the image (using the above method), open the background image panel. In the panel you can move the image along the x or y axis. Important note: some images are limited by their aspects ratios and will only allow you to move along only the x or only the y axis. You can get really playful with your styling, so have fun!
There are limitations on the styling you can apply to an individual image: you will not be able to alter its dimensions, as this would break the overall layout of the gallery.
Adding, Removing, and Reordering Gallery Items
Add a Gallery Item
You can add an additional image to a gallery at any time, by dragging it from the media library onto the gallery.
Remove a Gallery Item
Double-click on the gallery to open it, and select the image you want to remove. Then press the <delete> key on your keyboard, or choose "Delete" from the "Edit..." menu. The item will be removed from the gallery (but will remain in your media library.)
Reorder Gallery Items
Double-click on the gallery to open it. You can select an individual image and drag it to a new position. The gallery will automatically reorganize itself.
Managing Gallery Content with the Background Image Panel
Each of the images in your gallery is actually a background image within a container. You can use the Background Image Panel to view the contents of the gallery, reorder the images, delete an individual image, or add additional images:
When visitors to your website click on an item in a gallery, it will expand to fill their browser window. This is commonly referred to as a "lightbox".
While in the lightbox view, visitors will be able to use forwards / backwards arrows to navigate through the images in the gallery.
An "X" icon at the top right of the lightbox view will close it, and return them to the regular view of the page.
The lightbox view only applies to galleries that are in grid mode. If you switch your gallery to carousel mode, there is no lightbox view.
Switching to Carousel Mode
Instead of a grid, you can display your gallery as a carousel. This will display only one image at a time, and users will be able to scroll forwards / backwards through the gallery using arrow icons.
To switch a gallery to a carousel layout, open the Background Image panel and click the icon for carousel mode:
You'll see the layout of your gallery change so that only the first image is displayed: