Using the Grid Gallery Style

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 fit 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 fit and the Image Background Color will fill the surrounding white space).

• Alignment can be sent to left-aligned or centered.

• To display filenames on your thumbnails, toggle the Display Filename to ON.

• 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 fit 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. 

• Use the slider to adjust the minimum column width. This sets the minimum width of your columns - column width will not decrease beyond this limit.

• 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 fit and the Image Background Color will fill the surrounding white space).

• To display filenames on your thumbnails, toggle the Display Filename to ON.

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

Masonry Fixed

The Masonry Fixed Grid style thumbnails have a fixed width but can be varying heights. This is a good choice for galleries that have a varied mix of vertical and horizontal images. The thumbnails are arranged in columns and can have a ragged bottom. When the browser window is resized, thumbnails are rearranged in new columns to fit the window but do not scale.

To set your Masonry Fixed grid options:

• Use the slider to adjust the Column Width. This will increase the width 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).

• Select Left or Center alignment of your image grid.

• To display filenames on your thumbnails, toggle the Display Filename to ON.

• 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. 

• Use the slider to adjust the minimum column width. This sets the minimum width of your columns - column width will not decrease beyond this limit.

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

• To display filenames on your thumbnails, toggle the Display Filename to ON.

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

• To display filenames on your thumbnails, toggle the Display Filename to ON.

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

• To display filenames on your thumbnails, toggle the Display Filename to ON.

• 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.