Okay, the reason I posted this is because I wasn’t sure what to search for. I’ll try to explain it as clearly as I can.
Say, I have an image sized 800×600. The box I’ve allotted for the image is 150×150 and has to be satisfied at all times. I can only allow an image to be shown at a maximum size of 150px for both height and width. So, technically, the image has to be scaled down to 200×150.
Now, the question:
Is there a way I can crop the height so it only shows 150×150? This is for viewing purposes only. I don’t need to save the image as a new file.
A good example is your profile page in Twitter. It shows your profile image cropped but when you click on it, you still get the image you originally uploaded.
Here’s what I’m trying to achieve. Get the smaller side in terms of pixels, resize it to 150px then hide the overflowing part of the other side. Again, no saving involved. Just for people’s viewing pleasure.
I use a simple PHP class which has several options for resizing. You can easily store the thumbnails via this class. As @jeroen said, you only have to do it once and they can be cached. It just requires PHP5 and GD library. Here is usage example:
// *** Include the class include("resize-class.php"); // *** 1) Initialise / load image $resizeObj = new resize('sample.jpg'); // *** 2) Resize image (options: exact, portrait, landscape, auto, crop) $resizeObj -> resizeImage(150, 150, 'crop'); // *** 3) Save image ('image-name', 'quality [int]') $resizeObj -> saveImage('sample-resized.jpg', 100);
And this is that class:
You load the image, resize it first so that it has the minimum side being 150, then you crop to the 150 width/height relative to the center. Then you just output your image:
You find the sourcecode, documentation, online demos and the API documentation here: WideImage.
Let me know if you’ve still got questions.
It is very easy to use
here is the class https://storage.googleapis.com/google-code-archive-downloads/v2/code.google.com/timthumb/timthumb.php
here are the params http://viralpatel.net/blogs/resize-image-dynamically-php/
I have tested looks works great
< img src="/script/timthumb.php?src=/some/path/myimage.png&w=100&h=80"
alt="resized image" />
Remember that you should be careful to use this, If you do not create regex validation for input params you may have security vulnerability.
That’s why they deprecated this lib, but it works perfect.
Why not just do this with CSS and not have to use the server for any processing? There are a couple of ways to accomplish this using CSS. The Clip method is one I have used before, and a google search will bring you several results. Here is one site that covers this well
I would store the thumbnails so that you only have to do it once and they can be cached. If your aspect ratio is fixed, I would scale them down to fit in a 200×200 box (there are some php answers here about that so I’ll skip it). If the aspect ratio varies, I would use a safe value so that it always covers your 150×150 box (like 300×300).
Then I would set the thumbnail image as a background image for the image box in css and you get exactly the effect you want:
To enhance the experience for css3 capable browsers you can set:
to the box so that it fits exactly (maintaining aspect ratio).
Save the file as imageresize.php and put this file in your image folder and just use the code like this to show image
you can use this code to show images in different sizes.
Here’s my Image Resize Class. The Class can get the Result that you want (cropping/centered cropping/etc.)… and a lot more 😉
I dont explain everything but if you got any questions just ask me.
I don’t know this fully but once I created a program which would view us thumbnail images for our images. And the code goes like this:
changing the parameters of imagecopyresized which are set to 0,0,0,0 here will crop your image from x1,y1 to x2,y2 Hope this helps
I have a shell script in place that does exactly what you need with ImageMagick:
- This resizes to a box covering 150×150 – the
-thumbnailoption strips all meta-information except for color profiles and is very fast.
- Then it cuts a box with 150×150 from the center (
-gravity center -extent 150x150) – exactly what you want.
- In addition I set
-quality 85%which should be plenty while reducing file size a lot.
- In this example I take the image from an
imgdirectory and write the thumbnail with the same filename to a
img150directory right next to it.
Experiment for best results.
As a few have mentioned, this can be done with CSS if you’re not saving the image. Although load times will be hurt (downloading a 800×600 image vs downloading a 150×150 image).
you can do this with jquery. i assume you have a classname for the images that you want to show cropped. for example it might be “.cropmyimage”, here’s the code:
Look into WideImage, an open-source PHP library for image manipulation. Could get a simple as
This is exactly you´re looking for, and one step futher, caching thumbs:
You can use this script as script.php?img=image.jpg&size=100, in this case, they are on the same folder of the script.
I think a simple solution with no stress and processin work would be with css:
1) Apply a class which will give you a cropped image. Do this with help of negative margin.
I haven’nt used the exact margin use it as you require.
2) On hover overwrite the marging attribute, so that it will give you the real image.
<img src='source' width="150" height="150" />
it will resize image.
though it will not preferable because it cause burden on browser.