The Confluence gallery macro is handy. In its most basic form, it adds all attached images into the page. Unfortunately, it puts the images in a table. Really? Well, I'm sure they'll get around to fixing that eventually.

Meantime, I'd like the gallery to display as many images as it can in a a row, and then wrap to the next line.

Shouldn't be too hard, right?

Indeed it isn't. A little user macro wrapper with some client side code to clean up the markup seems to do the job:

## Macro: responsive-gallery
## Macro title: Responsive Gallery
## Macro has a body: N
## Body processing: n/a
## Output: HTML
## Developed by: David Simpson <>
## Date created: 2013-11-20
## Installed by: My Name

## @noparams

<ac:structured-macro ac:name="gallery" />

(function() { // from:
jQuery.fn.changeElementType = function(newType) {
var attrs = {};
jQuery.each(this[0].attributes, function(idx, attr) {
attrs[attr.nodeName] = attr.nodeValue;
this.replaceWith(function() {
return jQuery("<" + newType + "/>", attrs).append($(this).contents());

.unwrap().unwrap().unwrap() // unwrap tr, tbody & table
jQuery('.gallery tr').remove(); // remove extra rows
jQuery('').css({'display':'inline'}); // fix styles

With this your gallery will fit the page width.

Here's a demo

When Atlassian catch up and make the gallery macro responsive, you can simply remove the JavaScript