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 <david@davidsimpson.me>

## Date created: 2013-11-20

## Installed by: My Name

## @noparams
<ac:structured-macro ac:name="gallery" />
<script>

  (function() { // from: http://stackoverflow.com/a/8584217/1958200

    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());

      });

    }

  })(jQuery);
  jQuery("td.gallery-image")

    .unwrap().unwrap().unwrap() // unwrap tr, tbody & table

    .changeElementType("span");

  jQuery('.gallery tr').remove(); // remove extra rows

  jQuery('a.gallery-link').css({'display':'inline'}); // fix styles

</script>

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