Creating a perfect grid of images

JavaScript
1

Hello everyone,

Since a long time I wanted to work on a perfect grid of images, something I haven’t saw anywhere yet.

I need an image gallery that would do the following:

  1. Create a perfect grid from inputted images of any size and any amount with no gaps at all.
  2. In order to fill gaps in, the system can resize the images, however ratio should be kept (In case there will be still gaps, the system can also crop certain images).
  3. Images should not be much different in sizes, that means if we got 2 inputted images, 1st is 3000x2000 and the 2nd is 600x300, then obviously the first image should be resized smaller.
  4. Lets say that for the start, the canvas that holds all the images will be fluid, but should be a square canvas (or at least close to be a square canvas, what I mean is that it shouldn’t be 1000x200 but more like 800x600 etc).

There are probably more parameters to be taken care of, but these are the main ones.
Basically, I need it done with PHP GD library (or imagick) but coding it in any other language would work, as I just need to see the calculations that needs to be taken in order to achieve such a thing.
Please try to avoid posting links to resources that do similar things, as its only similar and not excactly what I need (feel free to post links to resources that could help get to the solution however), here are a couple of resources I looked at and can be helpful at starting it at least:

Mason.js: http://masonjs.com/
Problem: I don’t see how does it fit with images at all, It doesn’t care about images sizes so it can put wide images in high squares and it duplicates images to fill in empty spaces, it got no calculations at all for resizing elements in order to fit in.

Isotope.js: http://isotope.metafizzy.co/
Problem: There are gaps between elements and I doubt there are any resizing calculations for images here either, to be honest I liked Mason.js more.

Feel free to discuss the issue and possible solutions, I would really like to see where it would go and if we will be able to build something that would achieve this.

Regards,
Ulthane.

2

No one is willing to take the challange, its too hard or did I post it in the wrong place? :slight_smile:

3

The wrong forum maybe. I’ll move it to the PHP forum. Let’s see if you’ll get some answers there.

4

Well its not really php, that thing can be done at any language, since the bigger problem here is getting to the correct calculations needed to be done.
But yeah, hope there’ll be some answers in the php forum :slight_smile:

5
  1. Create a perfect grid from inputted images of any size and any amount with no gaps at all.
    Any amount might be hard for example 5 images can only break into one line of images of the same size, and if display size varies as well e.g. 800 x 600 you have some strangely cropped images that are 160 wide by 600 in height. So I guess a perfect grid is possible but result might look odd. Seven, nine etc will also only break to one line so it gets worse.
6

Any amount might be hard for example 5 images can only break into one line of images of the same size, and if display size varies as well e.g. 800 x 600 you have some strangely cropped images that are 160 wide by 600 in height. So I guess a perfect grid is possible but result might look odd. Seven, nine etc will also only break to one line so it gets worse.

Hello Drummin,
I didn’t really understand why would it break into one line, don’t forget that everything is fluid, even the canvas you’ll put the images on.
As long as you say its possible doing this, I would like to go for it and see the result, basically I don’t belive it should have any problems.
You could use Mason.js as your base to work on.

7

Here’s a link of how far I could get with it:
http://petpal.co.il/test/fluid.html

Basically the biggest problem there is to get rid of the unnessasry duplications (but maintain the ‘no gaps’ feature ofcourse.).
To be honest, I don’t understand mason’s properties that much either, there’s no proper docs anywhere, so if anyone could shed some light.

8

Anybody? :slight_smile: