General Settings
For each variation of thumbnail grid galleries you will create a new gallery style in “ProPhoto > Customizer > (toggle top-left switch to “Design”) > Galleries and give it a corresponding name. You want to to recognize the style by its name so we named this one “Masonry thumbnail consistent columns.”
The thumbnail specific settings are all in “Galleries > General Settings“. First select “thumbnail grid” as the style. The crossfade transition style and the transition speed apply only if the option (described below) to enable an expanded gallery on click is selected. Crossfade gives it a slideshow effect.
Upon choosing the thumbnail grid style, you will see some other thumbnail specific settings open up below. In the Thumbnail Grid Appearance section choose
- a space (gutter) between each thumbnail
- to show the expanded gallery when thumbs are clicked
- the masonry layout
The Thumbnail Responsive Settings area controls the size of the thumbnail images at different browser window or device sizes. It’s this area that allows you to keep a consistent number of columns no matter the browser width (within reason, of course).
- A minimum width of 50px allows the images to get really small.
- An ideal width of 55px means that ProPhoto will try to get close to this as much as possible. This is the
- The max width is pretty self explanatory. The thumbs won’t get any larger than 900px, even if your site is displayed on a gigantic screen.
- Set the max columns to 3.
With these settings, there will always be 3 columns to the grid gallery.
In the Expanded Mode Settings box
- Choose to have the single images fill the window instead of the full screen.
- Select an icon for exiting expanded mode
- Choose the background color that will apply to any areas of your window not filled by the image. This gallery style uses a black background with partial transparency.
Gallery Controls
The Gallery Controls area is where you dial in how the controls look and behave. You can mix and match these however you want. These controls will only show up in expanded mode. The view with thumbnails does not have a control bar. What this design does is laid out below. Notice that the Gallery control bar appearance options can change at each of the four width breakpoints.
- The control bar alignment is set to bottom.
- The controls position is set to overlay the gallery. This allows maximum space for the gallery.
- The fade in option for hiding/showing makes the control bar fade in when hovered. Try it in the gallery on this page.
- The control bar gets it’s own background color. Here it is set to black so that the thumbstrip clearly stands out.
- The top/bottom padding option is set to 10px; which gives height to the control bar, above and below the controls.
- The control button color is set to be white.
- A partial opacity of 0.5 on a black color gives a nice looking shadow so the buttons stand out.
In the Gallery Controls Sizes area choose how large the controls will be. Note that these sizes can be adjusted for each of the four breakpoint sizes. This allows you to dial in the size of the controls for different screen widths. 
There are a couple areas pertaining to the thumbnail navigation appearance.
- This gallery has thumbnail navigation enabled. That means there will be thumbnails as a navigation option when in expanded mode.
With thumbnail navigation come some styling options.
- Size = 75px
- Space between thumbnail images = 8px
- Thumbnail border – none here
- Border color – does not apply when no border
- Border style – does not apply when no border
The “prev/next navigation” area allows you to turn on icons for navigating images with a click/touch. When enabled, you get options for color and for the shadow. We use the same settings here as we did for the controls. White and a 0.5 opacity black. 
Below choose the icon type. The icon size is controlled in Gallery Controls Sizes.
In Slideshow Settings
- Slideshow mode is enabled. This means that expanded mode will offer a play button for automatic transitions in addition to the option of clicking the prev/next buttons.
- Choose the option to show the play/pause buttons to give control to the viewer.
- 3500 milliseconds is the length of time each slide will display when playing automatically. Adjust this to taste.
