Page 1 of 1

Howto crop an image given in an <img /> tag?

Posted: Fri Jun 12, 2009 4:36 pm
by jl2424
Given an image as

Code: Select all

<img ... />
I would like to generate a thumbnail image which is 85x85 pixels. I already tried to do it with CSS so that I put the given

Code: Select all

<img ... />
into a DIV and set overflow:hidden but this does not really work well. The img-Tag is generated by Wordpress and returns a user-picture. For the blog design I need the thumbnail as 85x85 px, but I do not know before if the user uploads a picture with width>height or height>width.

Re: Howto crop an image given in an <img /> tag?

Posted: Fri Jun 12, 2009 4:54 pm
by requinix
You need PHP.

(If you're using CSS then you're not thumbnailing anything: you're displaying the exact same image in a smaller space. The user has to download the entire image and that defeats the purpose of a thumbnail.)

There's plenty of stuff around here and especially on Google about how to use PHP to make a thumbnail of an image.

The thumbnailing happens when someone tries to visit a certain URL, like

Code: Select all

http://example.com/thumbnailUser.php?user=jl2424
thumbnailUser.php looks up the user's avatar and outputs a thumbnail. This method sucks but is the easiest.


The best method would be to create a thumbnail of the avatar when it gets uploaded. Then you just point the <img> to the location of the thumbnail.

Code: Select all

http://example.com/images/users/thumb_jl2424.jpg