HTML Image question

[jdport]

I am trying to lay out pictures on a web page, having read in all the filenames from a database. This isn't a problem, except that the pictures aren't all the same size. I would like to lay them out in 2 columns side by side, with each picture being no wider than 300 pixels and no taller than 300 pixels. If the picture is wider than 300 pixels and shorter than it is wide, I'd like it to display the picture 300 pixels wide with the height scaled down proportionally and if the picture is taller than 300 pixels and taller than it is wide, I'd like it to display the picture 300 pixels tall and scale the width down proportionally. If the picture is smaller than 300 pixels both in width and height then I'd probably want to scale it up until the larger of width or height was 300 pixels. Is there any way to do this in html or even javascript?

I hope I was clear with what I'm trying to do...

Thanks

 

[zagood]

If you're pulling the imagenames from a database, are you using ASP or PHP? Hopefully you're not using javascript.

Store the image sizes in separate fields (width, height) in the database as well. When loading the filename also pull the width and height and store them in variables. Create an equation to upsize or downsize proportionally.

Sorry, 24 just started, gotta run. You can figure it out from there.

-z

 

[austin316]

FTW!

<img src="image.jpg" width="300" height="300">


note though, this resizes the image, but does not reduce its actually size. IE: if the file was 150k before, it will still be 150k. do you want to make thumbnails instead?

 

[Atheus]

I tried to do something like this once - I wanted to resize full images to thumbnails on the fly, but gave up on the idea coz I found all the options too wasteful compared to just scaling the images in photoshop beforehand. I was gonna do it server side with php, there's definantely no way with just html. You could probably do it with javascript but it would be processor intensive client side.

 

[Atheus]

Originally posted by: austin316
FTW!

<img src="image.jpg" width="300" height="300">

This won't scale proportionally like he wants, you would have to calculate width/height beforehand, like if(image.width>300) newwidth=300; work out the ratio between width and newwidth and reduce height by same amount, etc.

 

[jdport]

Originally posted by: zagood
If you're pulling the imagenames from a database, are you using ASP or PHP? Hopefully you're not using javascript.

Store the image sizes in separate fields (width, height) in the database as well. When loading the filename also pull the width and height and store them in variables. Create an equation to upsize or downsize proportionally.

Sorry, 24 just started, gotta run. You can figure it out from there.

-z

I'm using PHP to read the filenames from a MySQL table. I can't put the image size in the database because the image size will be unknown, they are pictures of any size submitted to my web site and I just want to change the display size of the image.

I thought I could just do something like the code attached below...

And call that function in a loop. However, it seems that javascript doesn't like me using an array there and it ignores the [ ] and gives the error "document.picname has no properties".

Any ideas?

 

[jdport]

Originally posted by: austin316
FTW!

<img src="image.jpg" width="300" height="300">


note though, this resizes the image, but does not reduce its actually size. IE: if the file was 150k before, it will still be 150k. do you want to make thumbnails instead?

heh.. This was actually what I did at first thinking it would be that simple, but that forces both the height and width to be 300, rather than just limiting it to 300. The result is squished and stretched pictures.

 

[jdport]

 

[stndn]

Actually, if the images are uploaded via HTML form and you process them with PHP, you can get their sizes to be stored in database. Look up the function getimagesize() for that.

Or if you don't want that, you can do getimagesize() when you read the filename to be processed, calculate the proportional width and height, then put the <img src='' width='' height'' /> stuffs in your HTML later on.

The first is preferred if possible, since it puts less burder in the server in terms of how often you will need to calculate the image size.


A more elegant solution is to create the thumbnails upon uploading of the images and then store them separately. But, not sure on how many upload processed you'll encounter...

 

[jdport]

Thanks Stndn, I wasn't familiar with the getimagesize() function... that's just what I needed... and makes for a much simpler solution than what I was trying to do with the javascript. I could do it either the first or the second way you suggested, but it's a pretty low hit web site and I don't think there will be a ton of pictures ... so I may just go with the second solution but it might not be too hard to modify what I have to do it the first way.

 

[SaturnX]

Create thumbnails on the fly, I use it for screenshots in the CMS i designed, GD is a powerful set of libraries:

Here's some info:
http://www.icant.co.uk/articles/phpthumbnails/

--Mark