The current gallery code includes a lot of padding around the images (inside each single-image boxes; not counting the margin between boxes).
Simply allowing the images to fit the corresponding boxes would already be a great improvement (since the default gallery size, e.g. in category pages, is often insufficient to discern the details of non-closeup images).
However, ideally the screen space used by images should be maximized, producing a tightly packed page with most of the space dedicated to the images, rather than whitespace. This is how Flickr and Google+ do it, for instance:
- https://www.flickr.com/search/?text=kittens&sort=interestingness-desc
- https://plus.google.com/photos/+ThomasHawk/albums/posts
It's not hard to do this for a fixed gallery width (just adjust the image widths so the heights are the same), and indeed this is implemented on Wikipedia: https://en.wikipedia.org/wiki/Template:Auto_images
That approach would be a great improvement, but it doesn't handle different screen sizes which would different row widths to be effective (e.g. in category pages). Fortunately, there's already solutions to that. Here's a link explaining how to implement a dynamic gallery in this way: http://www.techbits.de/2011/10/25/building-a-google-plus-inspired-image-gallery/
And here's a demo (try resizing the page): http://fmaul.de/gallery-grid-example/
Version: 1.24rc
Severity: enhancement
URL: https://github.com/reddit/reddit/blob/a6a4da72a1a0f44e0174b2ad0a865b9f68d3c1cd/r2/r2/lib/scraper.py#L57-84
See Also:
https://bugzilla.wikimedia.org/show_bug.cgi?id=30270
https://bugzilla.wikimedia.org/show_bug.cgi?id=35756