Jump to content

Image Sizing


salguod
 Share

Recommended Posts

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,

Link to comment
Share on other sites

 

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?

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 by carbonize
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...