My problem is that I have an element in an iOS app that is represented with a variable number of images (2->5). For 2, 3 and 4 images simply using something like this works great.
What would be the perfect layout for a gallery of 5 images.
There are various approaches to this problem, but largely you need to consider the use of whitespace, grouping, and symmetry to create a balanced impression, as well as whether one or two of the images might reasonably act as primary images.
Websites like Google and Flickr generally tend to resize some images to fit nicely into a row, but when your row only has 2 or 3 images in, there's not that much choice (if any) in the sizes you can use whilst aligning the top and bottom edges nicely (although auto cropping may be a possibility - see further down).
So with 3 images you might have choices like these:
For 5 images you actually have more choice if you can resize some images:
For me personally - I prefer the two primary images in the top row most pleasing, such as these examples:
Using 5 uncropped images:
Or if feasable, auto-cropping the smaller images as required in order to keep the core content, but when the user clicks on an image to view it, you obviously would show the full image
An interesting little diversion here is that if you want 2 squares on the top and 3 on the bottom each with edge length L, and you can choose the gap D between each image, such that D = 0.236 × L then you will end up with the ratio of the edges of the top squares to the bottom squares being equal to the golden ratio.
That would look something like this - which does actually have an odd kind of beauty about it - once you get over the chunky spacing relative to the examples above.