An example of the Picture Gallery Tile in a grid layout.

An example of the Picture Gallery Tile in a carousel layout.

Overview

The Picture Gallery tile gives designers the ability to display a series of images in one tile. The images must be stored in folders in

Configuring the Documents Tile

The tile can be added to the design canvas by clicking and dragging the Picture Gallery tile from the Tile Gallery. You will find the Picture Gallery tile in the Tile Gallery under the Category "Media".  

The canvas, showing the Media tiles with the Picture Gallery tile icon and the default tile with no source configured.

Like all tiles, the tile can be deleted, saved, duplicated, or configured through the context menu that appears when clicking on or tabbing to the tile in the design canvas.

Configure

Various settings of the tile can be configured by clicking on the Settings icon. From here you can edit the gallery layout type, add data sources, and choose responsive behaviors.  

See Tile Settings for more details.

Duplicate

To duplicate the tile click the Duplicate icon. All current configurations will be copied over to the new tile.

Save

To save the tile click the Save Tile icon. This will save the current configuration of the tile to the Tile Gallery.

Delete

To remove the tile from the canvas click the Delete icon.

Tile Settings

Click the Settings icon to open the tile settings.

Note: The tile settings may vary depending on your environment.

General

Display settings such as the height and background color of the tile can be configured here.

The General tab of the Picture Gallery Tile, showing the Picture Count slider, height, and background color.

Limit Picture Count: Limit the number of images that will be displayed in the tile. To improve performance, consider setting a limit.

Width: Adjust the width of the tile in pixels. This must be a positive whole number, otherwise the default will be 10 pixels. This is only available on a Fixed Width canvas, which is selected on page creation.

Height: Adjust the height of the tile in pixels. This must be at least 20 pixels.

Background Color: Use the color picker to add or change the tile’s background color. We recognize transparency for the background color.

Padding: Use the left, right, top and bottom settings to set padding in pixels.

Advanced Styles: To adjust borders, corner radius, and drop shadows click on ‘Advanced Styles’ to expand and view the options.

Border Width: The default for this tile is no border. To add one select a displayed width. Once a border is chosen an option will appear to select the border color.
Corners:  You may choose Square (default), or rounded corners of varying pixel widths. If you select Round for the corners an option will appear to select which corners it will be applied to (all, top, or bottom)

Drop Shadow:  Checking this option will add a soft, semi-transparent drop shadow to the tile.
Remove Bottom Margin: Checking this option will remove the bottom margin from the tile.

Layout

The layout for the gallery can be configured here. Some settings are dependent on the Picture Layout configuration, see each Picture Layout section for more specifics.

The Layout tab of the Picture Gallery Tile, showing the Picture Layout dropdown with Carousel selected.

Picture Layout: Choose the image layout from the options Carousel, Grid, or Row. By default, “Carousel” is selected. For more information, see Picture Layout

Picture Fit: Choose the scaling of the image.

None: Images will be displayed at their actual size and aspect ratio, with the any overflow hidden.
Contain: Images will be scaled to fit while still showing the entire image.

Cover: This is the default. Images will be scaled to completely cover the container, potentially stretching or clipping the image, but aspect ratio will be maintained.
Fill: Images will be scaled to fill the area, potentially losing the aspect ratio.

Picture Horizontal Alignment: Choose how the image is horizontally aligned in the container.

Left: The images will be placed to the left of their containing area. Extra space may show to the right.
Center: This is the default. Images will be placed in the center of their containing area. Extra space may show on either side.

Right: The images will be placed to the right of their containing area. Extra space may show to the left.

Picture Vertical Alignment: Choose how the images are vertically aligned in the container.

Top: This is the default. The images will be placed to the top of their containing area. Extra space may show on the bottom.
Middle: Images will be placed in the middle of their containing area. Extra space may show on top or bottom.
Bottom: The images will be placed to the bottom of their containing area. Extra space may show to the left.

Picture Corners: Choose the corner options for the images. You may choose Square (default), or rounded corners of varying pixel widths.

Spacing Between Pictures: Choose the pixel spacing to show between images.

Layer: Adjust to choose if the layer is part of the foreground (closest to view), background, or a Custom. This is only available on a Fixed Width canvas, which is selected on page creation.
Custom: If this is selected additional configurations will appear.

Z-Index:  This will set the CSS z-index property on the tile. By default it is 50 pixels.

Reorder Within Layer: Adjust this to send the chosen layer to the Front or the Back. This is only available on a Fixed Width canvas, which is selected on page creation.

Picture Layouts – Carousel

This is the default setting. This layout creates a slideshow of images that can be automatically progressed or manually adjusted.

The Carousel options as shown in the Layout tab.

Load Carousel on Demand: Allows images to be loaded as they are requested in the carousel. Checking this option will improve performance and page load times.

Show Carousel Next and Previous Arrow Buttons: Allows arrow buttons to show on either side of the carousel, so the user can click to advance. The button color can be configured, and respects transparency.

Show Carousel Manual Buttons: Allows manual navigation buttons to show in the carousel so the user can “jump” to specific images. The button color can be configured, and respects transparency. The position of the buttons can be set to Top, Right, Bottom or Left.

Carousel Auto Advance: Allows the carousel to automatically slide through the slideshow. The speed can be configured in seconds, with a minimum of two seconds. The default is 30 seconds.

