How can i display this?

[billy_111]

hi,

 

I need to put together the following:

 

http://www.freemanholland.com/cow/homepage.jpg

 

I eventually need to be able to administer the images in the back-end but for now i just want to put it together..

 

The page will remain the same in terms of layout, the images wrapper will be elastic so it spreads across the screen.. I had a go at doing it with one image:

 

http://www.freemanholland.com/cow/public_html/

 

But i need to have the page looking like the image i have provided above..

 

How can i do this?

 

Thanks

[V]

You could use CSS and js to get a liquid layout with images. A while back I stumbled across a jquery tutorial that might help you. Check it out http://www.sohtanaka.com/web-design/smart-columns-w-css-jquery/

 

Nice website btw!

[billy_111]

Thanks mate..

 

Well is there a way i can do it with CSS? If you look at the images they are all different shapes and sizes..

 

If they were the same height but different widths it would be quite simple which is what i have now:

 

http://www.freemanholland.com/cow/public_html/

 

But i need to have it like this:

 

http://www.freemanholland.com/cow/homepage.jpg

 

Can you help?

 

And i didn't design the site

[V]

With just CSS I don't think you can achieve that dynamically. You can however paste together all the images in photoshop and just add dynamic post excerpts.

 

Using php and js I would first create an upload page, to upload my images to a "homepage_images" folder and create thumnails of those images to a thumbnails folder and as well insert their path into a DB table.

 

Then you can have for instance a column that's 300px wide, retrieve thumbnail image paths from the db table and generate thumbnails 150x150px and float them left or right in that column.

 

But then you have the wider thumbnails. For those I would use getimagesize() when uploading images  to detect if the width of some are particularity wider and their height smaller (wide images usually measure that)  and set their thumbnail width to 300px. Also one 300px wide thumbnail should substitute for two 150px thumbnails.. so you'll need to detect if you have a wide thumbnail and set the MYSQL limit  -2.

 

Then just add more columns with different properties. That would be my approach, hope it makes some sense..