Width Guide

Please note that sometimes the galleries will to break onto multiple lines before they should while in Edit mode; switch to View mode to ensure the widths are correct.

Step 1: Take maximum width of the region

Two column, large side: 580
Two column, small side: 220

One column: 860

Step 3: Divide it by the number of images to add per row; subtract 20
Step 3a: for one across images with borders: Subtract 12
Step 3b: for one across images with shadows: Subtract 4

Examples:

Two column layout with 3 images across (580 / 3) - 20 = 173
One column layout with 6 images across (860 / 6) - 20 = 123

The Desired Result

Ignore a one across image in determining these widths as it will become the maximum width at the end.

Step 1: Add individual galleries and set their image sizes to be the maximum as mentioned in the same-size quick reference.

Step 2: Use the following formula to determine the maximum width for each row:

(widthOfImage * numberOfImages) + (20 * numberOfImages -1)

In our example, this would give us (152 * 5) + (20 * 4) equaling 840 for a row of 5. The row of 3 equals 808.

Step 3: Determine the lowest common denominator between the two rows.
Step 3a: Subtract the number of images in the smallest row (not counting a full-width gallery) until the number is found. 808 - 3 is 805, which is divisible by both 5 & 3.

Step 4: Determine the width of the images by solving for x.

(x * numberOfImages) + (20 * numberOfImages - 1) = 805

In our example, this would give us 5x + (20 * 4) = 805 with x equaling 145 and 3x + (20 * 2) = 805 with x equaling 255. (Hate math? Copy and paste the formula into WolframAlpha and it'll solve for you).

Step 5: Enter the calculated widths into the respective gallery modules.

Step 6: For full-width galleries, use the maximum width as the lowest common denominator, i.e., 805.

You don't have to follow the formulas. Using a "Guess & Check" method is perfectly fine, but use the Same Size Quick Reference as a starting point.