I'm posting this in the HTML/CSS forum because I'm really not sure what other coding language might be involved in my solution. Once I figure that out, feel free to move the topic to the appropriate forum.

I'm building an e-commerce website and I want to have a "wall" of photos showing customers with their product. I will crop every photo to one of three sizes: square, tall rectangle or long rectangle. The photos will then be Tetrised together in a table as shown in the example pic here:

http://home.mchsi.com/~jtrain/photowall-ex.gif

I would like to code this so that I can use a back end tool to simply upload a photo (I will make sure it is one of the three correct sizes) and the table will dynamically update, placing the new photo (#1 in the example pic) in the top left position and rearranging the other photos appropriately, moving them to the right or down to fit so that there are no gaps. The width of the table will be fixed but the height will obviously continue growing as more photos are added.

Thanks for your time!

Excavator

11-11-2011, 05:27 PM

Hello JTrainGBR83,
A normal floated layout won't work with your odd sized thumbnails. I think JQuery would be a nice solution, have a look at this - http://galleria.aino.se/themes/folio/

Resize the brower window while looking at that demo.

JTrainGBR83

11-11-2011, 05:35 PM

Hello JTrainGBR83,
A normal floated layout won't work with your odd sized thumbnails. I think JQuery would be a nice solution, have a look at this - http://galleria.aino.se/themes/folio/

Resize the brower window while looking at that demo.

That's a neat demo. I really am not looking for the table to change based on the browser window, though. The width of the table will be fixed. The only time the table will change is when I add another photo. At that point the HTML will update and stay fixed until another photo is added.

Just to clarify, the bottom of my example is cropped off. Pic 8 is actually the same size as 4 and 5, and 12-15 are the same 1, 2, 6, 7, etc.

JTrainGBR83

11-11-2011, 05:42 PM

Just to clarify, the bottom of my example is cropped off. Pic 8 is actually the same size as 4 and 5, and 12-15 are the same 1, 2, 6, 7, etc.

I went ahead and changed the pic to avoid confusion. A long rectangle is twice the width of the square plus 10px to account for padding, and the tall rectangle is twice the height of the square plus 10px padding. So they should all fit nicely together in a table.

Excavator

11-11-2011, 05:48 PM

That's a neat demo. I really am not looking for the table to change based on the browser window, though. The width of the table will be fixed. The only time the table will change is when I add another photo. At that point the HTML will update and stay fixed until another photo is added.

It won't matter that your width won't change, that JQuery will still arrange the incoming photos for you where floats would not.

JTrainGBR83

11-11-2011, 06:02 PM

It won't matter that your width won't change, that JQuery will still arrange the incoming photos for you where floats would not.

I'm not familiar at all with jQuery. I'm up for whatever solution will help me, though. I just want to make sure I'm clear (I may have been a little ambiguous with the use of "dynamically") that the actual HTML will be fixed. I just need it adjusted when I upload a new photo, but at all other times the table will not move or change based on the visitor.

Using the example pic, if I uploaded a new "tall rectangle"-sized photo, the HTML would adjust to put that photo in the top left, placing 1-5 one "unit" to the right, moving 6-7 to where 8 currently is, placing 9, 10, 12-14 one unit right and moving 11 and 15 down to the next line. At this point, the table will be set and will not change at all until another photo is uploaded.

If jQuery will work for this, and it's something that can be tackled by a novice, I'm ready to try.