Image Sizing

[salguod]

I'm looking for a way to set a 'max width' for images on my site. I want images that are over say 400px wide to be displayed at 400px, while images under 400px to be displayed actual size. If I add a 'width' attribute to the img tag, it forces the image to that size. The result is that smaller images get blown up and pixelated. I'd also want them to keep the aspect ratio.

 

Is this possible? Any other way to handle this?

 

(The background is that this is for a site where many people will be uploading images (family blog) and I suspect that they won't all get resized before uploading. Periodically I'll go back and re-size them to save server space and browser load times, but I want them display properly regardless.)

 

Thanks,

[surefire]

http://www.alistapart.com/articles/magazinelayout

 

http://us3.php.net/manual/en/function.imagesx.php

[salguod]

http://www.alistapart.com/articles/magazinelayout

 

http://us3.php.net/manual/en/function.imagesx.php

 

Boy, I think both of those are over my head. I've only skimmed them, though, perhaps they'll be clearer after a more thorough reading.

 

Do I understand the first one correctly that it doesn't actually change the file but resizes it on-the-fly?

[surefire]

Yes, that's correct. You will probably want to either resize the images to a predetermined size when they're uploaded, or you can use the second link to just grab the width of the image. If it's over 400, set the width. Otherwise, don't.

 

The ideal solution is resizing on upload. The process would be

 

1- Upload

2- Verify file type

3- Determine file dimensions

4- Resize if necessary

5- Save to server

6- Store info in database

 

If you're going to 'roll your own' then you might look at

 

htp://www.phpclasses.org

 

for a starting point. Or you might consider buying one of the commercially available scripts at

 

htp://www.hotscripts.com

[surefire]

Resizing on the fly requires server resources, slows down page load (if even for a little bit), and is probably overkill for your app. If you wanted to get snazzy you could resize on the fly and use a caching script server side so that 99% of the time no resizing would be required.

[Deverill]

You may want to check out Coppermine Gallery. It's available here for free - just go to your cpanel (www.yourtchdomain.com/cpanel), log in and select Fantastico... it's listed in the lower half of the page. It lets folks upload if you allow it and it has a max size but won't grow it if it's smaller.

[carbonize]

Since they are uploading the photos and your server has GD (you are on TC I take it?) you could either just resize the image on upload if it's to large or, and this is what my guestbook script does, create a thumbnail version of the image if it's to large and then the displayed image is a link to the full size one.

 

As the resizing is done on uploading it will not affect the spedd at which the viewin page loads.

 

Actually I wonder if you could do this with javascript. Something for me to look into but not the best solution.

Edited August 2, 2006 by carbonize

[salguod]

Thanks folks, I've got some homework to do. :-)

 

Ideally for my application the image would be re-size upon upload. I've got no need for the full size image on the server.

 

I'm using a Moveable Type plug in that uploads the file and ties it to an entry, so I don't think Coppermine will work. I'm trying to make this as easy as possible for non-techie users.

[carbonize]

Maybe there is already a mod for MT that does this. If not the code to do it should be simple enough to add as it's only about twenty lines and most of thats dealing with comparing altered height with width to make sure it's all in proportion.