Suggestion for a simple Photo Album

HenrySmith

Hi there,

I hope this post isn't too specific.

I am creating a simple application which consists of a Classic car album where the user can flip through various pages. However I am not sure what is the best and easiest way to display pictures of various size neatly on the sketch, one next to each other, similar to for example Google Image search results as shown below:

Can someone recommend how this may be done or whether there exists any tools that can facilitate this task? I was thinking of splitting the sketch in equal grids and scaling each image to fit exactly in each box. However I am not sure if this is the best way to do it.

Any recommendations will be greatly appreciated!

PhiLho

Tentative to analyze from your image only.

Obviously, they resize all images so they have all the same height, while keeping the aspect ratio. They end with a bunch of cells of various widths. Then comes the delicate task of organizing them so that the sum of five images widths fit in the width of the page (with margins, but that's a constant factor if the number of images per row is fixed). You can start by sorting the images by width. Then put one large image per row, and try to fit the remaining ones. I see they don't hesitate to slightly reduce further the image (less tall) to fit them in.

Note that you should not apply two resizes, if needed, but instead recompute the new size, and resize from the original: you will get a better image at the end.

HenrySmith

Thanks for your reply PhiLho.

Good tips indeed. The problem is that like a search engine, my images will be ordered according to some criteria and thus it won't be possible (in my case) to sort the images by width.

Maybe as you suggested I should try the following approach:

1. Re-size the images so that they all have the same height while maintain the aspect ratio,

2. Attempt to fit 5 images in a row. If they don't fit the widest image is re-sized in order to reduce it width enough for the row of 5 images to fit.

Thanks for letting me know that it better to resize on the original image. Some good starting tips. I will let you know what I did :)

Chrisir

• Re-size the images so that they all have the same height while maintain the aspect ratio,

• Attempt to fit 5 images in a row. If they don't fit by a great amount, try 4 images

• If they don't fit by a small amount, crop them all from left and right by the same amount: cropBy = amountOfExceedingWidth / 5 / 2;

• or when you need to crop with 4 images as well : cropBy = amountOfExceedingWidth / 4 / 2;

• or increase spacing (and make spacing evenly / same for all images)

• or take 5 / 4 images and make the height so that they exactly fit in the line (keeping the aspect ratio). No fixed line height

[edited]

;-)

HenrySmith

Thanks Chrisir for the tips. I will surely consider this as well and let you know the approach that I took! :)

Did you mean:

If they don't fit by a SMALL amount, crop them all from left and right by the same amount: cropBy = amountOfExceedingWidth / 5 / 2; ...by the third point? :)

Chrisir

yes, sorry

;-)

HenrySmith

Hi there, So this is where I got so for (I am using a dummy database so far as I have not yet decided on the classic car pics):

The results are quite good. The approach that I used is very close to what you both suggested:

1. I used 3 rows of 5 images all the time because I need to display 15 images per screen.
2. I found the totalWidth the five images that makes up a row.
3. If totalWidth is less then the available space threshold value, then divide the reaming space as spacing between each image. Else, find the exceeded value. Divide the exceeded value by 5*2.
4. Place images accordingly.

However, when cropping is required, I am consider to crop just the three (from 5) widest images in the row. Thus the two smallest images when be cropped. I think the result may be even better.

I am having one issue: when I used crop() the images is being displayed upside down! I read that this is a bug (if I'm not wrong) and cannot figure out how to display it the correctly. Any help with this issue? :)

Thanks again for the great tips!

Chrisir

scale (0,-1);

?

HenrySmith

Instead of using scale() I simply removed the P2D that was being used to display resized images using image() (all images are resized because of the height) and instead use copy() for all images.

Chrisir

great!