Facebook Pixel Grid Galleries | Western Kentucky University Skip to main content

Grid Galleries


Galleries can be displayed in two options, carousel or grid. The grid option will display a grid of thumbnails. 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 option below.

style=grid;

After entering the grid option you can select whether or not to display the grid in the a thumbnail style and select the number of columns you want your grid to have.

 

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.

A monkey using the default style

thumbail=false;

A monkey that does use the thumbnail style

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.

 

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.

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

 

Example 1 - 6 columns, thumbnails false

style=grid;
thumbnails=false;
columns=6;

 


 

Example 2 - 5 columns, thumbnails true

style=grid;
thumbnails=true;
columns=5;

 


 

Example 3 - 4 columns, thumbnails true

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.

 

Example 4 - 4 columns, thumbnails false

style=grid;
thumbnails=false;
columns=4;

 

 

Example 5 - 3 columns, thumbnails true

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.

Get Help



Some of the links on this page may require additional software to view.

 Last Modified 9/14/18