UPDATE: Just use Justin Tadlock’s Cleaner Gallery plugin.
I am in the midst of rewriting my WP theme WPFolio Two. I wanted to make the gallery thumbnail images a flexible width rather than their default fixed width. To do this, I gave the attachment images themselves a width: 100%; but needed to apply my responsive grid to each image’s container. So, how to conditionally add the .threecol, .fourcol, .fivecol to each gallery item according to the number of gallery columns selected?
The answer is Sass! Here’s a simple loop that creates a style for each gallery class and gives a %age width according to the number of columns:
$width: 100%;
@for $col from 1 through 9 {
.gallery-columns-#{$col} dl {
width: $width/$col;
}
}
There would definitely be a fancier way to do this instead of width: $width/$col; if I was using a Compass-y grid like Susy or Singularity. This is on my to-do list.
Lastly, these styles come into play at the tablet size of 768px. For smaller devices, the columns specified in WP will be overridden to two columns or so. I’d post that code, but I can’t work on it now because Mavericks (i.e. sloppy me moving folders around) messed up all of my file permissions, thus no localhost for me at the moment.