Advanced Galleries

Use the [wms_gallery] shortcode to create image galleries with advanced layout options, like animated slideshow, and filmstrip format.

Gallery formats

In the tabs below are examples of the 3 different gallery types, using the same pictures for comparison:

Creating the shortcode

To use the shortcode builder interface, you will need to have the Williams Shortcode Builder plugin activated, and be using the visual editor. This method is not available for sites.williams.edu.

To create the  shortcode:

  1. Place your cursor in the visual editor where you’d like the gallery to appear.
  2. Click on the “Shortcodes” button, located in the 2nd row of your visual editor’s toolbar (outlined in orange below). If you only see 1 row of tools, click on the kitchen sink (outlined in green below) to reveal the 2nd row.
  3. Hover over the “Galleries” menu to reveal its submenu, and select one of the gallery types- grid, slideshow, or filmstrip.

sc-menu-wms_gallery

Fill out the form in the dialog popup box. Hovering over the input boxes will reveal hints, helping you fill out the form. Clicking “OK” will insert the shortcode into the visual editor.

sc-dialog-gallery-grid

Select images

The first step for each gallery type is determining which images are going to be in the gallery. Click on the box next to “Select Images” (outlined in red above) to access your media library or upload new images.

In the “Choose Images” popup window (shown below), click on the thumbnails of the images you’d like in your gallery. If you change your mind and want to remove one, simply click on the image again.

Tip: for best results, use images that are similar in size (the same size is ideal) and the same orientation (landscape vs. portrait).

sc-gallery-img-picker

After selecting your images, click on the blue “Choose Gallery Images” button in the lower right. This will close the “Choose Images” window and bring you back to the shortcode builder. In the “Select Images” box, you will now see a comma separated list of image IDs, outlined in red below.

sc-dialog-gallery-grid2

Captions

All of the formats allow you to display captions. By default, captions are not displayed. If you images don’t already have captions, you can add them via the media library.

See exmaple galleries with captions

Image size

For the grid and slideshow layouts, you can select one of the sizes below:

  • thumbnail (150 x 150 px)
  • medium (300 x 300 px)
  • large (1024 x 1024 px)
  • full  (whatever size the original image was)

We recommend using thumbnails for the grid format, especially if your images are of different sizes or orientations.

Editing the shortcode

In the editor (in both visual and text modes), the shortcode will look something like this:
[wms_gallery ids="6394,6393,6392" size="thumbnail" caption="no" columns="3" type="grid"]
You can edit the shortcode attributes (the values inside the quotes above) directly, or you can delete the shortcode, and create a new one using the shortcode builder tool again.