7

What would be the best way to fill "space" in user interface for irregular image sizes gallery?

Conditions:

  • The row are subjected to hold maximum 3 images only.
  • Float left
  • If the total width of the images exceed the width of container, the images will shift and create a space.

Irregular Images with space

For example:

I am concerned with the red box (they are empty spaces).

How to make my gallery empty space filled up, as I do not want the empty spaces to create an unattractive interface?

Improve this question
3
  • I was thinking to use grass picture inside empty spaces, but yet again how to fill it, keeping in mind the uncertainty of height and width of empty spaces? anyways, I reset to original question.
    – jitendra789
    Nov 16, 2012 at 18:38
  • 2
    I would prefer empty space 100 times over visual noise from irrelevant images of grass.
    – Marjan Venema
    Nov 16, 2012 at 19:38
  • 1
    Why not scale the images to fill the space? e.g. In your first row, scale Image#2 to the same height as Image#1 and #3, and scale the trio to the exact width of the column. For your second row, Scale Image#4 and #5 to the width of the column, and so on. Facebook and Google+ would be good references.
    – Bevan
    Nov 18, 2012 at 20:04

5 Answers 5

Reset to default
3

You could style / tile them like pinterest, where they'd all have the same width, and only the height would differ. Then you wouldn't have any whitespace, though the images would not retain their original size (not sure if that is a dealbreaker or not).

Improve this answer
1
  • it help to some extent, but is not an answer to my solution.
    – jitendra789
    Nov 17, 2012 at 11:02
7

There is a jquery plugin called Masonry that:

Arranges elements vertically, positioning each element in the next open spot in the grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.

And the same author built Isotope which is even better, with filtering and sorting options, check the demo page.

enter image description here

Improve this answer
4

Any number of things could be done, my personal fav would be braking some of your rules but simply calculate the width of the screen at start up, and use some math count how many images can display:

if (TotalWidth - imageWidth1 - imageWidth2 - imageWidth3) <= 0  { 3 image center}
elseif (TotalWidth - imageWidth1 - imageWidth2) <=0 { display 2 image center)
 else {display 1 image Center}

Note: another answer has better pseudo code for the full effect.

This would give a tossed photo look with the current setup and would scale to different device sizes.

Excluding that you could..

Calculate the predominant color and display an image off that.

Having tags for the images could put in a context sensitive image.

Total the color/brightness of all images and display something on that.

Display comments about images using the above rules tags for content and color/brightness levels.

You would probably want to randomize the padding image's to make them pre-or-post. There should be a lot of images or it will be like the grass comment repetitious noise.

You could also do a picasa/Google+ like effect and take the brightest/darkest or off some other equation and use it as the background this would give interest to the blank areas and be highly dynamic. This would be my second fav one, probably used in conjunction with my first, it also helps tie the "most visually different" with the others.

Improve this answer
0
1

I agree with Marjan about leaving empty spaces as they are instead of adding irrelevant images. Unless ofcourse, they add to the aesthetics and aren't a burden on the eyes (depends on your design).

If you'd like to avoid the empty spaces on the right of the images, you could modify your code to match the total width of the images in a row with the width of your gallery container, preferably in the following manner.
1. In the case of three images in a row, calculate the width of the empty space on the right ((TotalWidth - imageWidth1 - imageWidth2 - imageWidth3) / 3) and add this value to the width of each image, scaling the height proportionately.
2. In the case of two images in a row, do the same as above but calculate the gap using ((TotalWidth - imageWidth1 - imageWidth2) / 2) and add this value to the width of each image, scaling the height proportionately.

You can also set a certain tolerance limit for the width of the empty gap on the right, and if the width meets your tolerance limit, you could show a third image in the same row by reducing the width of all three images so that they are equal to the width of your gallery container.

I'd suggest not playing around more with the empty spaces below each image (if any), as you'd need more code and javascript processing, effectively increasing your page load time even more. Either adjust the empty spaces to the right of your container, OR use a similar approach to adjust the spaces below each image, NOT both.

Improve this answer
1

I would advise against filling whitespace with eye-catching, irrelevant images as you have suggested in the comments.

If playing with the image order and dimensions isn't an option then leaving whitespace on the right-hand side of the page isn't such a big deal but I would center-align images on each row on the vertical axis at the very least, to improve the distribution of whitespace. You could also find a subtle textured background to reduce the contrast between the images and surrounding whitespace.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.