Width Guide

Same-size Quick Reference

Two column (large side)

1 across: 580; 576, shadow; 568, border
2 across: 270
3 across: 173
4 across: 125
5 across: 96
6 across: 76
7 across: 62
8 across: 52
See it in action

One column

1 across: 880; 856, shadow; 848, border
2 across: 410
3 across: 256
4 across: 195
5 across: 152
6 across: 123
7 across: 102
8 across: 87
See it in action

Calculating the width of a same-size gallery

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

Calculating the width of a staggered gallery

The Desired Result

Click to Enlarge :: Staggered images have to be calculated using the methods described below

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.

That's a lot of math…

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.