Width Guide
- Same-size Quick Reference
- Calculating the width of a same-size gallery
- Calculating the width of a staggered gallery
- That's a lot of math…
- 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 actionOne 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: 220One 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 4Examples:
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
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.