Grid Galleries
The grid option will display a grid of thumbnails that are automatically generated from the image you upload. Clicking a thumbnail will open a modal box with a carousel of images in your gallery, allowing them to be viewed larger. Grid Galleries are defined in the Advanced section of the Gallery Options Panel using the options below.
Options
To configure a grid gallery, some extra code must be added to the Advanced input in the Gallery Options.
Gallery Style (Required)
You must entering the following option into the advanced field to display your gallery in the grid thumbnail style. If you do not include this option your gallery will display as a carousel.
style=grid;
Bordered Thumbnails
Use the advanced options to enable thumbnail style images for your grid. This style adds padding around the image as well as a border.
thumbail=false;
thumbail=true;
Columns
Columns are selected the same way as the thumbnails and style by entering columns=#;, replacing # with the number of columns you want you display in your grid. If no value is entered your grid will default to 4 columns.
columns=4;
Minimum Image Width
When an thumbnail in a grid gallery is clicked on the full size images appear in a carousel style. Since this carousel fills the entire width of the site container we recommend all images be at least 1200px wide. While not required for grids it is also recommended that you make sure your images are all the same size and height as eachother so the carousel controls do not move.
| Grid Gallery |
|---|
| 1200px |
Recommended Thumbnail Sizes
Gallery assets can be placed anywhere on the page including side columns. When specifying a grid and columns, you will want to size your thumbnails to fill the column. Use the code generator in the next section to create your advanced section code and determine the thumbnail size for you. Thumbnails are automatically generated at the size you enter from the full size image that you upload.
| Page Layout | |||||
|---|---|---|---|---|---|
| 1 Column | 2 Column Main | 3 Column Main | Side Column | ||
|
Gallery Columns
|
1 | Not Recommended | Not Recommended | Not Recommended | Not Recommended |
| 2 | Not Recommended | Not Recommended | Not Recommended | 275x275 | |
| 3 | 400x400 | 300x300 | 200x200 | 175x175 | |
| 4 | 300x300 | 225x225 | 150x150 | 140x140 | |
| 5 | 250x250 | 180x180 | 125x125 | 115x115 | |
| 6 | 200x200 | 150x150 | 100x100 | Not Recommended | |
Code Generator
Use this form by selecting the number of columns for your grid and the desired location in your template to determine the recommended thumbnail size as well as advanced code.
Examples
6 columns
style=grid;
thumbnails=false;
columns=6;
5 columns with Thumbnail Style
style=grid;
thumbnails=true;
columns=5;
4 columns with Thumbnail Style
style=grid;
thumbnails=true;
columns=4;
Galleries can be placed in side columns or snippets also. In this example two galleries are displayed inside a 2 col snippet to demonstrate what they may look like in a side column or smaller width.
4 columns
style=grid;
thumbnails=false;
columns=4;
3 columns with Thumbnail Style
style=grid;
thumbnails=true;
columns=3;
Need Assistance?
The WKU ITS Service Desk is here to help. Give us a call, chat with a representative online, use the Self-Help Knowledge Base and more.
Some of the links on this page may require additional software to view.