Grid: An Overview

GRID

The Grid gallery style displays all your images on one page as thumbnails in a grid format. This allows your visitors to quickly and easily view all of your images. When visitors click on a thumbnail in the Grid, they are taken to the slideshow view.

There are six different style options for the Grid: Uniform Fixed, Uniform Fluid, Masonry Fixed, Masonry Fluid, Rows Filled and Rows Ragged.

Uniform Fixed

With the Uniform Fixed grid option, thumbnails are uniformly sized. When the browser window is resized, thumbnails are rearranged in new columns to Iit the window but are not re-sized.

To set your uniform fixed grid options:

• Use the slider to set the Row Height. This will adjust the height of your thumbnail images.

• Use the slider to set the Column Width. This will adjust the width of your thumbnail images.

• Use the slider to adjust the Horizontal spacing. This will adjust the space between columns.

• Use the slider to adjust the Vertical spacing. This will adjust the space between rows.

• Image cropping of thumbnail images can be set to Fill (images are cropped to the size of the thumbnail) or Fit (images are scaled down to Iit and the Image Background Color will Iill the surrounding white space).

• Use the color picker to set the Image Background color, which will Iill any surrounding white space around thumbnail images.

• See Slideshow for instructions on setting all of the remaining slideshow related options.

Uniform Fluid

With the Uniform Fluid grid option, thumbnails are uniformly sized and will scale up or down. When the browser window is resized, thumbnails are scaled up or down and columns are rearranged to provide the best Iit for the window size.

To set your uniform fluid grid options:

• Use the slider to adjust the horizontal spacing. This will adjust the space between columns.

• Use the slider to adjust the vertical spacing. This will adjust the space between rows.

• Adjust the size of your thumbnails by inputting an Image Aspect Ratio, the ratio between the width and height of the image.

• Image cropping of thumbnail images can be set to Fill (images are cropped to the size of the thumbnail) or Fit (images are scaled down to Iit and the Image Background Color will Iill the surrounding white space).

• Use the color picker to set the Image Background color, which will fill any surrounding white space around thumbnail images.

• See Slideshow for instructions on setting all of the remaining slideshow related options.

Masonry Fluid

The Masonry Fluid Grid style has the same behavior as Masonry Fixed, except the thumbnails will scale up or down when the browser window is resized. The column width is not fixed.

To set your Masonry Fluid grid options:

• Use the slider to adjust the horizontal spacing. This will adjust the space between columns.

• Use the slider to adjust the vertical spacing. This will adjust the vertical space between thumbnails.

• Image cropping of thumbnail images can be set to Fill (images are cropped to the size of the column width) or Fit (images are scaled down to Iit and the Image Background Color will Iill the surrounding white space).

• Use the color picker to set the Image Background color, which will Iill any surrounding white space around thumbnail images.

• See Slideshow for instructions on setting all of the remaining slideshow related options.

Rows Filled

The Rows Filled Grid style thumbnails have a fixed height but can be varying widths. The thumbnails are arranged in rows. When the browser window is resized, thumbnails are scaled up or down to fill the width of the window and rows will be rearranged.

To set your Rows Filled grid options:

• Use the slider to adjust the Row Height. This will increase the height of your image thumbnails.

• Use the slider to adjust the horizontal spacing. This will adjust the space between columns.

• Use the slider to adjust the vertical spacing. This will adjust the vertical space between thumbnails.

• Image cropping of thumbnail images can be set to Fill (images are cropped to the size of the column width) or Fit (images are scaled down to fit and the Image Background Color will fill the surrounding white space).

• Use the color picker to set the Image Background color, which will fill any surrounding white space around thumbnail images.

• See Slideshow for instructions on setting all of the remaining slideshow related options.

Rows Ragged

The Rows Ragged Grid style has the same behavior as Rows Filled except the thumbnails do not scale when the browser window is resized and thumbnails do not fill the width of the browser.

To set your Rows Ragged grid options:

• Use the slider to adjust the Row Height. This will increase the height of your image thumbnails.

• Use the slider to adjust the horizontal spacing. This will adjust the space between columns.

• Use the slider to adjust the vertical spacing. This will adjust the vertical space between thumbnails.

• Image cropping of thumbnail images can be set to Fill (images are cropped to the size of the column width) or Fit (images are scaled down to fit and the Image Background Color will fill the surrounding white space).

• Use the color picker to set the Image Background color, which will fill any surrounding white space around thumbnail images.

• Set the Alignment to Left or Center. Thumbnails aligned left means the right edge will be ragged. Thumbnails centered will have a ragged left and right edge.

• See Slideshow for instructions on setting all of the remaining slideshow related options.