This thumbnail gallery example is the cropped style, in 3:2 aspect ratio with square “dot” navigation that fades in, prev/next links, fullscreen expanded mode and pause/play buttons to control the slideshow. Change the browser window size to see how it changes as the width changes. Click below for instructions and screenshots on how to create the basic features of this style.
Detailed steps for creating this gallery style
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 this is called “cropped thumbnail gallery.”
The thumbnail specific settings are all in “Galleries > General Settings“. First select “thumbnail grid” as the style. The position transition style and the transition speed apply only if the option (described below) to enable an expanded gallery on click is selected. Position gives it a slider type 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 cropped layout
- a 3:2 aspect ratio
The Thumbnail Responsive Settings area controls the size of the thumbnail images at different browser window or device sizes.
- A minimum width of 100px allows the images to get really to a fairly small, but not super small size
- An ideal width of 200px means that ProPhoto will try to get close to this as much as possible
- 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 zero so there is no restriction on that
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 that is fully opaque (no 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.
- 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 #020202 and and opacity of 0.25. This makes for just a subtle background behind the control bar.
- The top/bottom padding option is set to 10px; which serves to add some more height to the background or the bar.
- 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. 
In Dot/Thumbnail Navigation Appearance setup the navigation options.
- This gallery has dot navigation enabled. That means there will be dots one can click on to navigate the images in expanded mode.
With dot navigation come some styling options.
- Size of dots = 25px
- Space between nav dots = 10px
- Dot shape – Square
The “prev/next navigation” area allows you to turn on icons for navigating images in expanded mode 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.