Tip: Auto-Advancing carousels have lower accessibility and engagement. If you choose an auto-advancing carousel, choose a longer slide speed to allow users to absorb the image content.

Show Multiple Images Per Carousel Slide: Allows the carousel to show multiple images within each slide. Checking this option displays additional configuration

Carousel Slide Picture Count: The number of pictures to show in the slide. The minimum is 1, and the maximum is the number of images configured by the Limit setting in General.

Carousel Slide Picture Layout: The layout of the images within the slide, either Grid (fixed number per row) or Rows. See Picture Layout – Grid or Picture Layout - Rows for more information.
Scroll Overflow: Allow scrolling if the images are too tall for the tile.

An example of a carousel with manual and advancement buttons in blue.

An example of a carousel with a grid layout and transparent gray advancement buttons.

Picture Layouts – Grid

This layout creates rows of images with a fixed number of images (or columns) per row.

The Grid picture layout settings, showing the configuration for Grid Columns and Row Height.

Grid Columns: The number of columns to show per row. The default value is 3. Images will populate the grid from left-to-right, top-to-bottom.

Row Height: Allow each row to have a fixed height. If this is enabled, the minimum is 20px and the default is 200px.

An example grid layout with two columns and three images with scrolling enabled.

Picture Layouts – Rows

This layout displays as many images as possible before wrapping into another row.

The Rows picture layout settings, with the Picture Max Width and Picture Max Height set to 200px.

Picture Max Width: The maximum width of the picture, in pixels. The minimum width is 20px.

Picture Max Height: The maximum height of the picture, in pixels. The minimum height is 20px.

Horizontal Alignment of Pictures in a Row: Choose how the images are horizontally aligned in each row.

Left: The images will be placed to the left of the row. Extra space may show to the right.
Center: This is the default. Images will be placed in the center of the row. Extra space may show on either side.

Right: The images will be placed to the right of the row. Extra space may show to the left.

Text

This tab allows you to configure the caption settings on the gallery, including configuring the font styles.

The Text tab, showing Captions enabled.

Captions: Whether to display captions. If captions are enabled, the captions will be the image title.

Caption Position: Choose from Top, Left, Bottom, or Right.
Overlap Captions: Choose if the captions should overlap the picture.
Caption Offset from Position Edge: The offset in pixels from the position’s edge.
Multiline Captions: Whether long captions should wrap to multiple lines. If they do not wrap, they will be truncated.

Caption Background Color: The background color for the captions. By default this is a dark, transparent gray.

Font Options: Configuration settings for the caption’s font options.

Override Page Font: To use your own font, select this box. You may choose from fonts available to all LiveTiles platforms or you may choose Custom to enter a font-family already loaded into your page.

Font Size: Choose a whole number between 10 and 30 pixels.
Font Color:  Use the color picker to change the font color. We recognize transparency on fonts. 
Font Style: Italicize or underline the header text by checking the respective boxes.
Font Weight: To change the weight of the font select between Light, Normal, or Bold.

Data

This tab allows you to configure the data source for the images and set the order.

The Data tab with LiveTiles Cloud Media selected in the Data Service. A Folder is selected in Folder to Display.

Data Service: Choose the data source for the tile.

LiveTiles Cloud Media: Images stored in your Azure site, accessed through the Media Picker.
LiveTiles Cloud Documents: Documents stored in your Azure site, accessed through the Documents tile. To find out more, read about the Documents Tile.
Box: Data sourced from your Enterprise Box account. This is only available with the Enterprise version of LiveTiles Page Designer for Azure. To find out more read about Native Box Integration.

Source: Choose between two possible scopes, if LiveTiles Cloud Media or LiveTiles Cloud Documents are selected.

Public pictures belonging to the Space: This will allow you to choose a folder of images saved within the current Space.
Public pictures belonging to the Space: This will allow you to choose a folder of images saved to the Site.

Folder to Display: Open the media picker by clicking the magnifying glass icon. Navigate through your chosen data source and select a folder of images to use in your Picture Gallery tile.

An example of selecting a folder in the media picker for Azure Media.

At this time, a folder must be selected. If you do not have a folder in your media library, you can click the Add icon in the Media picker to create a new folder.

Order Pictures By: Choose to sort the images in the gallery by Name or Updated Date, using the toggles to the right to sort ascending or descending.

Tile Behavior

 The Tile Behavior tab allows the designer to configure the visibility of the tile depending on the screen width.

*The Tile Behavior tab is only available on the Responsive canvas.

Show on Large Devices: Tile will appear on widths greater than 1200 pixels
Show on Medium Devices: Tile will appear at widths between 992 and 1200 pixels
Show on Small Devices: Tile will appear at widths between 768 up to 992 pixels
Show on Extra-Small Devices: Tile will appear at widths up to 767 pixels.

Advanced

The advanced tab will allow a designer to access more complicated settings for the tile. Recommended for experienced users.

Tile Name: Name your tile for better identification within your page.
Tile Visibility: Currently this setting can only be “Everyone” as it is not yet configured to work with Okta or Active Directory groups.
Lock Tile for Non-Owners: Check this box to only allow space owners or site administrators to modify the tile settings.
Custom CSS Classes: This is recommended only for those with previous coding experience. To use custom code enter custom CSS classes here separated with a space. Do not use lt-, ltc-, or ltd- in your class names.

Azure Page Designer - Picture Gallery Tile

Overview