Gallery Columns Zero

I have a site where I love using galleries but I hate having to define their width. That’s something I hate about WordPress’ Gallery shortcode, you have to define a width, otherwise it’s all one column. Ugly ugly.

The way that WordPress handles these columns also sucks. It puts in clear breaks:

<br style="clear: both" />

And frankly I hate that too.

But I don’t do that with this other software I use. In fact, I have it all nicely coded in to show all my images, and then toss one final clear break at the bottom, to … clear the breaks. And what that does for me is gives me an adaptive width gallery that will expand and contract with my content.

So how can I do that with WordPress?

The easy part is something I already do in EDD, and that’s to use a fake column value of zero: gallery columns="0"

That gives me a handy new column class: gallery-columns-0

And that is very easy for me to style, by overriding the width from 100% to auto (the !important is dreadful), and set up the padding I want.

/* Gallery */

.gallery-columns-0 dl.gallery-item {
	width: auto!important;
	padding: 0;
	margin: 0 10px 0 0;
}

But what about the ‘break’ afterwards? If you only need to support IE 8 and up, then it’s as simple as this CSS:

.gallery-columns-0:after {
	content: "";
	display: table;
	clear: both;
	padding-bottom: 10px;
}

The padding on the bottom is to make it match my site, adjust as needed. I’m sure I could use the post_gallery filter hook and the same code from the gallery_shortcode function but with my br modification, but 0.017% of people visit this site using IE 7 or less, and at that percentage, so much of the site will look terrible anyway.

The only real downside is that I have to manually enter the shortcode in text mode, since I can’t select ‘0’ as an option from the dropdown.