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
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. These changes are responsive, so your Gallery can have less items per row on smaller screen sizes.
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. A contextual toolbar will appear at the top of the screen, allowing you to adjust the height (only in %), adjust x and y positioning, and determine scaling and whether or not the image repeats. 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!
Add a Hover Style to all the gallery items
If you want to set a hover state for all items in your gallery, double-click on the gallery to open it, and then select one of the images. Then click on the hover toggle and apply the hover effects you want to that gallery item. Once you're done applying the changes, click on the default toggle to exit the hoe
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":
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 or into the Background Image panel. Make sure you don't drag it directly onto an image, as that will replace the image that was there first.
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 click on the gear and select "Delete Element". The item will be removed from the gallery (but will remain in your media library.)
Add a link to an individual gallery item
If you want to add a link to an individual gallery item, double-click on the gallery to open it, and then select one of the images. Click on the green wheel that appears in the upper right and select "Add Link"
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, select the gallery, 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:
Currently there is no way to change the arrows on our native carousel, but you can watch this video to learn how to cover them up with your own arrows.