3

This is kind of a vague question, but I'm looking for suggestions and perhaps suggestions from people that have had experience with this issue. I have a PHP array of different sized images of products that I want to display on my web page with four to a row. The issue is that because they are different sizes, I don't know how to display them without them all coming out very "off".

Below is an example of a situation where it just looks weird:

Weird situation

I don't know the best way to position these images so they don't look "weird". Again, I know this is kind of vague, but perhaps someone has had experience with this? How do other shopping sites deal with this issue?

Thanks

Jon Rubins
  • 4,323
  • 9
  • 32
  • 51
  • 1
    to prevent the images from being weird, you need to keep the aspect ratio.. so now you have to decide which is more important to you, hight or width? and from there you can go with the GD Library to resize – Adi May 01 '12 at 22:20
  • I think you can either use PHP and create a thumbnail of each image with the help of GD or use javascript to "resize" the images when displayed on the browser. – mpratt May 01 '12 at 22:23
  • 1
    Couldn't have found a Megan Fox image set? Is that pink or salmon? – Mike Purcell May 01 '12 at 22:23

3 Answers3

2

Have you considered the fantastic masonry jQuery plugin?

Edit: Also available without jQuery: http://vanilla-masonry.desandro.com/

Will Demaine
  • 1,516
  • 1
  • 11
  • 12
1

If I may, I would suggest you take a look at our service that includes image transformations in the cloud (and delivery through fast CDN).

You can use gravity based cropping while maintaining aspect ratio or face detection based cropping for reaching your desired images. Some examples of generating a 100x100 JPG of an uploaded image named 'face_top':

http://res.cloudinary.com/demo/image/upload/w_100,h_100,c_fill,g_north/face_top.jpg

100x100, Fill, North

http://res.cloudinary.com/demo/image/upload/w_100,h_100,c_fill,g_south/face_top.jpg

100x100, Fill, South

http://res.cloudinary.com/demo/image/upload/w_100,h_100,c_fill,g_face/face_top.jpg

100x100, Fill, Face

http://res.cloudinary.com/demo/image/upload/w_100,h_100,c_thumb,g_face/face_top.jpg

100x100, Thumb, Face

Many more transformation options available.

Cloudinary
  • 541
  • 3
  • 4
0

I had answered something similar in another question, where I went onto adding an example of how to resize the images to the fixed thumbnail dimension, with option to either keep the aspect ratio (and letter box) or crop content to all thumbs are consistant.

Please have a look at http://pastebin.com/STzAxrZA and note the $maximize parameter in image_resize_jpg()

I guess you need to decide if you're trying to change the HTML (and keep odd sized images) or change the way the thumbnail images are generated

Community
  • 1
  • 1
Scuzzy
  • 12,186
  • 1
  • 46
  • 46
  • Perhaps I could sort my array of images by size and then keep similarly sized images in the same row. Of course, that wouldn't really be reliable. – Jon Rubins May 01 '12 at 22:54
  • javascript could also be used to determine the highest image height for each row, and set all other sibling div elements to that height, you'll still suffer from white space. I personally prefer to crop images so all thumbnails are of consistent size. – Scuzzy May 02 '12 at 00:49