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.

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 TIME Sites, 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.)
​

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:

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:

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!

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

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.

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.

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.)
​

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"

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.

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.

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.