Hey Phil,
Usually I suggest nth-child selectors to vary styling based on loop count, but that would be a bit messy for this application, so we’ll do it with math! So here’s the full solution:
I started by setting the default n value to 0 before the Loop, otherwise the first 11 items would have no value for the custom CSS property --n: <Set n_value>0</Set>
Next, using math I find the remainder when the loop count is divided by 11 using the modulo operator (%): <Set n_remainder><Math><Get loop=count /> % 11</Math></Set>
Finally, right before the Loop is closed, I test for when the remainder is 0 (which means the loop count is a multiple of 11) and add one to the n value: <If variable=n_remainder value=0><Set n_value><Math><Get n_value /> + 1</Math>
If ever you do want to use the Math tag to do division, keep in mind that it expects / for division. Using the Math tag for something like this is definitely a bit daunting, but outputting values to test your work helps a lot!
Indeed, however, this is a pure CSS masonry gallery, and it seems the solution requires having the images in blocks of 11 to organise them properly. Usually, these galleries require some javascript which I try to avoid as much as possible.
Nevertheless, this all works great, thanks! I almost have a full and free gallery solution working, which I can share soon.